mock的基本用法
一.mock解决的问题
开发时,后端还没完成数据输出,前端跨域用mock来模拟出数据,将代码写在js文件中,等后端完成数据输出后将用mock模拟的接口一一替换就好。某些逻辑复杂的代码,加入或去除模拟数据时要小心。可以编写更多的代码或是手动修改模拟数据,例如ip、随机数、图片、地址需要去收集
二.mock的优点
-
前后端分离
让前端工程师独立于后端开发
-
增加测试的真实性
通过随机数据,模拟各种场景
-
开发无侵入
不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
-
用法简单
-
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
-
方便扩展
支持扩展更多数据类型,支持自定义函数和正则
-
在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成后,只需要改变url地址即可
-
不涉及跨域的问题
三、案例
-
首先需要下载安装mockjs模块
npm i mockjs
-
在项目的src文件夹下创建一个mock文件夹专门用来放模拟接口的mock文件
Mock.mock('接收路径','请求方法get或者post',()=>{return [数据]})
当没有指定方式时是get请求
name:'@name'
:表示外国人的英文名,占位符name:'@cname'
:会自己生成一个随机的人名phone|13000000000-19999999999:1
:电话号码email:@email
:邮箱'address:'@province'
:只是生成市'address:'@county'
:生成区'address:'@county(true)'
:省市区的生成id:'@id'
:生成的是身份证号'id|+1': 1
:生成的是序号index.js文件
import Mock, { mock } from 'mockjs' // 通知类型列表请求数据 var alertdata = Mock.mock({ "alertlist": [ { id: 1, alerttype: '通知', property: '内置', statu: '启用', }, { id: 2, alerttype: '公告', property: '内置', statu: '启用', }, { id: 3, alerttype: '活动', property: '内置', statu: '启用', }, { id: 4, alerttype: '家园任务', property: '内置', statu: '启用', }, { id: 5, alerttype: '缴费通知', property: '内置', statu: '启用', }, { id: 6, alerttype: '选课通知', property: '内置', statu: '启用', }, ] }) // 通知类型列表请求 Mock.mock('/api/alerttype/list', 'get', () => { return alertdata; }) // 通知类型列表请求删除 Mock.mock('/api/alerttype/delete', 'post', (req) => { // 接收参数,req.body是字符串格式,需要转为json对象 var { id } = JSON.parse(req.body) // 通过id,找到要删除的那一条数据,执行删除 var i = alertdata.alertlist.findIndex((item) => { return item.id == id; }) if (i != -1) { alertdata.alertlist.splice(i, 1); localStorage.setItem('alertlist', JSON.stringify(alertdata)) } return { status: 200, msg: '删除成功!', alertlist: alertdata.alertlist }; }) // 通知类型列表请求状态修改停用/启用 Mock.mock('/api/alerttype/edit', 'post', (req) => { // 接收参数,req.body是字符串格式,需要转为json对象 var body = JSON.parse(req.body) console.log(body); // 通过id,找到要删除的那一条数据,执行删除 var i = alertdata.alertlist.findIndex((item) => { return item.id == body.id; }) if (i != -1) { if (body.statu == '停用') { body.statu = '启用' } else { body.statu = '停用' } alertdata.alertlist.splice(i, 1, body); console.log(body); localStorage.setItem('alertlist', JSON.stringify(alertdata)) } return { status: 200, msg: '删除成功!', alertlist: alertdata.alertlist }; }) // 通知类型列表请求添加 Mock.mock('/api/alerttype/add', 'post', (req) => { // 接收参数,req.body是字符串格式,需要转为json对象 var body = JSON.parse(req.body) console.log(body); // 拿到要添加的这个类型的在已存储的数据进行比较是否已存在 const id = body.id let flag = true for (const item of alertdata.alertlist) { if (item.id === id) flag = false } if (flag) { alertdata.alertlist.push(body); localStorage.setItem('alertlist', JSON.stringify(alertdata)) } return { status: 200, msg: '添加成功!', alertlist: alertdata.alertlist }; }) // 通知类型列表请求改变状态 // Mock.mock('/api/alerttype/add', 'post', (req) => { // // 接收参数,req.body是字符串格式,需要转为json对象 // var body = JSON.parse(req.body) // const id = body.id // // 通过id,找到要修改的那一条数据,执行修改 // var item = alertdata.alertlist.find((item) => { // return item.id == id; // }) // if (item.statu == '启用') { // alertdata.alertlist.splice(i,1,body); // localStorage.setItem('alertlist', JSON.stringify(alertdata)) // }else if(item.statu == '停用'){ // alertdata.alertlist.splice(i,1,body); // localStorage.setItem('alertlist', JSON.stringify(alertdata)) // } // return { status: 200, msg: '修改成功!', alertlist: alertdata.alertlist }; // }) // 通知列表数据 var alertlistdata = Mock.mock({ "list|6": [ { 'id|+1': 1, 'name|1': ['关于防控疫情的通知', '高温橙色预警通知', '关于2022年暑期活动通知', '2022学年第一学期家园任务', '2022学年第一学期缴纳班费通知'],//通知标题 'region|1': ['通知', '公告', '活动', '家园任务'],//通知类型 date1: '@date(yyyy-MM-dd)',//发布时间 'type|1': ['学生', '老师', '家长'],//发布对象 resource: '全校',//发布范围 desc: '“书香润泽校园 阅读提升思想”“我阅读 我快乐 我成长”',//通知内容 }, ] }) // 通知列表请求 Mock.mock('/api/alert/list', 'get', () => { return alertlistdata; }) // 通知列表查询 Mock.mock('/api/alert/search', 'post', (req) => { // 接收参数,req.body是字符串格式,需要转为json对象 var { region } = JSON.parse(req.body) // 通过id,找到要删除的那一条数据,执行删除 var item = alertlistdata.list.find((item) => { return item.region == region; }) console.log(item); if (item != ' ') { var item = JSON.stringify(item) return { status: 200, msg: '查询成功!', item }; } }) // 通知列表请求删除 Mock.mock('/api/alert/delete', 'post', (req) => { // 接收参数,req.body是字符串格式,需要转为json对象 console.log(req); var { id } = JSON.parse(req.body) console.log(id); // 通过id,找到要删除的那一条数据,执行删除 var i = alertlistdata.list.findIndex((item) => { return item.id == id; }) console.log(i); if (i != -1) { alertlistdata.list.splice(i, 1); localStorage.setItem('list', JSON.stringify(alertlistdata)) } return { status: 200, msg: '删除成功!', list: alertlistdata.list }; }) // 通知列表请求添加 Mock.mock('/api/alert/add', 'post', (req) => { // 接收参数,req.body是字符串格式,需要转为json对象 var body = JSON.parse(req.body) console.log(body); // 拿到要添加的这个类型的在已存储的数据进行比较是否已存在 const id = body.id let flag = true for (const item of alertlistdata.list) { if (item.id === id) flag = false } if (flag) { alertlistdata.list.push(body); localStorage.setItem('list', JSON.stringify(alertlistdata)) } return { status: 200, msg: '添加成功!', alertlistdata: alertlistdata.list }; }) // 评价列表数据 var evaluatelist = Mock.mock({ "evallist|10": [ { 'id|+1': 1, name: '@name',//学生姓名 grade: '一年级一班',//年级班级 type: '一年级一班',//评价类型 content: '字迹工整,按时完成',//评价类型 score: '+1',//分值 people: '杨老师',//分值 date1: '@date(yyy-MM-dd)',//发布时间 } ] })
-
模拟数据完成后,在需要入口主文件main.js中引入这个模拟数据的文件
import "./mock/index.js"
-
在页面中,我们可以直接进行axios请求,我这里的请求是对请求进行二次封装api文件
// 通知类型列表获取 export function alert_list(params = {}) { return service.get('/api/alerttype/list', { params }) } // 删除类型列表中的数据 // /api/alert/delete export function alert_delete(params = {}) { return service.post('/api/alerttype/delete', params) } // 修改类型列表中的数据 // /api/alerttype/edit export function alert_edit(params = {}) { return service.post('/api/alerttype/edit', params) }
四、mock的用法规则
-
通过重复string生成一个字符串,重复次数大于等于min,小于等于max
'string|1-10':'哈'
结果随机生成1~10个哈
-
通过重复string生成一个字符串,重复次数等于count
'string|5':'哈'
结果生成五个哈
-
属性值是数字
'name|+1':number
:属性自动加1,初始值为numbername|min-max:number
:生成一个大于等于min、小于等于max的整数,属性值number只是用来确定类型'number1|1-100.1-10': 1, //生成1-10位的小数 'number2|123.1-10': 1, //同上 'number3|123.3': 1, //生成三位小数 'number4|123.10': 1.123 //生成10位小数
-
属性值是布尔型Boolean
'name|1':boolean
:随机生成一个布尔值,值为true的概率是1/2,值为false的概率同样是1/2'boolean|min-max':value
:随机生成一个布尔值,值为value的概率是min/(min + max),值为!value的概率是max/(min+ max) -
属性值是对象object
'name|count':object
var obj = Mock.mock({ 'obj|2':{ id:1, name:'jx', age:18, address:'JiNan', love:'you' } })
-
Mock.Random
var Random = Mock.Random Random.email() // => "n.clark@miller.io" Mock.mock('@email') // => "y.lee@lewis.org" Mock.mock( { email: '@email' } ) // => { email: "v.lewis@hall.gov" }
自定义:
Random.extend({ constellation: function(date) { var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'] return this.pick(constellations) } }) Random.constellation() // => "水瓶座" Mock.mock('@CONSTELLATION') // => "天蝎座" Mock.mock({ constellation: '@CONSTELLATION' })
-