使用mock-server实现模拟接口对接流程步骤
前端  /  管理员 发布于 9个月前   243
在日常开发中,后端接口和前端开发的进度一般会不一致,有时候前端因为一个接口没有对接完成,
就会卡住,无法进行下去,所以这个时候需要进行数据 mock,使得业务能正常开发下去,
当然首要的前提是,需要前后端对接口的数据定义要统一。
安装mock
yarn add mockjs
yarn add @types/mockjs -D
yarn add vite-plugin-mock -D
使用
找到 vite.config.js
import { viteMockServe } from 'vite-plugin-mock'
// 然后在 plugins 中添加 viteMockServe
return {
plugins: [
viteMockServe({
// mock 数据的文件夹
mockPath: './src/mock',
// 根据实际情况,是否需要开启 mock
localEnabled: command === 'serve',
watchFiles: true // 监视文件夹中的文件更改。 并实时同步到请求结果
}),
}
创建 mock 数据
mkdir ./src/mock
touch login.ts
添加一个 login 的 mock 数据
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/login',
method: 'post',
response: ({ query }) => {
return {
code: 10000,
data: {
token: 'adminislogined'
}
}
}
},
{
url: '/api/logout',
method: 'post',
response: ({ query }) => {
return {
code: 10000,
data: {
}
}
}
}
] as MockMethod[]
注意,这里的 mock 实际是会通过浏览器发送真实请求的,
所以在业务开发中,后端可以先定义好接口返回的数据格式,前端按照接口数据格式模拟数据。
一旦后端开发完成之后,通过关闭 mock-serve,可以迅速完成业务接口交接。
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号