給你項目加個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結合

參考文檔：
wenpack相關：https://cli.vuejs.org/zh/guide/webpack.html
vue-cli配置參考https://cli.vuejs.org/zh/config/#devserver
https://webpack.js.org/configuration/dev-server/#devserverbefore

根目錄新建一個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>[]()

7.mock加入環境判斷

參考文檔：https://cli.vuejs.org/zh/guide/mode-and-env.html

根目錄新建一個 .env.development 文件

mock文件夾中的index.js文件加入判斷

重啟項目，當為true的時候可以正常訪問；
當不為true的時候報404，如果此時后端接口寫好，將可以直接拿到數據。