vue+xe-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文件就越多，需要有个结构规范来维护，不然就会很混乱