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

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

二、关于RAP2的一些学习网址
mock.js网址
RAP2网址
RAP2官方文档
mock.js语法规范文档

三、RAP2使用步骤

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

  2. 仓库建好以后,我们进入仓库,点击新建接口在这里插入图片描述
    在这里插入图片描述

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

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

  5. 根据所创建的数据类型不同,左侧会出现pic_8所示“+”号,点击“+”号可以向其内部添加属性,
    图pic_8为按照填写的生成规则生成的响应数据。【生成规则有7中格式,关于生成规则可以查看文章开头的链接mock.js语法规范文档】,例如图中data属性的生成规则为9,表示生成9个元素。id属性的生成规则为1-9999,表示生成1-9999的随机数字。
    在这里插入图片描述

  6. mock.js文档中关于mock.random的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]),可以用在初始值的设置中,随机生成一段内容。
    在这里插入图片描述

  7. 如果我们想要自己定义数据的话那么请跳过5和6。根据所创建的数据类型不同,左侧会出现pic_8所示“+”号,点击“+”号可以向其内部添加属性,按照填写的生成规则生成的响应数据。提示:数据类型为String,否则自定义数据不会执行;生成规则+1,不然也不会执行哦!
    在这里插入图片描述
    在这里插入图片描述
    好了,一个简单的模拟数据就完成了,大家可以尝试一下哦!

猜你喜欢

转载自blog.csdn.net/qq_42363090/article/details/93505301
今日推荐