moke.js的学习总结

最新推荐文章于 2023-02-02 20:36:28 发布

_sunpl

最新推荐文章于 2023-02-02 20:36:28 发布

阅读量2.1k

点赞数 1

分类专栏：前端个人总结文章标签： mock.js 前端前后端分离

本文链接：https://blog.csdn.net/weixin_43752064/article/details/86154129

版权

个人总结同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

首先什么是mock.js

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

mock.js特点？

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

mock.js的网络地址

<script src="http://mockjs.com/dist/mock.js"></script>

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

下载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>

_sunpl

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
moke.js的学习总结

首先什么是mock.jsMock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：mock.js特点？1.前后端分离,让前端攻城师独立于后端进行开发。2.增加单元测试的真实性3.通过随机数据，模拟各种场景。4.开发无侵入5.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响...
复制链接

扫一扫