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

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

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

1.1 簡單介紹一下mock.js

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

文章會用到的api(也是mock經常使用的api):

引數名引數需求

引數描述

例子url

可選: url 字串或 url 正則

攔截請求的位址

/mock

type

可選攔截ajax型別

get、post

template

可選: 可以是物件或字串

生成資料的模板

`)//生成1-4個啞巴字串

//型別2: mock自帶模板

mock.mock('@province')

//隨機生成乙個省份

"上海"更多測試例項可以到:《mock 例項》上檢視。

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

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

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

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

直接建立的mock資料, 在控制台的network是無法看到的.而通過服務開啟的mock,在控制台是真真切切看得到攔截的！

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

下面我在乙個小專案(react + antd)上測試mock

2.1 針對個人練手專案

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

let datasource = mock.mock(]
})//為了提高閱讀效率, columns我就不放出來啦！

我們看一下輸出的table:

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

import mock from 'mockjs'
const url = 
module.exports = [
mock.mock(url.tabledataone, ]})]

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

/** 我這裡去掉了多餘的import,例如antd、react等等
* 只擷取了元件的主要學習部分
*/import axios from 'axios'
//按需引入api檔案, 但後面會導致刪除麻煩的問題.
import '../../../../../../mock/mode1/api'
componentdidmount())}})
}render() = this.state;
return()}

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

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

2.2 針對實際專案

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

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

let express = require('express');   //引入express
let mock = require('mockjs');       //引入mock
res.json(mock.mock(]
}))})    console.log('監聽埠 8090')
})

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

例項化express物件、引入mock模組

(加入請求頭,解決跨域)

通過express掛載乙個請求(use、get...),並返回mock資料

暴露埠，開啟服務！

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

果然, 跨域問題出來了:

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

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中配置命令

,    ...
}

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

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

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

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

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

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

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

理解Promise的三種姿勢

產品優化正確的開啟姿勢

mysql core檔案的正確開啟姿勢

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

理解Promise的三種姿勢

產品優化正確的開啟姿勢

mysql core檔案的正確開啟姿勢

相關推薦

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