【vue】生成介面模擬數據

2021 年 10 月 3 日
筆記
Mock.js, VUE

方案一：自定義模擬數據
方案二：自動生成模擬數據

在前端vue中使用虛擬數據模擬後端介面返回的數據，從而使得前端開發獨立化。這裡使用了兩種方案模擬介面返回的數據。

第一種方案是自定義模擬數據，請求獲得該數據。該方案是先創建要返回的json介面數據文件，通過請求獲取到該json文件，從而獲得其中的json數據。

第一種方案是 mockjs 自動生成模擬數據，請求獲得該數據。該方案是先由 mockjs 生成隨機模擬數據，設置獲取到該數據的請求路徑，通過該請求獲取到模擬數據。

方案一：自定義模擬數據

Step1 創建json文件

在項目根目錄下創建 static/mock/articleList.json ，模擬數據如下：

{
  "data": [
    {
      "id": "120484551",
      "title": "ssh連接問題（不能下載github項目）",
      "date": "2021-09-26 11:10:33",
      "link": "//blog.csdn.net/qq_35439539/article/details/120484551"
    },
    {
      "id": "120193268",
      "title": "【vue】獲取非同步載入後的數據",
      "date": "2021-09-09 08:37:21",
      "link": "//blog.csdn.net/qq_35439539/article/details/120193268"
    },
    {
      "id": "120193191",
      "title": "【vue】兩個頁面間傳參 - props",
      "date": "2021-09-09 08:30:17",
      "link": "//blog.csdn.net/qq_35439539/article/details/120193191  "
    },
    {
      "id": "120073645",
      "title": "【vue】 使用 Video.js 播放影片",
      "date": "2021-09-03 08:36:50",
      "link": "//blog.csdn.net/qq_35439539/article/details/120073645"
    },
    {
      "id": "117815087",
      "title": "第三章：Git 把項目推到遠程倉庫",
      "date": "2021-06-11 14:15:09",
      "link": "//blog.csdn.net/qq_35439539/article/details/117815087"
    }
  ]
}

Step2 在 `vue.config.js` 中配置

需要注意的一點是，修改完這個配置後，需要重啟伺服器後才能成功請求。

// 本地json文件數據
let articleList = require('./static/mock/articleList.json')

module.exports = {
    devServer: {
        before(app) {
            app.get('/api/list', (req, res) => {
                console.log("vue.config.js ------------");
                res.json(articleList);
            })
        }
    }
}

下面使用2種方式請求數據：

不封裝api請求數據
封裝api後請求數據

方式一：不封裝api請求數據

Step3 在組件中使用 (方式一)

在組件或者頁面上請求獲取介面數據

<script>
    export default {
         mounted() {
             // 獲取文章列表
             this.axios.get("/api/list").then((res) => {
                console.log("res ==> ", res.data.data);
            }, (error) => {
                console.log(error);
            });
         }
    }
</script>

方式二：封裝api請求數據

Step3 封裝api (方式二)

在 src 下創建文件 api/index,js ，在這個文件中添加項目中用到的所有請求，適合項目中請求比較多的情況，方便統一管理。這個文件中使用 this.axios （也就是使用在 main.js 中的全局 axios）請求不會成功。

import axios from 'axios';

export default {
    // 獲取部落格列表數據
    getArticleList() {
        return axios({
            url: '/api/list',
            method: 'get',
        });
    }
}

Step4 在組件中使用 (方式二)

在組件或者頁面上請求獲取介面數據

<script>
    import api from "../api/index";
    export default {
         mounted() {
             // 獲取文章列表
             api.getArticleList().then((res) => {
                console.log("res ==> ", res.data.data);
            }, (error) => {
                console.log(error);
            });
         }
    }
</script>

方案二：自動生成模擬數據

使用mockjs自動生成介面模擬數據。Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立於後端進行開發，幫助編寫單元測試。提供了以下模擬功能：

根據數據模板生成模擬數據
模擬 Ajax 請求，生成並返回模擬數據
基於 HTML 模板生成模擬數據

mock官網文檔

Github網址

已安裝 axios

npm install --save axios vue-axios

安裝 mockjs

npm install mockjs

Step1 引入mock.js

在 main.js 中添加 mock.js

import './mock';  // 引入mock.js

Step2 編寫模擬數據

在 src 下創建文件 mock.js ，內容如下：

import Mock from 'mockjs'  // 安裝的mockjs，而不是mock.js
const Random = Mock.Random;  // 獲取 mock.Random 隨機對象

// 模擬一組數據
const getList = function() {
    let list  = [];
    for (let i = 0; i < 10; i++) {
        let listObject  = {
            id: Random.integer(0),  // 生成隨機數，最小值是0
            title: Random.csentence(10, 30),  // 生成隨機文本，字數在10-30之間
            date: Random.datetime('yyyy-MM-dd hh:mm:ss'),  // 格式化日期
            link: Random.url(),  // 生成隨機網址
        }
        list .push(listObject)
    }

    return {
        data: list
    }
}
Mock.mock('/api/list', 'get', getList);
export default Mock;

Step3 在組件中使用

在組件或者頁面上請求獲取介面數據

<script>
    export default {
         mounted() {
             // 獲取文章列表
             this.axios.get("/api/list").then((res) => {
                console.log("res ==> ", res.data.data);
            }, (error) => {
                console.log(error);
            });
         }
    }
</script>

Tags: Mock.js VUE