vue+mockjs安装及语法规范

小鱼儿 2021-09-15 02:52 449阅读 0赞

# 一.了解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))

![2018032810033417][]

# 二.语法 #

Mock.js 的语法规范包括两部分：  
     数据模板定义规范（Data Template Definition，DTD）

数据占位符定义规范（Data Placeholder Definition，DPD）

[常用语法][Link 1]

## (一).数据模板定义规范 ##

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);
        },

[2018032810033417]: /images/20210813/ef1ea6a1176248c8a8d0170712f391f7.png
[Link 1]: http://xn--mockjs-ud1lx90c97o2ttlnd