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
学习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,输出结果如下: