使用mock.js生成前端测试数据

 

使用mock.js生成前端测试数据_第1张图片

image.png

概述:

Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发。如果你正在开发一个前端页面,可是后台还没有完成供你调用的API,并且数据格式已经确定,那么你就可以使用Mock.js模拟相关的接口,生成假数据来查看页面的效果。Mock.js的功能,生成随机数据,拦截Ajax请求。

如何mock数据?

1. 安装Node.js,通过http-server开启本地服务器。

获取端口http://127.0.0.1:8080
然后通过在文件夹创建html和json来测试数据
实例:

//html
 

//json文件
          {
            "name":"饥人谷",
            "age":2
          }

我们打开浏览器的控制台,就能看到输出的数据:

 

使用mock.js生成前端测试数据_第2张图片

image.png

2. 利用线上平台来mock数据

  1. 使用 http://easy-mock.com/
  2. 使用 http://rapapi.org/org/index.do
  3. 使用 server-mock
    以第一种为例,进入网站后建立个人项目。

     

    使用mock.js生成前端测试数据_第3张图片

    image.png

     

    使用mock.js生成前端测试数据_第4张图片

    image.png

     

    使用mock.js生成前端测试数据_第5张图片

    image.png

     

    使用mock.js生成前端测试数据_第6张图片

    image.png

     

    使用mock.js生成前端测试数据_第7张图片

    image.png

     

    创建之后进行查看:

     

    使用mock.js生成前端测试数据_第8张图片

    image.png


    控制台输出结果:

    使用mock.js生成前端测试数据_第9张图片

     

你可能感兴趣的:(HTML5)