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