目錄
在前端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": "https://blog.csdn.net/qq_35439539/article/details/120484551"
},
{
"id": "120193268",
"title": "【vue】獲取異步加載后的數據",
"date": "2021-09-09 08:37:21",
"link": "https://blog.csdn.net/qq_35439539/article/details/120193268"
},
{
"id": "120193191",
"title": "【vue】兩個頁面間傳參 - props",
"date": "2021-09-09 08:30:17",
"link": "https://blog.csdn.net/qq_35439539/article/details/120193191 "
},
{
"id": "120073645",
"title": "【vue】 使用 Video.js 播放視頻",
"date": "2021-09-03 08:36:50",
"link": "https://blog.csdn.net/qq_35439539/article/details/120073645"
},
{
"id": "117815087",
"title": "第三章：Git 把項目推到遠程倉庫",
"date": "2021-06-11 14:15:09",
"link": "https://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 模板生成模擬數據
已安裝 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>