前端學習：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是在後端接口未通，字段和結構已給出，方便你們自測使用， 並且本身寫一些項目是能夠先脫離後端，更適合自我開發先後端分離 我以爲仍是很方便的，不管在我的項目仍是團隊合做