mock基础
什么是mock？（作用）
=> 是一种模拟后端借口的解决方案。 （可以让前端提前调用接口，完成前端开发）
优点
1、前后端分离：让前端独立于后端进行开发
2、增加单元测试的真实性：可模拟多场景的数据
3、开发无侵入：不需要修改现有的代码，可拦截ajax请求，返回模拟的返回数据
4、用法简单：适用于大多数接口
5、数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
6、方便扩展：支持自定义函数和正则
语法规范（数据模版&数据占位符）
1、数据模版定义规范
=> 数据模版中的每个属性由三部分组成（'属性名｜生成规则' ：属性值）
'name｜rule'：value举个🌰——字符串：
// w随机出现1-10次，1-10表示重复次数
var data = Mock.mock ({'username|1-10' : 'w'})
// w出现5次
var data = Mock.mock ({'username|5' : 'w'}) 举个🌰——数字： // 数字中的1-10表示的数字的范围，1为初始默认值
var data = Mock.mock ({'age|1-10' : 1})
2、数据占位符定义规范
=> 占位符只是在属性值字符串中占个位置，并不出现在最终属性值中
@占位符 @占位符（参数[,参数]举个🌰：
// 随机生成一个id '()'可不写，写了是用来传参
var data = Mock.mock ('@id()')
// 随机生成一个中文名称
var data = Mock.mock ('@cname()')
// 随机生成一个日期
var data = Mock.mock ("@date('yyyy-mm-dd')")
// 随机生成一段描述
var data = Mock.mock ('@paragraph()')
// 随机生成一个邮箱
var data = Mock.mock ('@email()') 基本流程
安装 -> 导入 -> 使用
安装：
cnpm install mockjs -D(ps: 安装时提醒node版本不够高，需先升级node版本)
// 升级node sudo npm i -g n sudo n stable // 查看node版本 node -v
导入：
var Mock = require('mockjs') 使用：
var data = Mock.mock({...}) 在项目中使用的流程
1、定义接口路由在接口中返回mock模拟的数据
（见基本流程）
mock/index.js
// 引入 var Mock = require('mockjs') // 暴露出去 module.exports = function(app){ if (process.env.MOCK == 'true') { // 参数1:借口地址；参数2:服务器处理函数（req：请求对象；res：响应对象） app.use('/api/userinfo', (req, res) => { // 随机生成一个对象 var data = Mock.mock ({ id: '@id()', username: '@cname()', date: '@date(yyyy-mm-dd)', description: '@paragraph()', email: '@email()', 'age|1-100': 23 }) // 将模拟的数据转成json格式并返回给浏览器 res.json(data) // console.log(data, 'data') }) } }
2、在vue.config.js中配置devServer,在before属性中引入接口路由参数
module.exports = { devServer: { // devServer 在发送请求时，回先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等。 before: require('../mock/index.js') } }
3、使用axios调用该接口获取数据
axios.get('/api/userinfo').then(res => {
console.log(res.data, 'res')
}) 控制是否使用mock
=> 新建一个env.development文件
MOCK = true // MOCK = false
（ps: 判断语句见在项目中使用的流程的1）
腾讯HR面2284人在聊
投递数字马力等公司6个岗位