[关闭]
@1002522146 2017-08-12T12:33:08.000000Z 字数 1264 阅读 560

mock数据

项目构建


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

  2. 设计JSON数据结构

  3. 利用Node+express提供模拟数据
    优点:可以在浏览器端访问
    缺点:如果是打包发布就无法访问模拟数据, 只能是测试时使用

修改build/dev-server.js

  1. //加载json数据
  2. var apiData = require('../src/mock/data.json')
  3. var home = apiData.home;
  4. //得到路由器
  5. var apiRouter = express.Router()
  6. //注册路由
  7. apiRouter.get('/home', function (req, res) {
  8. res.json({
  9. code: 0, //0代表正确数据
  10. data: seller
  11. })
  12. })
  13. //启用路由
  14. app.use('/api', apiRouter)
  15. //访问http://localhost:8080/api/home

4 .利用mockjs提供模拟数据

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

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

下载:
npm install mockjs --save

使用mock/mockServer.js

  1. import Mock from 'mockjs'
  2. import apiData from './data.json'
  3. Mock.mock('/api2/seller', {code:0, data:apiData.seller})
  4. Mock.mock('/api2/goods', {code:0, data:apiData.goods})
  5. 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

使用示例

  1. import VueResource from 'vue-resource'
  2. Vue.use(VueResource)
  3. //组件对象多了$http属性, 使用它发送ajax请求
  4. this.$http.get('/api2/seller').then((response) => {
  5. console.log(response.body)
  6. }, (response) => {
  7. console.log('失败了')
  8. })
  9. import axios from 'axios'
  10. axios.get('/api2/seller').then((response) => {
  11. console.log(response.body)
  12. }, (response) => {
  13. console.log('失败了')
  14. })
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注