vue+mockjs安装及语法规范

一.了解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);
    },