前端学习：mock与fast-mock

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是在后端接口未通，字段和结构已给出，方便你们自测使用， 并且本身写一些项目是能够先脱离后端，更适合自我开发先后端分离 我以为仍是很方便的，不管在我的项目仍是团队合做