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

最新推荐文章于 2024-07-30 12:11:30 发布

Lin_Dan_Dan

最新推荐文章于 2024-07-30 12:11:30 发布

阅读量1.4k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/u010176097/article/details/81201902

版权

本文介绍了在前后端分离的开发模式下，如何使用Mock.js来模拟后端返回的数据，以解决后端接口未及时交付的问题。在requireJS中引入Mock.js并创建模拟数据，使前端开发能够独立进行。然而，该方法的缺点在于缺乏统一的接口文档，可能导致实际接口字段与模拟数据不一致，需要后期调整。因此，强调了前期制定一致接口的重要性，以提高开发效率。

摘要由CSDN通过智能技术生成

在前后端分离的开发场景中，有低耦合，独立开发的优点。但是在各自开发的过程中，如果事先并没有统一接口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',