@1002522146
2017-08-12T12:33:08.000000Z
字数 1264
阅读 561
项目构建
Web应用前后端(台)分离:
后台向前台提供API接口,只负责数据的提供和计算,而完全不处理展现
前台通过Http(Ajax)请求获取数据, 在浏览器端动态构建界面显示数据
设计JSON数据结构
利用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('失败了')
})