美文网首页web前端知识点
使用RAP2模拟假数据实现前后端分离

使用RAP2模拟假数据实现前后端分离

作者: 阿诺贝尔 | 来源:发表于2018-11-21 15:29 被阅读127次
一、为什么使用RAP2

在一个项目的开发中,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口可能还没有写完, 当前端没有后端数据支持的情况下,我们使用mock.js(mock.js用于生成随机数据,拦截ajax请求)模拟假数据,实现前后端分离。开发中我们也可以使用RAP2(这里面生成的数据基于mock.js)在线模拟假数据。

二、关于RAP2的一些学习网址

http://mockjs.com/ mock.js网址
http://rap2.taobao.org/ RAP2网址
https://github.com/thx/rap2-delos RAP2官方文档
https://github.com/nuysoft/Mock/wiki/Syntax-Specification mock.js语法规范文档

三、与RAP2同类型的jsonplaceholder

jsonplaceholder也是模拟假数据,和RAP2差别是jsonplaceholder模拟出来的假数据只有固定值。

http://jsonplaceholder.typicode.com/

四、RAP2使用步骤

1.进入RAP2网址账号注册成功以后,我们首先创建一个项目仓库,如下图所示:


项目仓库
项目仓库2

2.仓库建好以后,我们进入仓库,点击新建接口


项目仓库3
项目仓库4
3.新建接口完毕以后,我们可以看到如下图所示,我们点击商品列表,右图可以根据设置请求参数,和响应内容(点击绿色的编辑按钮),右图中还有一个地址,点击这个地址,进入以后内容如图 项目仓库6 所示
项目仓库5
项目仓库6

4.接下来设置请求参数和响应参数,这里以响应参数举例,点击响应内容右边的新建创建响应属性,如下图所示:


项目仓库7
5.根据所创建的数据类型不同,左侧会出现pic_8所示“+”号,点击“+”号可以向其内部添加属性,
图 项目仓库8 为按照填写的生成规则生成的响应数据。【生成规则有7种格式,关于生成规则可以查看文章开头的链接mock.js语法规范文档】,例如图 项目仓库8 中data属性的生成规则为9,表示生成9个元素。id属性的生成规则为1-9999,表示生成1-9999的随机数字。
项目仓库8
6.mock.js文档中关于mock.random的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]),可以用在初始值的设置中,随机生成一段内容。
项目仓库9

相关文章

  • 使用RAP2模拟假数据实现前后端分离

    一、为什么使用RAP2 在一个项目的开发中,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口可能还没有写完...

  • 使用RAP2模拟假数据实现前后端分离

    一、为什么使用RAP2 在一个项目的开发中,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口可能还没有写完...

  • json-server模拟数据

    json-server可以模拟后端提供的数据,让前端流程走通,实现前后端分离json-server模拟数据 大概流...

  • 2019-11-28

    关于mockjs模拟数据的使用 一、 本文主要结合webpack+vue+mockjs,前后端分离,模拟后端接口数...

  • Vue<mock.js的使用>

    效果图: vue+mockjs 模拟数据,实现前后端分离开发 首先 npm install mockjs --sa...

  • mock

    mock使用优势:前后端同时开发的时候,后端接口数据没有出来,前端可以mock假数据,模拟开发 1,安装mock依...

  • mockjs

    mockjs是用来模拟后台请求,并生成模拟数据的一个插件。实现前后端分离开发,前端不用在后端功能还未开发完成的情况...

  • 前后端分离-独立于后端的前端开发

    题目:前后端分离-独立于后端的前端开发简介:如何构建 Web 前端 Mock Server 前后端分离真实数据模拟...

  • Mock

    一、 Mock数据:实现前端分离开发,在后端没有准备好数据接口的情况,前端也可自行模拟数据 二、 mock数据...

  • Mock

    一、 Mock数据:实现前端分离开发,在后端没有准备好数据接口的情况,前端也可自行模拟数据 二、 mock数据...

网友评论

    本文标题:使用RAP2模拟假数据实现前后端分离

    本文链接:https://www.haomeiwen.com/subject/kdkqqqtx.html