1. 程式人生 > >給你專案加個Mock吧

給你專案加個Mock吧

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