moke.js的学习总结

首先什么是mock.js

Mock.js (官网http://mockjs.com/)是一款模拟数据生成器,旨在帮助前端攻城师独立
于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

mock.js特点?

1.前后端分离,让前端攻城师独立于后端进行开发。
2.增加单元测试的真实性
3.通过随机数据,模拟各种场景。
4.开发无侵入
5.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
6.用法简单
7.符合直觉的接口
8.数据类型丰富
9.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
10.支持支持扩展更多数据类型,支持自定义函数和正则。

mock.js的网络地址


当然你如果联网的地址用着不爽,也可以直接下载,地址如下

下载Mock.js: https://github.com/nuysoft/Mock

3. Mock.js入门案例

3.1. 模拟数据

需求:模拟一个用户列表,用户两个字段组件:ID、姓名

显示效果如下:

{
    "list": [
        {
            "id": 1,
            "name": "测试"
        },
        {
            "id": 1,
            "name": "测试"
        },
        {
            "id": 1,
            "name": "测试"
        },
        {
            "id": 1,
            "name": "测试"
        },
        {
            "id": 1,
            "name": "测试"
        }
    ]
}

Mock模拟代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Mock入门案例</title>
  <script src="js/vuejs-2.5.16.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/mock-min.js"></script>
</head>

<body>
  <div id="app">
  
  </div>

</body>
<script>
  var data = Mock.mock({
    //list是一个数组,包含5个元素
    'list|5':[
        {
            'id':1,
            'name':'测试'
        }
    ]
  })
//每一个层级比上一个多2个空格
  console.log(JSON.stringify(data,null,2 ))

</script>

</html>

你可能感兴趣的:(前端,个人总结)