前后端分离之数据mock

为了做到前后端并行开发，数据mock就成为环境搭建的重要一环

#1.1 Web应用前后端分离

• 后台向前台提供API接口,只负责数据的提供和计算，而完全不处理展现
• 前台通过Http(Ajax)请求获取数据,　在浏览器端动态构建界面显示数据

#1.2 利用Node+express提供模拟数据

• 优点：可以在浏览器端访问
• 缺点：如果是打包发布就无法访问模拟数据, 只能是测试时使用

修改build/dev-server.js

//加载json数据
var apiData = require('../src/mock/data.json')
var home = apiData.home;

//得到路由器
var apiRouter = express.Router()

//注册路由
apiRouter.get('/home', function (req, res) {
    res.json({
      code: 0,   //0代表正确数据
      data: seller
    })
})
//启用路由
app.use('/api', apiRouter)

//访问http://localhost:8080/api/home

#1.3 利用mockjs提供模拟数据

Mockjs: 用来拦截ajax请求, 生成随机数据返回

• 优点：不可以在浏览器端访问
• 缺点：打包发布运行模拟接口也是可以用的

import Mock from 'mockjs'  
import apiData from './data.json'

Mock.mock('/api2/seller', {code:0, data:apiData.seller})
Mock.mock('/api2/goods', {code:0, data:apiData.goods})
Mock.mock('/api2/ratings', {code:0, data:apiData.ratings})

#1.4 使用postman工具测试接口

• postman是用来测试API接口的chrome插件
• postman也是一个活接口文档

#1.5 ajax请求mock数据接口

• vue-resource是用于ajax请求的vue插件
• axios是浏览器/服务器端通用的ajax请求库

//使用示例

import VueResource from 'vue-resource' 
Vue.use(VueResource)

//组件对象多了$http属性, 使用它发送ajax请求
this.$http.get('/api2/seller').then((response) => {
  console.log(response.body)
}, (response) => {
  console.log('失败了')
})

import axios from 'axios'  
axios.get('/api2/seller').then((response) => {
  console.log(response.body)
}, (response) => {
  console.log('失败了')
})

#二、数据mock思路

• 在client端处数据mock
• 在server端mock

• 第一种方式拦截了请求的发出，直接返回mock的数据，而第二种方式请求则真实地发出，只是在server端进行route拦截
• 前后端分离的方式，就是在传统开发模式中加了一个node层，这样数据mock完全可以在node server端完成，基本思路如下

#2.1 mock思路说明

• 只有线下开发模式，才会需要进行数据mock
• 根据请求的url，拼接形成一个file path
• 为了避免node缓存，删除require.cache(path)
• 读取require(path) ，如果该文件不存在或读取失败，则跳转到失败路由。这样简单的数据mock就实现了

#2.2 代码描述

// 伪代码
if (process.env.NODE_ENV === 'development') {
  router.set('/api/*', mockapi)
}
 
function mockapi(req, res, opts) {
    var basePath = url.parse(req.url).pathname;
         
    try {
        var findPath = require.resolve(prefixPath + basePath + '.js');
        delete require.cache[findPath]
        var result = require(findPath);
    } catch (err) {
        return next(err);
    }
    if (typeof result === 'function') {
        return result(req, res, opts);
    }
    if (typeof result.status === 'undefined' || typeof result.body &#