在 vue 或 react 项目中使用 mockjs 搭建 mock server

裴嘉许

2023-12-01

有时候，在公司里一些项目开发前，后端接口没那么快给到前端时，前端可以先跟后端约定好各个接口的请求路径、请求参数以及返回数据格式，先整理出一份接口文档，这样前端可以通过mockjs参考接口文档，自己先模拟数据，写业务代码，等待后端准备好，再用后端真实的接口数据替换自己写模拟数据，实现前后端同时开发。

一、在Vue中的使用

1、安装mock.js

npm i  mockjs -D

2、新建mock文件夹

在项目的根目录下新建mock文件夹（打包记得删除，或者使用码云托管代码，用.gitignore忽略掉），在文件夹下新建index.js文件

// mock/index.js

// 引入mockjs
import Mock from 'mockjs';  

// 拦截请求，模拟接口url和数据
Mock.mock("/api/list", "get", {
	message: "success",
    code: 200,
    data: {
        name: "xxx"
    }
})


//带参数
/* 
post参数，option前端请求的数据，option.url请求的地址
option.type 请求的方式
option.body请求的字符参数（需要JSON.parse转对象）
*/
Mock.mock("/api/list2/", "post", function (option) {
    return {
        code: 0,
        msg: "参数成功",
        data: {
            title: "信息标题",
            content: "内容",
            ...JSON.parse(option.body),
        },
    };
});

3、在开发环境下，引入mock

在配置文件 .env.development 里配置mock开启的标示

// .env.development

NODE_ENV = development
VUE_APP_MOCK = true

在main.js中，判断是开发环境且有开启mock的标示时，引入mock

// main.js

// 判断配置文件里，mock是否要开启
if(process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK = true){
    import "./mock/index.js"
}

4、在具体业务逻辑里使用

// 引入axios
import axios from "axios"


// /接口地址与拦截地址要一致
axios.get("/api/list/").then(res => {
    console.log('res', res)
})

//带参数
axios.post("/api/list2/", { id: 111, key: "xxx" }).then(res => {
   console.log("带参数", res);
});

二、在react中使用

1、安装mock.js

npm i  mockjs -D

2、新建mock文件夹

在项目的根目录下新建mock文件夹（打包记得删除，或者使用码云托管代码，用.gitignore忽略掉），在文件夹下新建index.js文件

// mock/index.js

// 引入mockjs
import Mock from 'mockjs';  

// 拦截请求，模拟接口url和数据
Mock.mock("/api/list", "get", {
	message: "success",
    code: 200,
    data: {
        name: "xxx"
    }
})


//带参数
/* 
post参数，option前端请求的数据，option.url请求的地址
option.type 请求的方式
option.body请求的字符参数（需要JSON.parse转对象）
*/
Mock.mock("/api/list2/", "post", function (option) {
    return {
        code: 0,
        msg: "参数成功",
        data: {
            title: "信息标题",
            content: "内容",
            ...JSON.parse(option.body),
        },
    };
});

3、在开发环境下，引入mock

在配置文件 .env.development 里配置mock开启的标示

// .env.development

NODE_ENV = development
REACT_APP_MOCK = true

判断是开发环境且有开启mock的标示时，引入mock

if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_MOCK === true) {
    // import "./mock/index.js"
    require('./mock/index.js')
}

4、在具体业务逻辑里使用

// 引入axios
import axios from "axios"


// /接口地址与拦截地址要一致
axios.get("/api/list/").then(res => {
    console.log('res', res)
})

//带参数
axios.post("/api/list2/", { id: 111, key: "xxx" }).then(res => {
   console.log("带参数", res);
});

三、使用webpack来配置mockjs

除了上面的常规引入mockjs，我们也可以使用以webpack的形式来配置mockjs。

1、vue.config.js中引用

注意：webpack新版本中间件发生了变化，before与after已经不能使用，代替的onBeforeSetupMiddleware 与 onAfterSetupMiddleware 也要废弃，合二为一成为了setupMiddlewares，setupMiddlewares 代替了 before与after，所以mockjs在配置时也发生了变化。

1.1 新版本写法

// mock/useInfo.json

{
  "id": "@id()",
  "username": "@cname()",
  "date": "@date()",
  "avatar": "@image('200x200','red','#fff','avatar')",
  "description": "@paragraph()",
  "ip": "@ip()",
  "email": "@email()"
}

mock/index.js部分，主要就是devServer.app.get变成了middlewares.unshift

// mock/index.js

const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')

/**
 * @param {string} filePath
 */
function getJsonFile(filePath) {
    // 读取指定的json文件
	let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
    // 解析并返回
	return json
}


//重点部分，middlewares就是新增加的，原本只有devServer。
module.exports = function (middlewares, devServer) {

    // 判断要不要开启mock
    if(process.env.MOCK = true){

	    //middlewares.unshift就是之前的before，middlewares.push是after
	    middlewares.unshift({
		    name: 'mock',
		    // `path` 是可选的
		    path: '/api/test',
		    middleware: (req, res) => {
			    let json = getJsonFile('./mock/userinfo.json') //mock数据的样式，自己新建。
			    res.send(Mock.mock(json))
		    },
	    })
    }

	//return别忘了
	return middlewares
}

vue.config.js部分变成了setupMiddlewares

// vue.config.js

const { defineConfig } = require('@vue/cli-service')


module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    setupMiddlewares: require('./mock/index.js'),
  },
})

1.2 老版本写法

onBeforeSetupMiddleware方式的配置：

// mock/index.js

const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')

