在前端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>