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