Mock.js快速上手

为什么使用mock.js

前端工程师需要独立于后端并行开发，但后端接口还没有完成，那么前端如何获取数据？
这是前端可以搭建web server自己模拟假数据，这时可以选用mockjs用来随机生成数据，拦截Ajax请求

mock原理图

本来的访问逻辑

通过mock模拟服务器响应

Mock.js官网

安装依赖

命令

# 使用axios发送ajax
npm install axios
# 安装mockjs(使用mockjs产生随机数据)
npm install mockjs
# 使用json5解决json文件，无法添加注释问题
npm install json5

axios官网
json5官网

学习mockjs

• 在vue-cli项目创建的vue项目的src目录下创建一个mock目录，创建testMock.js

const Mock = require('mockjs')
let id = Mock.mock('@id')
console.log(id)

切换到mock目录，执行node testMock.js,输出Mock.js随机模拟的id

在使用require引用mockjs时，require命令不可用，需要添加依赖

• 1.添加开发环境配置
  “@vue/cli-plugin-typescript”: “^3.3.0”,
  
• 2.切换到项目的根目录，执行npm install安装依赖

入门案例

const Mock = require('mockjs')
let id = Mock.mock('@id')
console.log(id)
/* 获取随机的list数组 */
const data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1
  }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
const obj = Mock.mock({
  id: '@id', // 得到随机的id,对象
  username: '@cname', // 随机生成中文名字
  date: '@date()', // 随机生成日期
  avatar: "@image('200x200','red','#fff','avatar')", // 生成图片，参数:size
  description: '@paragraph()', // 描述
  ip: '@ip()', // ip地址
  email: '@email()' // email
})
console.log(obj)

切换到testMock.js目录，执行node testMock.js，返回结果如下

引入JSON5解析json格式

在项目根目录下src目录下创建一个mock目录，创建userInfo.json5

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

在项目根目录下src目录下创建一个mock目录，创建testJSON5.js

const fs = require('fs') // 引入文件
const path = require('path')
const JSON5 = require('json5') // 引入json5来解析json格式
// 读取当前目录下的userInfo.json5
const json = fs.readFileSync(path.join(__dirname, './userInfo.json5'), 'utf-8')
console.log(json)
const result = JSON5.parse(json)
console.log('输出json字符串')
console.log(result)

json5解析json格式文件，会过滤掉json中的注释
切换到testJSON5.js所在目录执行node testJSON5.js,输出结果如下：