背景
在项目开发时，会存在前端界面已经画好了但是后端接口还在开发的情况，此时前端可以先根据接口文档明确自己需要的字段，然后使用mock模拟后端接口进行调试
安装
npm install mockjs
使用
1. 创建vue项目之后，新建一个mock文件夹，定义一个index.js文件
2. 引入mock依赖，使用setup方法设置请求响应的时间
// index.js// 导入mockjs 返回一个对象const Mock = require('mockjs')// 使用setup配置请求的响应时间，单位是毫秒Mock.setup({// timeout: 1000 // 意味着接口1s后返回timeout: '200-1000' // 意味这接口响应时间介于200毫秒-1s之间})
3. Mock对象中有个mock方法生成响应的数据
// index.js// 根据Mock.mock方法生成响应的数据// Mock.mock( rurl请求的url, rtype请求的类型, template数据模板| function( options ) 生成响应数据的函数)/*一般数据模板传递的对象：{"key|生成规则": 响应的数据}生成的规则m-n 生成m到n个+n每生成一次 数值都+1*/// 普通的示例// 请求list接口，返回1-10条之间的数据，返回的结构是{ code: 0, data: [{},{}...]}Mock.mock('/list', 'get', {code: 0,...{ 'data|1-10': [{}] }})
4. 在main.js中 引入mock文件夹下的index文件
// main.js...import '@/mock/index'
5. 在需要使用接口的地方，用axios请求对应的接口地址即可获取数据
// Home.vueasync mounted () {const res = await axios.get('/list')console.log(res, 'resres')}
打印出来的结果
常用的数据占位符
下面例举一些项目上常用的数据占位符，能快速随机生成数据结构
使用@string可以生成随机的字符串@string(length) 可以输入数字指定长度@string("lower|upper|number|symbol",length) 第一个参数可以指定是字母小写|大写|数字|符号，第二个参数可以输入数字指定长度@string(min, max) 可以指定字符串的区间eg：{ 'data|1-10': [{ 'id|+1': 1, name: '@string' }] }使用@boolean可以生成随机的布尔值 true|falseeg：{ 'data|1-10': [{ 'id|+1': 1, sex: '@boolean' }] }使用@integer随机生成一串数字Random.integer( min, max )eg：{ 'data|1-10': [{ 'id|+1': 1, count: '@integer(1, 20)' }] }使用@date随机生成日期@date("yyyy-MM-dd") "-11-28"@date("yy-MM-dd") 22-11-28eg：{ 'data|1-10': [{ 'id|+1': 1, date: '@date(yyyy-MM-dd)' }] }使用@time随机生成时分秒@time("HH:mm:ss") "00:15:29" 常用的是这个格式eg：{ 'data|1-10': [{ 'id|+1': 1, time: '@time(HH:mm:ss)' }] }使用@datetime 随机生成具体的日期至时分秒@datetime("yyyy-MM-dd HH:mm:ss") "-11-29 09:25:16" 常用的是这个格式eg：{ 'data|1-10': [{ 'id|+1': 1, time: '@datetime(yyyy-MM-dd HH:mm:ss)' }] }使用@image 随机生成具体大小的图片@image( size?, background?, foreground?, format?, text? )可以指定图片的尺寸，底色，文案的颜色，图片的格式，图片上的文案展示eg：{ 'data|1-10': [{ 'id|+1': 1, image: '@image' }] }eg：{ 'data|1-10': [{ 'id|+1': 1, image: '@image(200x100, #50B347, #fff, hello)' }] }使用@cparagraph 随机生成段落文案--中文@cparagraph( min?, max? ) 可以指定生成多少句文案eg：{ 'data|1-10': [{ 'id|+1': 1, cparagraph: '@cparagraph(2)' }] }使用@ctitle 随机生成标题--中文@ctitle( length ) 可以指定标题的长度@ctitle( min, max ) 可以指定标题的长度的区间eg：{ 'data|1-10': [{ 'id|+1': 1, title: '@ctitle(10)' }] }使用@cname 随机生成姓名-中文eg：{ 'data|1-10': [{ 'id|+1': 1, name: '@cname' }] }使用@email 随机生成邮箱地址eg：{ 'data|1-10': [{ 'id|+1': 1, email: '@email' }] }使用@province 随机生成省份eg：{ 'data|1-10': [{ 'id|+1': 1, province: '@province' }] }使用@province 随机生成省份使用@city 随机生成城市 @city(true) 则会把省份也显示出来使用@county 随机生成地级 @county(true) 则会把省、市前缀显示出来eg：{ 'data|1-10': [{ 'id|+1': 1, province: '@province' }] }eg：{ 'data|1-10': [{ 'id|+1': 1, city: '@city' }] }eg：{ 'data|1-10': [{ 'id|+1': 1, county: '@county' }] }使用@pick 随机生成指定的范围数据eg：{ 'data|1-10': [{ 'id|+1': 1, role: '@pick(["董事长", "总监", "经理", "组长"])' }] }
通过extend可以拓展mockjs的属性
随机生成手机号码
Mock.Random.extend({phone () {// 自己随便写前缀const phonePrefixs = ['135', '189', '136']// 使用pick 随机返回前缀return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)}})console.log(Mock.Random.phone())
mockjs的综合使用-----增删改查
模拟获取列表数据 get
// mock/index.js// 常用的表格数据结构const list = Mock.mock({'data|10': [{ // 生成10条数据'id|+1': 1, // id会自增name: '@cname', // 随机生成姓名 --中文名sex: '@integer(0, 1)', // 性别一般是用数字表示 0男生 1女生phone: Mock.Random.phone(), // 拓展mockjs 生成随机的手机号码email: '@email', // 随机生成邮箱地址account: '@name', // 随机生成账号名 -- 英文status: '@boolean', // 随机生成布尔值 表示账户状态profile: '@image( 50x50, #FF6600, #fff, png, 头像 )', // 随机生成头像createTime: '@datetime(yyyy-MM-dd HH:mm:ss)', // 随机生成创建时间role: '@pick(["董事长", "总监", "经理", "组长"])' // 随机生成角色}]})Mock.mock('/list', 'get', {code: 0,...list,total: 10})
在需要获取列表的页面请求接口
async mounted () {const res = await axios.get('/list')console.log(res, '===>getList')}
打印查询列表的数据结果
模拟根据id查询对应数据 get
// mock/index.js// 使用响应数据的函数，含有 url、type 和 body 三个属性// 根据url 获取参数Mock.mock(/listById/, 'get', ({ url }) => {// 获取？后面的参数const query = url.split('?')[1]// 解析参数const queryStr = new URLSearchParams(query)const id = queryStr.get('id')return {code: 0,data: list.data.find(item => item.id === Number(id))}})
在需要获取列表的页面请求接口
methods: {async getDetailById () {const res = await axios.get('listById', { params: { id: 1 } })console.log(res, '===>getDetailById')}}
打印查询的结果
模拟增加数据 post
// mock/index.js// 如果是put ｜ post 的请求 参数是放在了body里面Mock.mock(/addItem/, 'post', ({ body }) => {// 获取请求体的数据const { data } = JSON.parse(body)// 对一些必填的字段做校验const dataTips = {name: '名字不能为空',sex: '性别不能为空',phone: '手机号码不能为空',account: '账号不能为空'}for (const key of Object.keys(dataTips)) {if (!data[key]) {return { code: 500, message: dataTips[key] }}}return { code: 0, data: '操作成功' }})
在需要增加数据的的页面请求接口
methods: {async addItem () {const params = {name: 'lily',sex: '女'}const res = await axios.post('/addItem', { data: params })console.log(res, '===>addItem')}}
打印的结果
methods: {async addItem () {const params = {name: 'lily',sex: '女',phone: '15915888888',account: ''}const res = await axios.post('/addItem', { data: params })console.log(res, '===>addItem')}}
模拟根据id删除对应数据 delete
// mock/index.jsMock.mock(/removeById/, 'delete', ({ url }) => {// 获取？后面的参数const query = url.split('?')[1]// 解析参数const queryStr = new URLSearchParams(query)const id = queryStr.get('id')const index = list.data.findIndex(item => item.id === id)list.data.splice(index, 1)return {code: 0,data: '操作成功'}})
在需要删除数据的页面请求接口
methods: {async removeItemlById () {const res = await axios.delete('/removeById', { params: { id: 1 } })console.log(res, '===>removeItemlById')}}
打印删除的结果
模拟根据id修改对应数据put
// mock/index.js// 如果是put ｜ post 的请求 参数是放在了body里面Mock.mock(/updateById/, 'put', ({ body }) => {// 格式化body的参数const { data } = JSON.parse(body)// 找到对应的数据const target = list.data.find(item => item.id === data.id)if (!target) {return { code: 500, message: '查询有误' }}for (const key in data) {target[key] = data[key]}return { code: 0, data: target }})
在需要修改数据的页面请求接口
methods: {async updatetemlById () {const res = await axios.put('/updateById', { data: { id: 1, name: '我是修改的名字', role: '我是修改的role', account: '我是修改的账号' } })console.log(res, '===>updatetemlById')}}
打印修改后的结果
