mock数据

项目构建

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

2. 设计JSON数据结构

3. 利用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

4 .利用mockjs提供模拟数据

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

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

下载:
npm install mockjs --save

使用mock/mockServer.js

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})

5.使用postman工具测试接口

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

6 .ajax请求mock数据接口

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

下载:
npm install vue-resource axios --save

使用示例

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('失败了')
})