前后端分離——前端項目使用Mock.js 模擬數據

一、簡單介紹一下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')

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

更多測試實例可以到:http://mockjs.com/examples.html上查看。

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

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

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

• 直接創建使用
  1) 直接在需要Mock數據的js文件使用
  2) 創建一個js/json文件,導入使用

• 優雅地搭配node
  1) 通過node開啟Mock服務, 可加入到package.json命令里

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

1. 直接創建的Mock數據, 在控制台的netWork是無法看到的.而通過服務開啟的Mock,在控制台是真真切切看得到攔截的！

2. 對於要上線的項目, 直接創建(導入)Mock數據還會導致一個大的麻煩！當你開始調用真正后端接口的時候, 你不得不一個個刪除創建的數據(即使你統一在一個文件創建,但也要一個個注釋掉導入的地方)。 但是如果你用node服務,就避免了這個問題了。因為你需要用Mock數據的時候,只需要開啟它的服務,而不需要導入

下面我在一個小項目(React + Antd)上測試Mock：

2.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}
/>

其中，'mockTitle|1':['啞巴', 'Butter-fly', '肆無忌憚', '摩天大樓', '初學者']的含義為['啞巴', 'Butter-fly', '肆無忌憚', '摩天大樓', '初學者']數組中選擇一個值

詳情請參考：語法規范

我們看一下輸出的Table：

但對於追求完美的我們肯定想要代碼更規范, 於是我們把它統一放到一個/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}
        />
    )
}

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

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

2.2優雅地搭配node來使用mock.js

既然我們要偽造一個真的后台, 那么當然需要用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')
})

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

1. 1. 實例化express對象、引入mock模塊
   2. (加入請求頭,解決跨域)
   3. 通過express掛載一個請求(use、get...),並返回mock數據
   4. 暴露端口，開啟服務！

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

果然, 跨域問題出來了：

把請求頭配置加上去吧(復制即可)：

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中. 更多的便捷配置和用法還是需要你去學習別的項目是怎么運作的！

轉自：https://www.cnblogs.com/soyxiaobi/p/9846057.html

參考：https://blog.csdn.net/weixin_45000381/article/details/98234684