apits2mock
Interface Mocking for apits generated from openapi on Vite.
Best served with vite-plugin-swagger2ts
- Define interfaces in a specified folder.
Data simulation is done using mockjs, where comments can be used to process templates generated by interfaces.
Comment Type | Corresponding Mockjs | Description |
---|---|---|
description | - | Comments with ~debug will print the generated mock templates for inspection |
format | Data Placeholder | Mockjs placeholders, e.g., ~name, ~date, etc. Since there's a conflict between the @ character in Mockjs templates and the @ character in comments, the @ in data templates needs to be replaced with ~ |
pattern | Generation Rule | Indicates Mockjs generation rules, e.g., +1, 10-20, etc. |
// request/interfaces/xxx.ts
export default interface JuHeInterface {
'/toutiao/index': {
/**
* @description description Comments with ~debug will print the generated mock templates for inspection
*/
get: {
// Request parameters, fixed type, optional
// TODO Add interface type validation
param: {
query: {
type: 'top' | 'guonei' | 'guoji' | 'yule' | 'tiyu'
page: number
page_size: number
is_filter: 1 | 0
}
}
// Required response content
response: {
/**
* @description format Comments indicate Mockjs placeholders, e.g., ~name, ~date, etc.
* @format ~integer(10)
*/
page: number
/**
* @format ~integer(10)
*/
pageSize: number
/**
* @description pattern Comments indicate Mockjs generation rules, e.g., +1, 10-20, etc.
* @format ~name
* @pattern 2
*/
stat: string
data: {
uniquekey: string
title: string
date: string
category: string
author_name: string
url: string
thumbnail_pic_s: string
is_content: string
}[]
}
}
}
}
2、Configure the plugin
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import TS2Mock from 'vite-plugin-apits2mock'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
TS2Mock([{
// Target folder address, where all interfaces that can be parsed will become templates
dir: 'src/request/interfaces',
// URL prefix, when used with the development proxy server, can simulate interfaces that the proxy reports errors for
prefix: '/api',
// Unified interface packaging, add a unified return package format for interfaces. This part of the type definition can be removed when defining interfaces.
wrapper: {
error_code: '@integer(10,200)',
reason: '@string',
// Types defined in the folder will be replaced here
result: '@Interface',
},
custom: {
// Properties are concatenated in the format method__pathname, with dynamic paths starting with :
// Data that can be directly serialized to JSON
'get__/user/:id': {
id: '1',
name: 'Jobs'
},
// Functions can be used to return data
'get__/menu/:id': () => {
return {
id: Math.floor(Math.random() * 100),
name: 'User Management'
}
}
}
}]),
],
resolve: {
alias: { '@/': '/src/' },
},
server: {
proxy: {
// When consistent with TS2Mock configuration prefix, modify the proxy configuration in the configure function, listen for proxy events, and handle data simulation
'/api': {
target: 'https://apis.juhe.cn/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
},
})