【vue】生成接口模拟数据

目录

• 方案一：自定义模拟数据
  • Step1 创建json文件
  • Step2 在 vue.config.js 中配置
  • Step3 在组件中使用 (方式一)
  • Step3 封装api (方式二)
  • Step4 在组件中使用 (方式二)
• 方案二：自动生成模拟数据
  • Step1 引入mock.js
  • Step2 编写模拟数据
  • Step3 在组件中使用

在前端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 模板生成模拟数据

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>

分类: vue

标签: mock.js, vue

好文要顶 关注我 收藏该文

witheredwood
关注 - 0
粉丝 - 0

+加关注

0

0

«  上一篇： 【vue】获取异步加载后的数据