mock.js

1.使用环境

后端api迟迟没有上线，模拟的json数据

2.使用

先安装npm i mockjs。
再使用mock.js上面相关语法写代码

	const Mock = require('mockjs');
	const data = Mock.mock({
		'list|1-10': [{
		'id|+1': 1
		}]
	})
	console.log(data)

3.如果是要想能在浏览器显示则稍改一下代码

<script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        const data = Mock.mock({
            'list|1-10': [{
                'id|+1': 1
            }]
        })
        console.log(data)
    </script>

4.mock.js语法

它是由 属性名|生成规则:属性值构成

例如上面出现的那个是 'list|1-10':[] 表示随机生成1-10个数组 'id|+1':1 表示从1开始自增1

还有代表几个例子

一：字符串

‘str|1-2': ‘kkk’ 'kkk'，重复次数1-2次

二：数字

‘id|1-10.1-8: 1’ 整数是1-10之间的数字，小数是1-8位

三：布尔值

‘flag|1: true’有二分之一概率为true

四：布尔值

‘flag:1-10’: true 概率是1/（1+10）

五.对象

const obj = {
	name: 'sasa',
	age: '17',
	sex: '1'
}

’obj|1-3‘: obj随机打印obj的1-3个属性

六.数组

const arr = [2,3,4,8]

’arr|1‘: arr随机打印arr的1个值 'arr|2': arrarr重复2（随前面的2）次，合并成新的数组 'arr|1-2’: arrarr随机重复1或2次，合并成新的数组

七.占位符

name: '@cname'有的是内置的，可以随机打印内置名字和城市,没有的就不行 name: '@name' city: '@city' city: '@city----@cname'

八.占位符

两种随机生成占位符：

Mock.mock('@url') Mock.Random.image

扩展自己的占位符

Mock.Random.extend({
	store() {
		return this.pick({
			'花店',
			'干洗店',
			'火锅店'
		})
	}
})

5.mock.js-不大常用的语法

一.函数

'fn': function(){return 'wxy'} 直接可写

二.正则

'reg': /[a-z]/ 随机再a-z之间

6.mock拦截

Mock.mock('xxxx.com',{ state: 200, data: { } }) 先填拦截的接口，第二个参数写替换数据

fast-mock使用

fast-work网站注册登录后点创建项目

点击小眼睛后跳转到一个页面点击添加接口如下一个实列：可点击小眼睛预览看详情

注：fast-mock的数组应直接写成"sex|1": ["女","男"] 应该不支持单独写数组变量

调用

这里的接口拼接: 接口根地址+接口地址数据

个人总结

有关mock和和fast-mock是在后端接口未通，字段和结构已给出，方便大家自测使用，而且自己写一些项目是可以先脱离后端，更适合自我开发前后端分离我觉得还是很方便的，无论在个人项目还是团队合作

前端学习：mock与fast-mock