【Mock.js】前后端分离中前端模拟后端返回数据的实践和思考

在前后端分离的开发场景中，有低耦合，独立开发的优点。但是在各自开发的过程中，如果事先并没有统一接口Api，那么就存在前台已经开发完成，但是后端接口迟迟不能交付的情况，这个时候前端同学可以借助于Mock.js来模拟后端返回的数据。

一在requireJS中的使用

Mock.js的官方文档很全面，按照文档和自己当前的项目架构来实现一个demo。

首先，在app.js中引用mock.js.

// 配置 Mock 路径
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})

在要使用的模块中中引入，并创建一个mock data。在这里要注意，第一个参数是ajax请求的url，第二个参数是模拟这个请求返回的数据，数据的具体规则可以参考官网。

// 加载 Mock
require(['mock'], function(Mock){
     Mock.mock('http://x.x.xx.xx:8086/demo/market/getList',{
        'code':0,
        'data|1-10':[{
            'id|+1':1,
            'avatar':'http://via.placeholder.com/30x30',
            'poster':'http://via.placeholder.com/345x200',
            'name': '@name',
            'posterTime':'@time',
            'desc':'@title',
            'price':'￥4000',
            'isSale':'@boolean',
            'category':'@word(5)'
        }],
        'msg':'success'
    })
})

最后，market/getList的请求就会被拦截，并返回符合上述规则的数据，我们可以拿到模拟数据进行渲染操作。

上述的整个操作会让前端开发更顺利和流畅，在不依赖后端数据的情况下加快进度。

二上述开发模式的缺陷

上面开发模式存在一定的缺陷，虽然模拟的后台数据有了，前端的工作可以顺利进行下去，但是等到后端接口开发完成，由于前后端在开发之前没有一致的接口文档。所以有可能真实的数据中字段名和模拟数据字段名不一致，前后还是得重新修改每个接口中的字段，请求参数名，请求url等。

所以成熟的前后端分离中，第一步应该是前后端开发订制一致的接口，然后再各自开发，联调。

以上，是在开发过程中的一点思考，工作流程的改进会使开发进度加快，提升交付效率。

【Mock.js】前后端分离中前端模拟后端返回数据的实践和思考

猜你喜欢