正確開啟Mockjs的三種姿勢：入門參考（一）

Ajax · 發表 2018-10-24 20:49:00

摘要：一、文章初衷閱讀本文章需要注意以下幾點: 文章不主要介紹Mockjs的使用語法文章暫不涉及Mockjs的第三方封裝框架文章會結合以往做過上線專案的方式總結想主要介紹如何使用Mockjs,是因為發現網上針對這方面的資料好像並不多，並且比較分散。想...

一、文章初衷

閱讀本文章需要注意以下幾點:

文章不主要介紹Mockjs的使用語法
文章暫不涉及Mockjs的第三方封裝框架
文章會結合以往做過上線專案的方式總結

想主要介紹如何使用Mockjs,是因為發現網上針對這方面的資料好像並不多，並且比較分散。想要做一次總結，希望能幫助解決入門Mockjs的新人使用的一些疑惑

1.1 簡單介紹一下Mock.js

眾所周知 Mock.js 因為兩個重要的特性風靡前端:

資料型別豐富

支援生成隨機的文字、數字、布林值、日期、郵箱、連結、圖片、顏色等。
攔截 Ajax 請求

不需要修改既有程式碼，就可以攔截 Ajax 請求，返回模擬的響應資料。安全又便捷

文章會用到的API(也是Mock經常使用的API):

Mock.mock(url, type, data)

引數名	引數需求	引數描述	例子
url	可選: URL 字串或 URL 正則	攔截請求的地址	/mock
type	可選	攔截Ajax型別	GET、POST
template	可選: 可以是物件或字串	生成資料的模板	`{'data\|1-10':['mock'] }` 、 `'@EMAIL'`

template可能有點難理解,我們試幾個例子就一目瞭然了！

//型別1: 名字|規則: 內容
Mock.mock({'data|1-4': '啞巴'})

//生成1-4個啞巴字串
{
data: "啞巴啞巴啞巴"

}

//型別2: Mock自帶模板
Mock.mock('@province')

//隨機生成一個省份
"上海"

更多測試例項可以到: ofollow,noindex">《Mock 例項》上檢視。

也可以親自在網站的console裡測試,非常方便

簡單介紹了Mock.js的用法,下面獻上正文

二、如何高效地使用Mock.js

針對不同情況,羅列了以下幾種可能會使用到的方式:

直接建立使用

1) 直接在需要Mock資料的js檔案使用

2) 建立一個js/json檔案,匯入使用
優雅地搭配node

1) 通過node開啟Mock服務, 可加入到 package.json 命令裡

上面兩種方法區別蠻大的:

直接建立的Mock資料, 在控制檯的netWork是無法看到的.而通過服務開啟的Mock,在控制檯是真真切切看得到攔截的！
對於要上線的專案, 直接建立(匯入)Mock資料還會導致一個大的麻煩！當你開始呼叫真正後端介面的時候, 你不得不一個個刪除建立的資料(即使你統一在一個檔案建立,但也要一個個註釋掉匯入的地方)。但是如果你用node服務,就避免了這個問題了。因為你需要用Mock資料的時候,只需要開啟它的服務,而不需要匯入

下面我在一個小專案(React + Antd)上測試Mock

2.1 針對個人練手專案

1. 可以用最簡單的方式建立:

let dataSource = Mock.mock({
'dataSource|5':[{
'key|+1': 1,
'mockTitle|1':['啞巴', 'Butter-fly', '肆無忌憚', '摩天大樓', '初學者'],
'mockContent|1': ['你翻譯不了我的聲響', '數碼寶貝主題曲', '摩天大樓太稀有', '像海浪撞破了山丘'],
'mockAction|1': ['下載', '試聽', '喜歡']
}]
})

//為了提高閱讀效率, columns我就不放出來啦！

<Table
style={{marginTop: 10}}
columns={columns}
dataSource={dataSource}
/>

我們看一下輸出的Table:

Prefect！！Mock的使用就是這麼簡單。但對於追求完美的我們肯定想要程式碼更規範, 於是我們把它統一放到一個 /mock/api.js 檔案中, 並嘗試給它新增一個URL！

//api.js
import Mock from 'mockjs'

