使用 mock-server 模拟接口

为什么使用 mock

在日常开发中,后端接口和前端开发的进度一般会不一致,有时候前端因为一个接口没有对接完成,就会卡住,无法进行下去,所以这个时候需要进行数据 mock,使得业务能正常开发下去,当然首要的前提是,需要前后端对接口的数据定义要统一。

安装

yarn add mockjs

yarn add @types/mockjs -D

yarn add vite-plugin-mock -D

使用

找到 vite.config.js

javascript
import { viteMockServe } from 'vite-plugin-mock'


// 然后在 plugins 中添加 viteMockServe
return {
    plugins: [
      viteMockServe({
        // mock 数据的文件夹
        mockPath: './src/mock',
        // 根据实际情况,是否需要开启 mock
        localEnabled: command === 'serve',
        watchFiles: true // 监视文件夹中的文件更改。 并实时同步到请求结果
      }),
}

创建 mock 数据

shell
mkdir ./src/mock

touch login.ts

添加一个 loginmock 数据

javascript
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,可以迅速完成业务接口交接。 目前 catchadmin vue3 的后台,正是使用这样的方式开发,所以可以通过查看 mock 的数据接口,就可以了解接口的数据定义了

JaguarJack
后端开发工程师,前端入门选手,略知相关服务器知识,偏爱❤️ Laravel & Vue
本作品采用《CC 协议》,转载必须注明作者和本文链接
🎉专业版 CatchAdminPRO