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

原创 2018年04月15日 15:51:19

      最近在搭建一个基于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,
      errorMsg: null,
      result: null
    }
  }
}

在"remote/index.js"主文件中,将url.js文件中定义的url映射成方法,并且提供对外调用。

toHump方法用于将返回数据的下划线表示转换成驼峰法表示

toUnderline方法用于将请求数据的驼峰法表示转换成下划线表示

// remote/index.js
import Url from './url.js'
import Mock from './mock.js'

let remote = {}
let prefix = 'http://localhost:8080'
let toHump = (obj) => {
  if (obj instanceof Object) {
    Object.keys(obj).forEach(key => {
      let newKey = key.replace(/_([a-z])/g, $1 => $1.toUpperCase()).replace(/_/g, '')
      let newValue = toHump(obj[key])
      delete obj[key]
      obj[newKey] = newValue
    })
  }
  return obj
}
let toUnderline = (obj) => {
  if (obj instanceof Object) {
    Object.keys(obj).forEach(key => {
      let newKey = key.replace(/([A-Z])/g, '_$1').toLowerCase()
      let newValue = toUnderline(obj[key])
      delete obj[key]
      obj[newKey] = newValue
    })
  }
  return obj
}
let invoke = (scope, url, request, successCallback, errorCallback) => {
  request = toUnderline(request)
  scope.$http.post(prefix + url, request).then(response => {
    console.log('call ' + url + ' success, request : ' + JSON.stringify(request) + ', response : ' + JSON.stringify(response.body))
    if (successCallback !== undefined && response.body.success) {
      successCallback(toHump(response.body))
    } else if (errorCallback !== undefined) {
      errorCallback(toHump(response.body))
    }
  }, error => {
    console.log('call ' + url + ' fail, request : ' + JSON.stringify(request) + ', error : ' + JSON.stringify(error.body))
    if (errorCallback !== undefined) {
      let res = {}
      res.success = false
      res.errorMsg = error.body.error || '系统错误'
      res.errorCode = error.body.status || 500
      errorCallback(toHump(res))
    }
  })
}
Object.keys(Url).forEach(key => {
  let value = Url[key]
  let mockVal = false
  let urlVal
  if (value instanceof Object) {
    mockVal = value.mock || false
    urlVal = value.url
  } else {
    urlVal = value
  }
  if (mockVal) {
    remote[key] = (scope, request, successCallback, errorCallback) => successCallback(Mock[key](request))
  } else {
    remote[key] = (scope, request, successCallback, errorCallback) => invoke(scope, urlVal, request, successCallback, errorCallback)
  }
})

export default remote

使用该模块的方法为,在需要的地方如下调用

import Remote from './remote/index.js'
...
Remote.login(this, {ticket: '123'}, response => {
  let user = response.result
  ...
}, error => {
  alert('登录失败' + (error.errorMsg ? ' : ' + error.errorMsg : ''))
})
...
Remote.logout(this, {}, response => {
  ...
}, error => {
  alert('退出登录失败' + (error.errorMsg ? ' : ' + error.errorMsg : ''))
})

基于VUE的SSR技术

随着VUE的快速发展,国内很多网络产品选用了VUE作为开发,但国内百度蜘蛛无内存抓取严重了影响了VUE的发展,VUE在2017年也大力的推荐SSR,相关产品也出现了NUXT等部署机制,本课程结合VUE讲解SSR模式,需要有VUE2.0基础和VUE构建基础。课程中涉及EXPRESS,NODE等内容。
  • 2017年06月20日 00:41

如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发

前后端分离分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦。前后端本来应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续...
  • dadiyang
  • dadiyang
  • 2018-03-25 15:03:01
  • 277

vue前端+java后端

方案一:  在jsp里写vue 也就是所把jquery换成vue就行 (不知道这样能做spa吗? 好像也能做, 感觉会很乱, 适合微型项目) 方案二: 既然使用vue,那就不要使用jsp了,j...
  • u010772673
  • u010772673
  • 2017-03-05 20:06:20
  • 20046

Vue(使用webpack)与java后端(使用springmvc与tomcat8)整合测试与部署方案

最近学习了一下基于vue和webpack的前端开发,于是就想着用Vue重写一遍我个人网站的代码,但是我的后端是老早以前就用java写好的(springmvc),这就涉及到Vue与java后端进行整合开...
  • qq_33256688
  • qq_33256688
  • 2017-11-01 20:17:10
  • 3802

基于VUE+THINKPHP的项目实践

项目为前后端分离,TP只用来写接口。记录下自己构建项目时遇到的问题及解决。 前后端开发人员协作,使用natapp内网穿透方便本地调试及后续微信调试 跨域问题,修改nginx配置解决,可了解CORS ...
  • differ_c
  • differ_c
  • 2017-07-14 14:59:04
  • 361

前后端分离-mock接口的功与过

场景  1)接口尚未开发完成 前后端项目中,后端接口开发完成之前,接口联调; 依赖的上游项目的接口尚未开发完成,需要接口联调测试; 2)    接口返回不满足目前需求 目前的接口...
  • wodeyijia911
  • wodeyijia911
  • 2017-03-27 22:47:45
  • 1072

实现前后端分离的mock!!!mock的使用

今天,我们打算花几分钟时间创建一个自己用来测试的 MockUp 服务器。 因为我是前端开发,所以这里使用 Node.js 创建一个简单的迷你工程来完成! 目标 用 curl 访问 m...
  • qq_24122593
  • qq_24122593
  • 2016-11-11 15:31:07
  • 4572

浅谈Vue.js与后端API交互——axios的应用

Vue.js中应用axios进行与后端API的交互
  • joyce_lcy
  • joyce_lcy
  • 2017-12-22 15:25:48
  • 2024

vue之mock.js模拟接口

项目开发后端接口如果没写好,前端调试可以使用mock.js模拟后台接口,当然数据是自定义的,后台接口写好后替换掉mock模拟的接口就行了。方法如下: 第一,打开cmd进入项目下载mock至项目中:n...
  • HZKang
  • HZKang
  • 2017-09-26 17:27:11
  • 753

Springboot+Vue 的前后端分离与合并方案

摘要: springboot+vue的前后端分离与合并 springboot和vue结合的方案网络上的主要有以下两种: 1. 【不推荐】在html中直接使用sc...
  • ax8785r8C32nef593
  • ax8785r8C32nef593
  • 2017-11-27 00:00:00
  • 4741
收藏助手
不良信息举报
您举报文章:前端:基于Vue框架的调用及mock后端接口整合
举报原因:
原因补充:

(最多只允许输入30个字)