給你專案加個Mock吧
阿新 • • 發佈:2020-08-23
mockjs官網:[http://mockjs.com/](http://mockjs.com/)
### 一、簡介
**1.什麼是mock**
攔截請求,生成隨機資料。
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823141037022-2020954279.png)
**2.mock的使用場景**
當後端介面還未完成的時候,前端需要一些資料來寫頁面,此時就需要Mock資料。
**mock原理圖:**
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823140922018-1482911975.png)
### 二、在Vue專案中使用mock.js
#### 1.搭建測試專案
可以參考我之前的一篇文章:[新建一個Vue專案](https://www.cnblogs.com/renlywen/p/13462162.html)
#### 2.安裝所需要的的依賴
```cmd
cnpm install axios --save
cnpm install mockjs --save
cnpm install json5 --save
# axios傳送ajx資料
# mockjs生成隨機資料
# json5解決json檔案無法添加註釋的問題
```
#### 3.mock的基本的配置和使用
生成一個js檔案
```javascript
const Mock = require("mockjs")
let id = Mock.mock("@id")
console.log(id);
let obj = Mock.mock({
id: "@id()",// 隨機生成id,字串
username: "@cname()",// 隨機生成中文名
date: "@date()",// 隨機生成日期
avatar: "@image('200x200','blue','#fff','Mock~')",// 生成圖片(大小,背景色,前景色,文字)
description: "@paragraph()",// 描述
ip: "@ip()",// ip
emai: "@email()"// email
})
console.log(obj);
```
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823143732857-281434470.png)
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823143628779-403730849.png)
參考文件:[http://mockjs.com/examples.html](http://mockjs.com/examples.html)
### 4.json5的使用
**vsCode外掛市場安裝一個json5的外掛**
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823144053865-1307553253.png)
**將剛剛的物件生成一個josn5檔案**
```json
{
id: "@id()",// 隨機生成id,字串
username: "@cname()",// 隨機生成中文名
date: "@date()",// 隨機生成日期
avatar: "@image('200x200','blue','#fff','Mock~')",// 生成圖片(大小,背景色,前景色,文字)
description: "@paragraph()",// 描述
ip: "@ip()",// ip
emai: "@email()"// email
}
```
**引入josn5庫來接續json5格式**
```javascript
const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')
var json = fs.readFileSync(path.join(__dirname, "./userInfo.json5"), "utf-8")
console.log(json)
var obj = JSON5.parse(json)
console.log(obj)
```
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823144744668-1068695912.png)
#### 5.mock和vue-cli結合
參考文件:
wenpack相關:[https://cli.vuejs.org/zh/guide/webpack.html](https://cli.vuejs.org/zh/guide/webpack.html)
vue-cli配置參考[https://cli.vuejs.org/zh/config/#devserver](https://cli.vuejs.org/zh/config/#devserver)
[https://webpack.js.org/configuration/dev-server/#devserverbefore](https://webpack.js.org/configuration/dev-server/#devserverbefore)
**根目錄新建一個vue.config.js的檔案**
```javascript
module.exports = {
devServer: {
before: require('./mock/index')
}
}
```
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823152553454-939517830.png)
**mock資料夾下新建index.js檔案**
```javascript
const fs = require("fs");
const path = require("path");
const Mock = require("mockjs");
const JSON5 = require("json5");
function getJsonFile(filePath) {
// 讀取指定檔案
var json = fs.readFileSync(path.resolve(__dirname, filePath), "utf-8");
// 解析返回
return JSON5.parse(json);
}
// 返回一個函式
module.exports = function (app) {
// 監聽http請求
app.get("/user/userinfo", function (rep, res) {
// 讀取檔案進行處理
var json = getJsonFile("./userInfo.json5");
// 將json傳入方法中,返回給瀏覽器
res.json(Mock.mock(json));
});
}
```
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823151850636-1246689592.png)
#### 6.傳送ajax請求
在 src\components\HelloWorld.vue 中傳送ajax請求
```javascript
[]()
```
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823152726658-2056394704.png)
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823152716399-1111944586.png)
#### 7.mock加入環境判斷
參考文件:[https://cli.vuejs.org/zh/guide/mode-and-env.html](https://cli.vuejs.org/zh/guide/mode-and-env.html)
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823153047298-1164072493.png)
根目錄新建一個 .env.development 檔案
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823153445424-1608330645.png)
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823153130614-1591310049.png)
mock資料夾中的index.js檔案加入判斷
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823152948230-1868970754.png)
重啟專案,當為true的時候可以正常訪問;
當不為true的時候報404,如果此時後端介面寫好,將可以直接拿到資料。
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823153820073-640747176.png)
![](https://img2020.cnblogs.com/blog/2105456/202008/2105456-20200823153745519-2060318