使用JSON5+Mockjs生成模拟数据

本章介绍如何使用 JSON5 + Mockjs 来生成模拟数据，JSON5的优点是可以在JSON里面“正常书写注释”，其他作用和正常JSON文件基本一致

目录结构

首先瞅一眼大概的目录结构

首先看到目录结构中的 db.json5 文件，这里面写的你要模拟数据字段有哪些，写法按照mock.js来写就可以了，具体语法请参考mock.js官方文档。

以下是示例：

{
  id: '@id()', //得到随机的id,对象
  username: '@cname()', //随机生成中文名字
  date: '@date()', //随机生成日期
  avatar: "@image('200x200', 'red', '#fff',avatar')",
  description: '@paragraph()', //描述
  ip: '@ip()', //IP地址
  email: '@email()', //email
}

再瞅一眼目录结构中的 readjson5.js 文件，在这里我们读取JSON5的数据生成规则，再配合NodeJS和mock.js来开启一个服务

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

// 读取JSON5文件的数据
function getJsonFile (json5Path) {
  var file = fs.readFileSync(path.join(__dirname, json5Path), 'utf-8')
  return JSON5.parse(file)
}

module.exports = function (app) {
  if (process.env.Mock) {
    // 监听请求
    app.get('/user', (rep, res) => {
      // 每次响应请求时读取mock data的json文件
      var json = getJsonFile('./db.json5')
      // 将json传入Mock.mock方法中，生成的数据返回给浏览器
      res.json(Mock.mock(json))
    })
  }
}

在配置文件中vue.config.js，设置devServer的before

在这里，我们可以动态修改字段，不需要每次重启服务

最后启动服务 yarn run dev || npm run dev ，访问刚刚的那个user接口

最后总结一下，一共分为以下几步：

• 创建文件db.json5和readjson5.js。

1. db.json5 ——写mock.js规则
2. readjson5.js ——读取规则，调用mock，开启服务

• 配置vue.config.js

1. devServer的before引用readjson5.js

• 启动服务并访问接口