給你專案加個Mock吧

Renly_wen發表於2020-08-23

Mock

mockjs官網：http://mockjs.com/

一、簡介

1.什麼是mock
攔截請求，生成隨機資料。

2.mock的使用場景
當後端介面還未完成的時候，前端需要一些資料來寫頁面，此時就需要Mock資料。

mock原理圖：

二、在Vue專案中使用mock.js

1.搭建測試專案

可以參考我之前的一篇文章：新建一個Vue專案

2.安裝所需要的的依賴

cnpm install axios --save
cnpm install mockjs --save
cnpm install json5 --save

# axios傳送ajx資料
# mockjs生成隨機資料
# json5解決json檔案無法新增註釋的問題

3.mock的基本的配置和使用

生成一個js檔案

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);

參考文件：http://mockjs.com/examples.html

4.json5的使用

vsCode外掛市場安裝一個json5的外掛

將剛剛的物件生成一個josn5檔案

{
    id: "@id()",// 隨機生成id，字串
    username: "@cname()",// 隨機生成中文名
    date: "@date()",// 隨機生成日期
    avatar: "@image('200x200','blue','#fff','Mock~')",// 生成圖片（大小，背景色，前景色，文字）
    description: "@paragraph()",// 描述
    ip: "@ip()",// ip
    emai: "@email()"// email
}

引入josn5庫來接續json5格式

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)

5.mock和vue-cli結合

根目錄新建一個vue.config.js的檔案

module.exports = {
    devServer: {
        before: require('./mock/index')
    }
}

mock資料夾下新建index.js檔案

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));
    });
}

6.傳送ajax請求

在 src\components\HelloWorld.vue 中傳送ajax請求

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  mounted() {
    axios
      .get('/user/userinfo')
      .then((res) => {
        console.log(res)
      })
      .catch((err) => {
        console.log(err)
      })
  },
}
</script>[]()