mock.js数据模拟

2016-12-2    分类: react native

mock.js说白了就是模拟一堆类似json的数据提供给前端测试,在后台和数据还没有出来时候是可以提前利用mock.js模拟一些数据对前端来说是很有帮助的。

 http://rap.taobao.org/org/index.do配合mock.js使用。

1,首先到网站注册一个帐号

 

2,点击导航的“团队”---下拉点“创建团队”---弹出“创建团队”红点随便填---点“创建产品线”---弹出“添加产品线”红点随便填---点刚刚创建的产品线,点击“创建分组”---弹出“创建分组”红点随便填

完成以上步骤就会看到一个大型的加号,点击

add_ceshi

之后弹窗“创建项目”红点随便填,这时候项目就创建完成了。

 

3,点击刚刚创建完成的项目就可以开始生成数据了,如:

mock_ceshi

点击“编辑”

 

 

mock_ceshi2

添加接口,上图可以根据自己的需要设置

 

在根据下面案例填写:

mock_ceshi3

备注的规则都是mock.js的写法,这个需要自己去查看mock.js的api,官方文档

添加字段点击“添加参数”,为字段添加子内容点击左边绿色“加号”

完成之后点击“秒存”

 

在点击此按钮,mock_ceshi4

 

之后会看到下面的页面:

mock_ceshi5

请求的参数随便填写,之后点击“请求”,下面就会列出我们刚刚设置好的数据json格式了。

在页面的右下角,会得到一段url,如类似:

mock_ceshi6

记住它,这时候需要mock.js配合来生成数据,直接访问这地址得到的只是mock.js规则而已,并没有生成我们需要的批量数据。

 

下载mock.js模块:

sudo npm i mockjs@1.0.0 --save

温馨提示:在node.js中使用mock.js模块记得要把canvas功能删除,避免一些依赖的麻烦。

到node_modules/mockjs/dist下的mock.js文件,搜索'canvas'关键词删除dataImage方法

 

这里我用react native环境来使用mock.js,直接贴代码:

var Mock=require('mockjs');
.
.
.
componentDidMount:function () {
  fetch('http://rap.taobao.org/mockjs/10888/api/creations?reqParam=123')
   .then(function (data) {
      return data.json(); //将数组里面的内容,抽出来拼成一段字符串
   })
   .then(function (data) {
      var data1=Mock.mock(data); //经过mock处理,这的data1就是我们需要的批量数据了
      //console.log(data1);
   }.bind(this))
   .catch((error) => {
    console.error(error);
   });
}

mock_ceshi7