随着前端框架的不断发展，越来越多的公司选择使用前后端分离的开发模式。在这种情况下，前端需要模拟后台数据请求来测试自己所开发的页面，以确保在与后台联调时能够顺利地进行下去。本文将介绍在使用vue框架下，如何模拟后台数据请求本地数据配置。
一、Vue-cli 3.x脚手架搭建项目
首先需要使用 Vue-cli 3.x的脚手架来创建项目。这里本文就不再赘述。接着，在创建好的项目中，可以在 src 目录下新建一个 mock 目录，用来存放模拟数据。
二、安装和配置Mock.js
- 安装
在项目目录下使用以下命令行安装 Mock.js：
立即学习“前端免费学习笔记（深入）”；
npm install mockjs -D
- 配置
在工程目录下的 src/mock 目录下创建 mock.js 文件，并在其中配置：
import Mock from 'mockjs'
//这是模拟数据示例
Mock.mock('/api/getList', 'get', {
code: 0,
message: 'ok',
data: {
list: [
{ id: 1, name: '兰博基尼', price: '1亿', color: 'red' },
{ id: 2, name: '法拉利', price: '2亿', color: 'blue' },
{ id: 3, name: '奥迪', price: '3亿', color: 'black' },
{ id: 4, name: '宝马', price: '4亿', color: 'white' }
]
}
})Mock.mock('/api/getList', 'get', {}) 中，’/api/getList‘ 是请求的接口地址；‘get’ 是请求方法（POST、GET等）；{}是接口返回的数据。
- 引入Mock.js文件
在 main.js 中引入 mock.js 文件，并在Vue.prototype上绑定 Mock 方法，以便在调用组件API的时候使用：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './mock/mock.js'
Vue.config.productionTip = false
//将mock绑定到Vue实例的原型上
Vue.prototype.$Mock = Mock
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')三、调用模拟数据
在组件里调用模拟数据可以使用 Vue.prototype.$Mock.mock() 方法
//示例中的调用请求
methods: {
getData() {
this.$Mock.mock('/api/getList', 'get', {});
this.$http.get('/api/getList').then(res => {
//响应成功操作
console.log(res);
}, error => {
//响应失败操作
console.log(error);
})
}
}这样就可以在页面中使用 this.$http.get('/api/getList') 请求后台数据，而在联调之前，先在 mock.js 文件内进行模拟请求。这样就能够在开发过程中充分测试代码的正确性，同时避免在联调时可能碰到的问题。
总结：
在前后端分离开发的时代，前端更需要与后端的接口联调，但在软件开发过程中，联调往往存在一定的问题。除了联调时的兼容问题之外，还需要解决前后端不可同时开发的问题。因此，可以引入 Mock.js 来模拟后端数据请求来解决这个问题。简单的说就是：“模拟后端接口，让前端可以独立测试前端页面的逻辑正确性。这样就充分的提高了前端的开发效率，节省了开发成本，减少了多人协作开发的出错率，也避免了模拟数据时不必要的麻烦。