/**
 * @param {string} filePath
 */
function getJsonFile(filePath) {
	let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
	return json
}

module.exports = function (devServer) {

   if(process.env.MOCK = true){

	    devServer.app.get('/api/test', (req, res) => {
		    let json = getJsonFile('./mock/userinfo.json')
		    res.send(Mock.mock(json))
	    })    
    }
}

目前的新版本还是可以用这个的，但是文档显示该配置项已弃用，以支持 devServer.setupMiddlewares

// vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  onBeforeSetupMiddleware: {
    setupMiddlewares: require('./mock/index.js'),
  },
})

before方式的配置：

// mock/index.js

const Mock = require('mockjs')
const fs = require('fs')
const path = require('path')

// 用于被index.js进行调用
function getJsonFile (filePath) {

    // 读取指定的json文件
    const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
    // 解析并返回
    console.log(json)

    return JSON.parse(json)
}


module.exports = function (app) {
    if(process.env.MOCK = true){

        // get请求
        app.get('/api/test1', (rep,res) => {
            let json = getJsonFile('./mock/userInfo.json')
            res.json(Mock.mock(json))
        })

        // post请求
        app.post('/api/test2', (rep,res)=> {
            let json = getJsonFile('./mock/userInfo.json')
            res.json(Mock.mock(json))
        })
    }

}

// vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  devServer: {
    before: require('./mock/index.js'),
  },
})

配置全部完成之后，就可以在需要的组建中使用

import axios from 'axios'

axios.get('/api/test').then((res)=>{
  console.log('虚拟数据', res);
})

2、vite.config.ts中引用

有些项目是用vite这个前端构建工具构建的话，配置mockjs会有些区别。

安装 mockjs 和 vite-plugin-mock

npm i mockjs -D

npm i vite-plugin-mock -D

在vite.config.ts进行配置

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入viteMockServe
import { viteMockServe } from 'vite-plugin-mock'


export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: "./mock/"
    }),
  ]
})

vite-plugin-mock 中的配置内容的含义：

supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件

logger?:boolean; --是否在控制台显示请求日志

mockPath?: string;  --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径

ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件

watchFiles?: boolean; --是否监视mockPath文件夹内文件的修改

localEnabled?: boolean; --设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能

ignoreFiles?: string[]; --读取文件时忽略的文件

configPath?: string; --设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组

prodEnabled?: boolean; --设置打包是否启用 mock 功能

injectFile?: string; --如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js

injectCode?: string; --injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}

可以根据自己的项目需求，将以 VITE_XX 开头的变量定义在根目录中的 .env.development [ production | staging ] 文件中,分别对应开发 [ 生产，测试 ] 环境

// .env.development

# 前缀地址
VITE_BASE_URL = '/dev-api'

# 请求路径
VITE_API_URL = 'http://192.168.x.x:8080'

# MOCK开启的标示
VITE_BASE_MOCK = true

mock文件夹下的文件

// mock/index.js

export * as userInfo from './userInfo'

// mock/userInfo.js

export default [
  {
      url: "/api/test",
      method: "get",
      response: () => {
          return {
              code: 0,
              message: "ok",
              data: {
                  'rows|10': [{
                      id: '@guid',
                      name: '@cname',
                      'age|20-30': 23,
                      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
                    }]
              },
          }
      }
  }
]

配置全部完成之后，就可以在需要的组建中使用

import axios from 'axios'

axios.get('/api/test').then((res)=>{
  console.log('虚拟数据', res);
})

在生产环境使用

修改mock/index.js

// mock/index.js

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'

export function setupProdMockServer() {
    createProdMockServer([{
        url: "/api/getUsers",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                data: {
                    'rows|10': [{
                        id: '@guid',
                        name: '@cname',
                        'age|20-30': 23,
                        'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
                    }]
                },
            }
        }
    }])
}

修改main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'

// 新增
import { setupProdMockServer } from '../mock/';

if (process.env.NODE_ENV === 'production') {
  setupProdMockServer();
}

createApp(App).mount('#app')

修改vite.config.ts

// vite.config.ts

import { defineConfig } from 'vite'
// 新增
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// 引入viteMockServe
import { viteMockServe } from 'vite-plugin-mock'


export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      // default
      supportTs: true,
      logger: false,
      mockPath: "./mock/",

      // 新增
      localEnabled: false, // 开发环境
      prodEnabled: true, // 生产环境设为true，也可以根据官方文档格式
      injectCode: 
      ` import { setupProdMockServer } from './mock';
        setupProdMockServer(); `,
      watchFiles: true, // 监听文件内容变更
      injectFile: resolve("src/main.js"), // 在main.ts注册后需要在此处注入，否则可能报找不到setupProdMockServer的错误
    }),
  ]
})

注意

每次修改mock文件夹下的文件，都必须重新启动服务才能生效。

参考资料

开始 | Vite 官方中文文档

Mock.js

起步 | Axios 中文文档 | Axios 中文网

在 vue 或 react 项目中使用 mockjs 搭建 mock server

一、在Vue中的使用

1、安装mock.js

2、新建mock文件夹

3、在开发环境下，引入mock

4、在具体业务逻辑里使用

二、在react中使用

1、安装mock.js

2、新建mock文件夹

3、在开发环境下，引入mock

4、在具体业务逻辑里使用

三、使用webpack来配置mockjs

1、vue.config.js中引用

1.1 新版本写法

1.2 老版本写法

2、vite.config.ts中引用

在生产环境使用

注意

参考资料

相关阅读

相关文章

相关问答

相关文档