mockjs基础及项目使用
Mock介绍
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能： 1. 根据数据模板生成模拟数据 2. 模拟 Ajax 请求，生成并返回模拟数据 3. 基于 HTML 模板生成模拟数据
以上是MockJS官网开头的一段介绍。
在实际的项目经历中，MockJS更多的使用之处在于自己练手写Demo。仔细想想，作为一个前端菜鸡，java的springboot开发当然是不会的，koa+sequalize开发也是坎坎坷坷，MockJS自然就成了写Demo时的最佳选择。
Mock安装和基本使用
npm下载
npm i mockjs -D
下载完成后，新建一个Mock文件夹及index.js
// 导入mockjs
import Mock from 'mockjs'// 定义数据
Mock.mock('/user/info','get',function(){return Mock.mock({'data':{name: '@name'...}})
})
基本使用大概就这样，下面说下Mock.mock()方法的使用。
官方说明的有5种使用方式：
- Mock.mock( template )
就是上方函数中return后面的使用形式
Mock.mock({'data':{name: '@name'...}
}
- Mock.mock( rurl, template )
rurl即为url地址
Mock.mock('/user/info',{'data':{name: '@name'...}
}
- Mock.mock( rurl, rtype, template )
Mock.mock('/user/info','get',{'data':{name: '@name'...}
})
-
Mock.mock( rurl, function(options) )
- 在function内部可以做一些操作,要注意有return返回值
- options是接口信息，包含(url,method,params)等
Mock.mock('/user/info',function(options){....return ...}
}
- Mock.mock( rurl, rtype, function(options) )
// 定义数据
Mock.mock('/user/info','get',function(){return Mock.mock({'data':{name: '@name'...}})
}
以上就是mock方法的5中使用形式
Mock常用语法
简单语法
- id
id: '@id', // "630000198511076140"
- name
name: '@name', // 'tom'
name: '@cname', // ‘李三’,
- image
avatar: '@image(100x100)'
- title
title: '@title', // "Rwfxtkk Fbdugpbz Zjpesn Ybs Vdxx"
title: '@ctitle', // "圆转步用米"
title: '@ctitle(2,5)',// 中文标题2-5个字
复杂语法
- array
'records|1': ['AMD','CMD'], // 从枚举值中任选一个
'records|1-10': ['AMD'], // 数组中有1-10个AMD字符串
- object
'data|2':{ // 从属性值中任选两个"310000": "上海市","320000": "江苏省","330000": "浙江省","340000": "安徽省"
}
'data|2-4':{ // 从属性值中任选2-4个"310000": "上海市","320000": "江苏省","330000": "浙江省","340000": "安徽省"
}
Mock在项目中的使用
列举下Vue管理后台中使用和Node中使用的部分代码
Vue管理后台
- 安装mockjs
npm i mockjs -D
- 根目录下创建mock文件夹，并创建index.js
主要是配置mock服务和数据转换
// 引入mockjs
const Mock = require('mockjs')
// 集合服务模块(如：用户模块、搜索模块)
const mocks = [...XXX
]
// 服务配置
function mockXHR() {Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.sendMock.XHR.prototype.send = function() {if (this.custom.xhr) {this.custom.xhr.withCredentials = this.withCredentials || falseif (this.responseType) {this.custom.xhr.responseType = this.responseType}}this.proxy_send(...arguments)}function XHR2ExpressReqWrap(respond) {return function(options) {let result = nullif (respond instanceof Function) {const { body, type, url } = options// https://expressjs.com/en/4x/api.html#reqresult = respond({method: type,body: JSON.parse(body),query: param2Obj(url)})} else {result = respond}return Mock.mock(result)}}for (const i of mocks) {Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))}
}
// 导出mock信息
module.exports = {mocks,mockXHR
}
- main.js中执行mock
// 根据环境标识,使用mock服务
if (process.env.NODE_ENV === 'production') {const { mockXHR } = require('../mock')mockXHR()
}
- 代理配置
Vue中使用Mock服务，更多的是用于代理接口请求
module.exports = {devServer: {port: port,open: true,overlay: {warnings: false,errors: true},before: require('./mock/mock-server.js')}
}
Node后端
- 安装mockjs
npm i mockjs -D
- 创建router文件夹，并创建index.js
const router = require('koa-router')()
const Mock = require('mockjs')router.get('/user/info', async (ctx, next) => {ctx.body = await Mock.mock({'data|1-10':[{'id|+1':1,'name': '@cname','avatar': '@image(100x100)'}]})
})
只是简单内容，更详细的容后附仓库地址
Mock工具
除了引入项目内部以外，还有很多成熟的工具软件，内置了mock数据的功能，个人常用的是apifox
具体使用自行探索，主要说下mock的使用
在接口的返回数据结构里，可以配置mock类型，示例如下：
还有apifox的语法文档，个人没细看是否和mockjs的语法有区别。地址如下：
ApiFox帮助文档