前端：基于Vue框架的调用及mock后端接口整合

邹玉鑫

于 2018-04-15 15:51:19 发布

阅读量2.2k

点赞数

文章标签： Vue mock后端接口远程调用模块

本文链接：https://blog.csdn.net/zou15590/article/details/79949607

版权

本文记录了在Vue项目中如何整合调用后端接口，并实现Mock功能，通过创建独立模块，定义远程URL、Mock数据，以及转换方法，实现了前后端独立开发的便捷性。

摘要由CSDN通过智能技术生成

最近在搭建一个基于Vue框架的前端架构，试图探索出如何将调用后端的代码整合成一个模块，并且能方便地mock接口，返回假数据，便于与后端独立开发。现在，将实践结果进行记录，给以后及他人提供参考。

后端向前端返回的数据结构为：

{
  success: true,
  errorCode: 1000000,
  errorMsg: null,
  result: null
}

在"remote/url.js"文件中，定义调用后台的url，以及是否mock假数据

// remote/url.js
export default {
  login: '/api/login',
  logout: {url: '/api/logout', mock: true}
}

在"remote/mock.js"文件中，定义mock假数据时返回的数据

// remote/mock.js
export default {
  login: request => {
    return {
      success: true,
      errorCode: 1000000,
      errorMsg: null,
      result: {
        username: 'user',
        sessionId: '123456'
      }
    }
  },
  logout: request => {
    return {
      success: true,
      errorCode: 1000000,