在前后端分离的单页面应用项目开发的过程中，我们常常需要与后端发生交互，以调试我们的程序。但是，如果后端接口还没有开发完成，我们该如何调试呢？mockjs 可以帮助我们做到这点。
在后端接口开发完成之前，前端可以使用后端已有的接口文档，使用 mockjs 模拟真实接口请求和接收数据，模拟与后端的交互，实现前后端分离开发。这样，我们可以不必等待后端接口与数据开发完成，使用 mockjs 就可以实现前端的完整开发与调试，当后端开发完成后，您只需去掉 mockjs，就可以与真实的接口进行交互。
个人认为 mockjs 有点类似软件测试中的桩 (stub) 模块，前端依赖于后端，后端可以看成是前端的依赖模块，此时后端尚未开发完成，而 mockjs 是模拟后端接口的，所以 mockjs 可以看做是一个桩模块（仅仅是个人想法，如有错误欢迎批评指正）
在本文中，将使用 mockjs 模拟与后端交互，实现 登陆 功能。
安装
本文中的示例是在 Vue2.0 + webpack + vue-cli 上实现的，需要安装以下模块：
# axios
npm install axios --save
# mockjs
npm install mockjs --save-dev
# axios-mock-adapter
npm install axios-mock-adapter --save-dev
代码实例
在项目中 src 文件夹结构 (不完全) 如下，按该结构创建文件夹和代码文件：
- api
api.jsindex.js
- mock
- data
user.js
index.js
- data
main.js
定义 axios 接口
首先我们使用 axois 定义好 api，api/api.js 的内容如下：
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8080'
export const postLogin = params => {
return axios.post('/login', params)
}
创建后台模拟数据
在 mock/data/user.js 中，存放一些用户数据，注意在本示例中，使用邮箱 (email) 和密码 (password) 来登录。具体内容如下：
const users = [
{
email: 'user1@123.com',
password: '123456',
balance: 100,
birth: '1990-01',
},
{
email: 'user2@123.com',
password: '123456',
balance: 200,
birth: '1991-01',
},
{
email: 'user3@123.com',
password: '123456',
balance: 300,
birth: '1992-01',
}
]
export { users }
mock/index.js 内容如下：
/* 通过axios-mock-adapter生成代理api地址 */
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import { users } from './data/user'
export default {
init () {
let mock = new MockAdapter(axios)
// mock success request 模拟成功请求
mock.onGet('/success').reply(200, {
msg: 'success'
})
// mock error request 模拟失败请求
mock.onGet('/error').reply(500, {
msg: 'failure'
})
// login 模拟登录接口
mock.onPost('/login').reply(config => {
console.log('mock.onPost')
// 解析axios传过来的数据
let { email, password } = JSON.parse(config.data)
return new Promise((resolve, reject) => {
// 先创建一个用户为空对象
let user = null
setTimeout(() => {
// 判断模拟的假数据中是否有和传过来的数据匹配的
let hasUser = users.some(account => {
// 如果存在这样的数据
if (account.email === email && account.password === password) {
user = JSON.parse(JSON.stringify(account))
// 不把密码发送过去
user.password = undefined
return true
} else {
// 如果没有这个account
return false
}
})
// 如果有这个账号
if (hasUser) {
resolve([200, {msg: '登录成功', user: user}])
} else {
resolve([201, {msg: '账号或密码错误', user: null}])
}
}, 1000)
})
})
}
}
在 main.js 中引入 mock
在 main.js (其他代码已省略) 中引入 mock。
注意：当您需要使用 mock 来模拟与后端交互时，需要加入下面代码；当后端开发完成并且您需要与真实的后端接口进行交互时，只需将下面代码删除即可，并且相应地在 api.js 中修改 axios.defaults.baseURL。
import Mock from './mock/index'
Mock.init()
在页面中增加登录方法
比如你的登录页面文件是 Login.vue，为您的登录按钮添加以下方法：
handleLogin () {
// Element-ui的表单验证
this.$refs.ruleForm.validate((valid) => {
if (valid) {
// 正在登陆，此使登录按钮不可点击
this.logining = true
let loginParams = {
email: this.ruleForm.email,
password: this.ruleForm.password
}
/* 调用axios登录接口 */
postLogin(loginParams).then(res => {
console.log(res)
let { msg, user } = res.data
if (res.status === 200) {
// 登录成功，在sessionStorage保存用户信息
sessionStorage.setItem('user', JSON.stringify(user))
// 在vuex中存放用户信息
this.$store.dispatch('setUser', user)
// 跳转至主页面
this.$router.push({ path: '/' })
} else {
this.$message({
message: msg,
type: 'error'
})
}
this.logining = false
}).catch(err => {
this.logining = false
console.log('postLogin catch err:', err)
this.$message({
message: err,
type: 'error'
})
return false
})
} else {
console.log('error submit!')
return false
}
})
}
现在 npm run dev 运行项目，输入 email 和 password，点击登录按钮进行登录！