VUE使用MOCK模拟数据，本地测试vue中的Axios请求

使用MOCK模拟数据

vue.config.js

//vue.config.js
/*
 * @Author: Dayi
 * @Date: 2020-09-01 23:27:43
 * @LastEditors: Dayi
 * @LastEditTime: 2020-09-01 23:30:45
 * @Description: Mock模拟数据
 */
module.exports = {
	devServer: {
		before(app, server) {
			app.get("/api/cartList", (req, res) => {
				res.json({
					result: [
						{
							name: "中学物理",
							public: "2019.03",
							price: 10,
							count: 1,
							isActive: false,
						},
						{
							name: "中学化学",
							public: "2019.05",
							price: 11,
							count: 1,
							isActive: false,
						},
						{
							name: "中学语文",
							public: "2019.01",
							price: 9,
							count: 1,
							isActive: false,
						},
					],
				});
			});
		},
	},
};

通过开发服务器配置，类似node.js配置，将数据返回

页面请求

1. 引入Axios

data(){
  return{
    navList:[]
  }
},
async created(){
	const res = await this.$http.get('/api/cartList')
	let this.navList = res.data
}

总结

使用MOCK模拟数据，可以在后端未开发好接口，或项目不方便在本地测试时进行模拟请求数据测试，而且源代码在上线时不需要二次修改，极大的节省了时间