前端Tips----vue项目使用mock说明

103 阅读 0 评论 68 点赞

我是靠谱客的博主虚幻钥匙，这篇文章主要介绍前端Tips----vue项目使用mock说明，现在分享给大家，希望可以做个参考。

说明

为了提升前端开发速度，解耦与后端接口联调的依赖性，可以在后端完成接口文档之后，前端使用mock数据进行开发，在完成整个开发流程之后，直接使用真实数据测试即可

一、项目中安装依赖

复制代码

1
2
3
4
5
# 使用mockjs产生随机数据
npm install mockjs --save-dev

# 使用json5解决json文件,无法添加注释问题
npm install json5 --save-dev

二、根目录创建mock文件

三、配置mock(mock/index.js)文件，使其返回对应接口的数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
const JSON5 = require('json5') // 用于解析json文件中的注释

// 获取json数据
function getJsonFile(filePath) {
  // 读取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
  // 解析并返回json数据
  return JSON5.parse(json)
}

// 暴露函数事件
module.exports = function (app) {
  // 判断是否需要mock(.env.development文件配置参数 MOCK=true )
  if (process.env.MOCK == 'true') {
    app.get('/api/user/userInfo', function (req, res) {
      var json = getJsonFile('./userInfo.json5')
      res.json(Mock.mock(json))
    })
  }
}