vue学习记录(六)---vue项目文件配置以及mockjs的用法

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': /wWsSdD/,
    '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);
    }
}