const url = {
tableDataOne: 'http://20181024Mock.com/mode1/tableDataOne',
tableDataTwo: 'http://20181024Mock.com/mode1/tableDataTwo',
tableDataThi: 'http://20181024Mock.com/mode1/tableDataThi',
}
module.exports = [
Mock.mock(url.tableDataOne, {
'dataSource|5':[{
'key|+1': 1,
'mockTitle|1':['啞巴', 'Butter-fly', '肆無忌憚', '摩天大樓', '初學者'],
'mockContent|1': ['你翻譯不了我的聲響', '數碼寶貝主題曲', '摩天大樓太稀有', '像海浪撞破了山丘'],
'mockAction|1': ['下載', '試聽', '喜歡']
}]
})
]

我們在去元件中引入 api.js , 然後用axios請求它！

//TableComp.js
/*
* 我這裡去掉了多餘的import,例如antd、react等等
* 只截取了元件的主要學習部分
*/

import axios from 'axios'

//按需引入api檔案, 但後面會導致刪除麻煩的問題.
import '../../../../../../mock/mode1/api'

componentDidMount(){
const that = this;
axios.get('http://20181022Mock.com/mode1/tableDataOne').then((res) => {
if(res.status == 200){
that.setState({
dataSource: res.data.dataSource
})
}
})
}

render(){
const { dataSource } = this.state;

return(
<Table
style={{marginTop: 10}}
columns={columns}
dataSource={dataSource}
/>
)
}

不出乎意料, 應該也是可以拿到資料, 但是netWord裡面是找不到這個請求的, 因為這是一個假的ajax！

這樣雖然解決了程式碼統一處理/規範的問題，但是每次使用都需要引入的麻煩並沒有解決。下面我們看如果通過搭配node服務解決這個問題.

2.2 針對實際專案

既然我們要偽造一個真的後臺, 那麼當然需要用node來啟動服務, 那麼我們就建立一個 MockServer.js 檔案,當作是我們的入口.

和以前建立node服務一樣即可！(這裡我偷懶用express框架,koa也是一樣的道理)

let express = require('express');//引入express
let Mock = require('mockjs');//引入mock

let app = express();//例項化express

app.use('/mode2/DataOne',function(req, res){
res.json(Mock.mock({
'status': 200,
'dataSource|1-9':[{
'key|+1': 1,
'mockTitle|1':['肆無忌憚'],
'mockContent|1': ['角色精湛主題略荒誕', '理由太短 是讓人不安', '疑信參半 卻無比期盼', '你的慣犯 圓滿', '別讓糾纏 顯得 孤單'],
'mockAction|1': ['下載', '試聽', '喜歡']
}]
}))
})

app.listen('8090', () => {
console.log('監聽埠 8090')
})

只需要以上幾個步驟就可以完成了！

例項化express物件、引入mock模組
(加入請求頭,解決跨域)
通過express掛載一個請求(use、get...),並返回mock資料
暴露埠，開啟服務！

大家可能注意到了第二點我還沒實現.不過我們先不考慮跨域問題, 執行一下看看會出現什麼情況。(存在跨域問題是必然的, 因為都不是同一個埠號！)

果然, 跨域問題出來了:

那我們還是乖一點把請求頭配置加上去吧(複製即可):

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});

跨域問題就順利解決了！

這樣一來我們就解決了匯入帶來的麻煩了！如果不想進入 MockServer.js 所在的資料夾裡啟動服務, 可以在 package.json 中配置命令

//package.json
{
...
"scripts": {
"start": "node ./bin/www",
"build": "webpack --progress --watch --color",
"mock": "node ./mock/mode2/mockServer"
},
...
}

然後我們像啟動專案一樣, 在根路徑 npm run mock 即可！

比較坑爹的是，這樣配置並不存在自動更新功能, 所以我們每次更改了 MockServer.js 還要command + c 殺掉這個程序, 重啟服務生效。

雖然實際專案使用Mock的這種方式蠻多的, 但是其中複雜地多, 比如Mock生成資料的規則會統一放到一個 rule.js 中. 更多的便捷配置和用法還是需要你去學習別的專案是怎麼運作的！

我這裡只是列出了最簡單的用法. 當我們多參考別人、多總結別人構建的專案, 慢慢地就會培養出經驗。但是網上 react + mock.js 專案mock用得很規範的實在是不多。手頭上的線上專案原始碼閱讀起來又有一點吃不消, 打算去纏著大佬打破砂鍋問到底 =.=

等我總結了更好的使用方式再回來更新！

============================== 我還會回來補充的 ==============================

正確開啟Mockjs的三種姿勢：入門參考（一）

一、文章初衷

二、如何高效地使用Mock.js

您可能也會喜歡…