前后端分离之数据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

`# 一、学前预热`



为了做到前后端并行开发，数据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