首先回顾vue-cli项目中使用mockjs步骤：
1、安装mockjs、axios（http请求库）；
cnpm install mockjs axios --save
2、在项目中新建一个mock.js文件，用于定义接口返回的数据；
const Mock = require('mockjs') // 获取mock对象
const Random = Mock.Random // 获取random对象，随机生成各种数据，具体请翻阅文档
const domain = 'http://mockjs.com/api' // 定义默认域名，随便写
const code = 200 // 返回的状态码
// 随机生成文章数据
const postData = req => {
console.log(req) // 请求体，用于获取参数
let posts = [] // 用于存放文章数据的数组
for (let i = 0; i < 10; i++) {
let post = {
title: Random.csentence(10, 25), // 随机生成长度为10-25的标题
icon: Random.dataImage('250x250', '文章icon'), // 随机生成大小为250x250的图片链接
author: Random.cname(), // 随机生成名字
date: Random.date() + ' ' + Random.time() // 随机生成年月日 + 时间
}
posts.push(post)
}
// 返回状态码和文章数据posts
return {
code,
posts
}
}
// 定义请求链接，类型，还有返回数据
Mock.mock(`${domain}/posts`, 'get', postData);
3、在main.js引入mock.js；
import Mock from './mock' // 刚刚手写的mock.js文件
import axios from 'axios' // axios http请求库
axios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的url
Vue.prototype.$http = axios4、组件内ajax请求
this.$http.get("/posts").then(res => {
console.log(res);
});
一、语法规范
语法规范包括两部分：
- 数据模板定义规范（Data Template Definition，DTD），可以根据属性值的不同类型及规则生成数据。
- 数据占位符定义规范（Data Placeholder Definition，DPD），指使'@占位符' 引用
Mock.Random()方法生成随机数据。
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value注意：
- 属性名 和 生成规则 之间用竖线
|分隔。 - 生成规则 是可选的。
- 生成规则 有 7 种格式：
'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value
- 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
- 属性值 中可以含有
@占位符。 - 属性值 还指定了最终值的初始值和类型。
生成规则和示例：
1. 属性值是字符串 String
-
'name|min-max': string通过重复
string生成一个字符串，重复次数大于等于min，小于等于max。 -
'name|count': string通过重复
string生成一个字符串，重复次数等于count。
2. 属性值是数字 Number
-
'name|+1': number属性值自动加 1，初始值为
number。 -
'name|min-max': number生成一个大于等于
min、小于等于max的整数，属性值number只是用来确定类型。 -
'name|min-max.dmin-dmax': number生成一个浮点数，整数部分大于等于
min、小于等于max，小数部分保留dmin到dmax位。
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}3. 属性值是布尔型 Boolean
-
'name|1': boolean随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
-
'name|min-max': value随机生成一个布尔值，值为
value的概率是min / (min + max)，值为!value的概率是max / (min + max)。
4. 属性值是对象 Object
-
'name|count': object从属性值
object中随机选取count个属性。 -
'name|min-max': object从属性值
object中随机选取min到max个属性。
5. 属性值是数组 Array
-
'name|1': array从属性值
array中随机选取 1 个元素，作为最终值。 -
'name|+1': array从属性值
array中顺序选取 1 个元素，作为最终值。 -
'name|min-max': array通过重复属性值
array生成一个新数组，重复次数大于等于min，小于等于max。 -
'name|count': array通过重复属性值
array生成一个新数组，重复次数为count。
6. 属性值是函数 Function
-
'name': function执行函数
function，取其返回值作为最终的属性值，函数的上下文为属性'name'所在的对象。
7. 属性值是正则表达式 RegExp
-
'name': regexp根据正则表达式
regexp反向生成可以匹配它的字符串。用于生成自定义格式的字符串。Mock.mock({ 'regexp1': /[a-z][A-Z][0-9]/, 'regexp2': /\w\W\s\S\d\D/, 'regexp3': /\d{5,10}/ }) // => { "regexp1": "pJ7", "regexp2": "F)\fp1G", "regexp3": "561659409" }
数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
注意：
- 用
@来标识其后的字符串是 占位符。 - 占位符 引用的是
Mock.Random中的方法。 - 通过
Mock.Random.extend()来扩展自定义占位符。 - 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性。
- 占位符 支持 相对路径 和 绝对路径。
Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
二、Mock.mock( rurl?, rtype?, template|function( options ) )
方法解释：当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
注意事项：从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。
rurl
可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template
可选。
表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
/*模拟删除数据的方式*/
var arr=[
{name:'fei',age:20,id:1},
{name:'liang',age:30,id:2},
{name:'jun',age:40,id:3},
{name:'ming',age:50,id:4}
]
Mock.mock('http://www.bai.com','delete',function(options){
var id = parseInt(options.body.split("=")[1])//获取body中删除的id
var index;
for(var i in arr){
if(arr[i].id===id){//在数组arr里找到这个id
index=i
break;
}
}
arr.splice(index,1)//把这个id对应的对象从数组里删除
return arr;//返回这个数组,也就是返回处理后的假数据
})
$.ajax({
url:'http://www.bai.com',
type:"DELETE",
data:{
id:1//假设需要删除id=1的数据
},
dataType:'json',
success:function(e){
console.log(e)
}
})
三、Mock.setup( settings )可以配置拦截 Ajax 请求时的响应时间
Mock.setup({ //表示 400 毫秒 后才会返回响应内容；
timeout: 400
})
Mock.setup({
timeout: '200-600' //表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。
})
四、Mock.Random 是一个工具类，用于生成各种随机数据。
注意：Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
var Random = Mock.Random //引入Random方法集
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }Mock.Random 提供的完整方法（占位符）如下：
| Type | Method |
|---|---|
| Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| Image | image, dataImage |
| Color | color |
| Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| Name | first, last, name, cfirst, clast, cname |
| Web | url, domain, email, ip, tld |
| Address | area, region |
| Helper | capitalize, upper, lower, pick, shuffle |
| Miscellaneous | guid, id |
方法与数据模板的 @占位符 一一对应，使用如下：
//1. Random.boolean( min?, max?, current? )
// Random.boolean( min?, max?, current? )
'boolean1': Random.boolean(1,5,true), // 指示参数 true 出现的概率。概率计算公式为 1 / (1 + 5)。该参数的默认值为 1，即有 50% 的概率返回参数 true
'boolean2': '@boolean(1,5,true)',
//2. Random.natural( min?, max? )
'natural': Random.natural(), // 返回一个大于0的自然数
'natura2': Random.natural(0,500), // 返回一个0-500的自然数
//3. Random.integer( min?, max? )
'integer1': '@integer',
'integer1': Random.integer(-500,500), // 返回-500 - 500的随机整数
//4. Random.float( min?, max?, dmin?, dmax? )
'float1': '@float(0,50,12,1000)', // 36.216873636235
'float2': Random.float(), // -8349164373254657
//5. Random.character( pool? )
'character1': '@character', // H 如果未传入该参数，则从 lower + upper + number + symbol 中随机选取一个字符返回
'character2': Random.character('lowercase,youknow!'), // a
//6. Random.string( pool?, min?, max? )
'string1': '@string', // Etns)d 注：未传入该参数，则从 lower + upper + number + symbol 中随机选取73-个字符返回
'string2': Random.string('upper',5,10), // ADLZQLPC 返回字符串长度为5-10
//7. Random.range( start?, stop, step? )
'range1': '@range()', // []
'range2': Random.range(3,7) // [3, 4, 5, 6]
自定义扩展占位符：在需要时还可以为 Mock.Random 扩展方法，然后在数据模板中通过 @扩展方法 引用。例如：
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
五、Mock.valid( template, data ) 校验真实数据 data 是否与数据模板 template 匹配。
var template = {
name: 'value1'
}
var data = {
name: 'value2'
}
Mock.valid(template, data)
// 结果相等
[
{
"path": [
"data",
"name"
],
"type": "value",
"actual": "value2", //实际值
"expected": "value1", //预期值
"action": "equal to",
"message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
}
]
六、Mock.toJSONSchema( template ) 把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
var template = {
'key|1-10': '★'
}
Mock.toJSONSchema(template)
// =>
{
"name": undefined,
"path": [
"ROOT"
],
"type": "object",
"template": {
"key|1-10": "★"
},
"rule": {},
"properties": [{
"name": "key",
"path": [
"ROOT",
"key"
],
"type": "string",
"template": "★",
"rule": {
"parameters": ["key|1-10", "key", null, "1-10", null],
"range": ["1-10", "1", "10"],
"min": 1,
"max": 10,
"count": 3,
"decimal": undefined,
"dmin": undefined,
"dmax": undefined,
"dcount": undefined
}
}]
}
更多参考Mockjs官网 https://github.com/nuysoft/Mock/wiki/Syntax-Specification
6035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
