src ├── api //放置请求的文件夹 ├── App.vue //vue里的app.vue文件 ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── config │ └── index.js ├── directive //自定义指令 ├── lib //工具库文件夹 │ ├── tools.js //与业务无关的工具库 │ └── utils.js //与业务相关的工具库 ├── main.js ├── mock //前端开发的模拟数据，npm i mockjs --save-d安装 │ └── index.js ├── router //路由文件夹 │ ├── index.js │ └── router.js ├── store //vuex文件夹 │ ├── actions.js │ ├── index.js │ ├── module │ │ └── user.js │ ├── mutations.js │ └── state.js └── views ├── About.vue └── Home.vue
以上是建立vue项目的初步文件夹
Mock的使用（前提需要安装mockjs依赖）
Mock.mock( rurl?, rtype?, template|function(options) )
根据数据模板生成模拟数据。
-
Mock.mock( template )
根据数据模板生成模拟数据。
-
Mock.mock( rurl, template )
记录数据模板。当拦截到匹配
rurl的 Ajax 请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。 -
Mock.mock( rurl, function(options) )
记录用于生成响应数据的函数。当拦截到匹配
rurl的 Ajax 请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。 -
Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配
rurl和rtype的 Ajax 请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。 -
Mock.mock( rurl, rtype, function(options) )
记录用于生成响应数据的函数。当拦截到匹配
rurl和rtype的 Ajax 请求时，函数function(options)将被执行，并把执行结果作为响应数据返回。
参数的含义和默认值如下所示：
- 参数 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 选项集。
1、快速入门案例（在mock文件夹下的index中的文件内容）
import Mock from 'mockjs' import { getList } from './mockData' Mock.mock('http://www.baidu.com/get.php', getList); export Mock;
mockData中的文件内容
export getList = () => { return [ {id: 1, name:'aaa', age: 12}, {id: 2, name:'bbb', age: 13} ] }
以上为mock文件夹下的内容，在需要发送ajax请求的地方引入即可
process.env.NODE_ENV !== 'production' && (import('@/mock'))
2、template的定义规则
数据模板中的属性由三个部分组成：属性名，生成规则，属性值
// 属性名 name // 生成规则 rule // 属性值 value 'name|rule': value
注意：
1. 属性名和生成规则之间用 | 分割。 2. 生成规则是可选 3. 生成规则有7种格式： （1）'name|min-max': value （2）'name|count': value （3）'name|min-max.dmin-dmax': value （4）'name|min-max.dcount': value （5）'name|count.dmin-dmax': value （6）'name|count.dcount': value （7）'name|+step': value 4. 生成规则的含义需要依赖属性值得类型才能确定。 5. 属性值中可以含有'@占位符' 6. 属性值还指定了最终值得初始值和类型。
（1） 属性值是字符串String
1. name|min-max: string
通过重复string生成一个字符串，重复次数大于等于min，小于等于max。这里的重复是指对初始化string的重复次数。
2. name|count: string
通过重复string生成一个字符串，重复次数等于count。 （2） 属性值是数字Number
1. name|+1 : number
属性值自动加1， 初始值为number
2. name|min-max: number
生成一个大于等于min，小于等于max的整数。
3. 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
1. name|1: boolean
随机生成一个布尔值，值为true的概率为1/2， 值为false的概率为1/2。
2. name|min-max: value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)
（4）属性值是对象Object
1. name|count: object 从属性值object中随机选取count个属性
2. name|min-max: object 从属性值object中随机选取min到max个属性
(5) 属性值是数组Array
1. name|1: array 从属性值array中随机选取一个元素，作为最终值
2.name|+1: array 从属性值array中顺序选取一个元素，作为最终值
3. name|min-max: array 通过重复属性值array生成一个新数组，重复次数大于等于min，小于等于max。
4. name|count: array 通过重复属性值array生成一个新数组，重复次数为count。
(6) 属性值是函数Function
'name': function 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
(7) 属性值是正则表达式RegExp
1. 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" }
3、Mock.Random的使用
Mock.Random是一个工具类，用于生成各种随机数据。
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" }
扩展
Mock.Random中的方法与数据模板的‘@占位符’一一对应，在需要时还可以为Mock.Random扩展方法，然后在数据模板中通过'@扩展方法'引用：
Random.extend({ constellation: function(date) { var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'] return this.pick(constellations) } }) Random.constellation() // => "水瓶座" Mock.mock('@CONSTELLATION') // => "天蝎座" Mock.mock({ constellation: '@CONSTELLATION' }) // => { constellation: "射手座"
Mock.Random.date('yyyy-MM-dd') => 返回的是随机的日期
Mock.Random.time('hh:mm:ss') => 返回的是随机的时间
Mock.Random.now() => 返回的当前时间
Mock.Random.datetime('yyyy-MM-dd hh:mm'), => 返回的是日期和时间组合
Mock.Random.image('100*200') => 返回的是图片地址，默认图片
4、对mockjs进行封装使用
index.js文件
import Mock from 'mockjs' import MockData from './mockData' class MockInt { constructor () { this.data = new MockData(); this.url = 'http://111.230.154.45'; } MockList () { return [ ['/get.php', 'get', this.data.getAllList()] // [/\/get\.php/, 'get', this.data.getAllList()] ] } init () { this.MockList().forEach(value => { let [first, ...rest] = value; let newList = first instanceof RegExp ? [first].concat(rest) : [this.url + first].concat(rest); Mock.mock.apply(null, newList); }) } } let mockInstance = new MockInt(); mockInstance.init(); export default mockInstance
mockData.js文件
import Mock from 'mockjs' export default class MockData { constructor () { Mock.Random.extend({ bill: () => { let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']; return arr[parseInt(Math.random() * 7)]; } }) } getAllList () { let arr = [] let template = { 'id|+1': 1, 'random|1-10': 100, 'float|1-9.12-5': 1, 'str|2-8': 'a', 'name|2': 'b', 'bool1': true, 'obj|2': { name: 'aaa', age: '12', 'fav|1': ['computer', 'football', 'basketball', 'reading', 'game'] }, 'fn': (...rest) => { return 'this is fn' }, 'email': '@email', 'bill': '@bill', // 自定义的参数 'date': Mock.Random.date('yyyy-MM-dd'), // 返回的是随机的日期 'time': Mock.Random.time('hh:mm:ss'), // 返回的是随机的时间 'now': Mock.Random.now(), // 返回的当前时间 'dateTime': Mock.Random.datetime('yyyy-MM-dd hh:mm'), // 返回的是日期和时间组合 'image': Mock.Random.image('100*200') // 返回的是图片地址，默认图片 } for (let i = 0; i < 2; i++) { arr.push(template) } return Mock.mock(arr); } }
