vue+xe-ajax+mock 前后端分离
现状
- 开发模式强耦合,比如:用户提个需求,后台接口还没完成前端就没法开工,开发效率大大降低
- 服务接口严重依赖后端,接口一旦变动前端联调困难
前后端分离
- 前后端通过异步接口ajax来交互
- 前后端都各自有自己的开发流程,构建工具,单元测试等
- 前后端完全独立运作,前端使用Mock虚拟服务与后端解耦
Vue 与后台交互常用插件有
vue-resource 官方已停止维护
axios 使用 Promise API
xe-ajax 使用 Promise API,支持Mock
vue+xe-ajax+mock 示例
项目结构
开始安装
npm install xe-ajax xe-ajax-mock --save npm install vxe-ajax --save (用于全局安装,挂载vue实例this.$ajax,可选择不安装)
配置Mock虚拟服务
src/mock/index.js
import XEAjax from 'xe-ajax' import XEAjaxMock, { setup, GET, POST, DELETE } from 'xe-ajax-mock' // 安装 XEAjax.use(XEAjaxMock) // 设置虚拟服务的全局参数 setup({ timeout: '100-1000' }) // 虚拟GET请求 GET('services/user/list', (request, response) => { response.status = 200 response.body = require('./json/user/list/data.json') return response }) // 虚拟POST请求 POST('services/user/save', (request, response) => { // 模拟后台逻辑 if (request.body.id) { response.status = 200 } else { response.status = 500 } response.body = require('./json/user/save/data.json') return response }) // 虚拟DELETE请求 DELETE('services/user/del', (request, response) => { response.status = 200 response.body = require('./json/user/del/data.json') return response })
配置响应数据(建议目录根据服务层级来定义,方便维护)
src/mock/json/user/list/data.json
[{ "name": "test", "id": 123 }]
src/mock/json/user/save/data.json
{
"msg": "success"
}
src/mock/json/user/del/data.json
{
"msg": "success"
}
调用
src/views/Home.vue
<template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.dateStr }}</li> </ul> </div> </template> <script> import { fetchGet } from 'xe-ajax' export default { data () { return { list: [] } }, methods: { init () { fetchGet('services/user/list', {id: 123}).then(response => { if (response.ok) { response.json().then(data = > { this.list = data.map(item => { item.dateStr = this.$utils.dateToString(item.date, 'MM/dd/yyyy') }) }) } }) } }, created () { this.init() } } </script>
只需要在主入口文件引用mock,这样编译生产包时通过环境变量控制只对开发环境生效
src/main.js
// 启动前端虚拟服务 if (process.env.NODE_ENV === 'development') { require('./mock') }
Mock插件
XEAjaxMock 对虚拟服务目录结构不限制,当虚拟服务越来越多时,统一目录结构可维护性会更好
更多详细说明请查看 Mock插件文档
总结一下
优点
- 接口文档的统一编辑和维护
- 接口变动只需要改动mock数据,不需要与后台接口联调
缺点
- 当虚拟接口越多对应json文件就越多,需要有个结构规范来维护,不然就会很混乱