vue+mockjs安装及语法规范
一.了解mock(1).mockjs介绍mock.js是模拟后端的数据,脱离后端独立开发,实现增删改查功能(2).官网描述的是1.前后端分离2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。3.数据类型丰富4.通过随机数据,模拟各种场景。(3).安装-使用1.在搭建好的vue项目中 cdpractice_project\elements-demo (elements-de..
·
一.了解mock
(1).mockjs介绍
mock.js是模拟后端的数据,脱离后端独立开发,实现增删改查功能
(2).官网描述的是
1.前后端分离
2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据,模拟各种场景。
(3).安装-使用
1.在搭建好的vue项目中 cd practice_project\elements-demo (elements-demo项目名)
2.安装mockjs
npm install mockjs --save-dev
3.引入mockjs
①在src中创建mock文件夹,在里面创建mock.js
②入口文件中main.js
import Mock from './mock/mock'
4.测试 官网的小demo
在 mock.js中
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
二.语法
Mock.js 的语法规范包括两部分:
数据模板定义规范(Data Template Definition,DTD)
数据占位符定义规范(Data Placeholder Definition,DPD)
(一).数据模板定义规范
1.数据模板中的属性
1. 3部分构成:属性名name、生成规则rule、属性值value:
如:'name|rule': value
2.注意:
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则 有 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
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
2.生成规则和示例
1. 属性值是字符串 String
a.'name|min-max': string
通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。
b.'name|count': string
通过重复 string 生成一个字符串,重复次数等于 count。
eg:var data1 = Mock.mock({
"name1|2-3":"nihao",//重复生成nihao,重复次数大于等于2,小于等于3
"name2|3":"*",//重复生成*,重复次数等于3
})
// 输出结果
console.info("string",JSON.stringify(data1,null,4))
2. 属性值是数字 Number
a.'name|+1': number 属性值自动加 1,初始值为 number。
b.'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。
c.'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
}
eg:
var data3 = Mock.mock({
'name5|+1':3,//不会自动加1??输出 3,
'name6|12':3,// 输出 12
'name7|1-100':3,//61
'name8|1-100.2-3':2,//19.552,
'name9|123.2':2//123.48
})
console.info("number",JSON.stringify(data3,null,4))
3. 属性值是布尔型 Boolean
a.'name|1': boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
b.'name|min-max': value
随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
eg:var data2 = Mock.mock({
'name3|1':true,
'name4|1-9':true
})
4. 属性值是对象 Object
a.'name|count': object从属性值 object 中随机选取 count 个属性。
b.'name|min-max': object从属性值 object 中随机选取 min 到 max 个属性。
eg: var data5 = Mock.mock({
'name14|1':{
id:"23",
class:"衬衫",
price:"1234"
},
'name15|2-3':{
id:"34",
class:"袜子",
price:"156",
size:"xxl"
}
})
console.info("object",JSON.stringify(data5,null,4))
5. 属性值是数组 Array
a.'name|1': array 从属性值 array 中随机选取 1 个元素,作为最终值。
b.'name|+1': array 从属性值 array 中顺序选取 1 个元素,作为最终值。
c.'name|min-max': array通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。
d.'name|count': array通过重复属性值 array 生成一个新数组,重复次数为 count。
eg:var data4 = Mock.mock({
'name10|1':[1,2,3],//随机生成数组中的每一项
'name11|3':[5,6,7],//重复数组内的元素3次输出
'name12|1-3':[12,13,15,16],//重复数组内的元素1-3次输出
'name13|2-3':[
{
'name4|1-9':true,
'name7|1-100':3,
'name9|123.2':2,
},{
"name1|2-3":"nihao",
"name2|3":"*",
},{
"name1|2-3":"nihao",
"name2|3":"*",
},{
'name5|+1':2,
'name6|12':3,
'name7|1-100':3,
}
]
})
console.info("array",JSON.stringify(data4,null,4))
6. 属性值是函数 Function
a.'name': function
执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。
eg:var data6 = Mock.mock({
'fun':function(){
console.info("123")
}
})
console.info("function",JSON.stringify(data6,null,4))//123 输出function()
7. 属性值是正则表达式 RegExp
a.'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"
}
eg:
var data7 = Mock.mock({
'regexp1':/[a-z][A-Z]/,
'regexp2':/\d{2,8}/,
'regexp3':/\w[0-9]/
})//生成自定义字符串
console.info("RegExp",JSON.stringify(data7,null,4))
输出
RegExp {
"regexp1": "sJ",
"regexp2": "43114",
"regexp3": "u7"
}
(二).数据占位符定义规范
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
1.占位符 的格式为:
@占位符
@占位符(参数 [, 参数])
2.注意:
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 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"
}
}
三.vue使用
a.main.js
import axios from 'axios'
// 全局挂载
Vue.prototype.$http = axios
import '../mock/mockJS.js'
b.创建mock文件,在mock/mockJS.js
// 导入模拟假数据的包
import Mock, { Random } from 'mockjs'
// 自定义一个数组--随机获取这个数组里边的值--引用Random
// 创建自定义Mock函数
Random.extend({
// 自定义函数名:function 函数
fruit: function () {
const arr = ['榴莲', '菠萝蜜', '椰子', '苹果', '菠萝']
return this.pick(arr)
}
})
// 通过Mock.mock()来模拟API接口----GET请求
Mock.mock('/api/goodslist', 'get', {
status: 200,
message: '获取商品列表成功',
// 生成5到10条,或者直接data|5条数据
'data|5-10': [
{
// mock自增函数@increment-从1开始
id: '@increment(1)',
// 随机返回中文文字-显示名字
name: '@cword(2, 8)',
// 随机返回一个自然数
price: '@natural(2, 10)',
count: '@natural(100, 999)',
// 建议使用 data字符串压缩64格式,你建议url地址请求
img: '@dataImage(78x78)'
}
]
})
c. 组件中使用
// 模拟异步get
async getGoodsList () {
const { data: res } = await this.$http.get('/api/goodslist')
console.log("mock 数据:", res);
},
更多推荐
已为社区贡献31条内容
所有评论(0)