Mock.js、json-server基本使用

最新推荐文章于 2024-06-12 00:09:02 发布

Cacra

最新推荐文章于 2024-06-12 00:09:02 发布

阅读量1.4k

点赞数

分类专栏：前端工具使用

本文链接：https://blog.csdn.net/u014465934/article/details/90021430

版权

前端同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

工具使用

20 篇文章 0 订阅

订阅专栏

Mock在开发者的眼中，泛指所有的客户端伪造数据的手段
1.JSON文件的方式就是最简单的mock行为（无法进行写操作等，模拟的行为有限）
2.自己写一个简单的API接口
3.第三方的工具（mock.js，但mock.js无法持久化数据、json-server）

1.mock.js

下面讲mock.js基本使用

官方文档和API：
http://mockjs.com/examples.html#DPD
https://github.com/nuysoft/Mock/wiki

看下面示例：

//下面一个demo示范了基本使用
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head>
<body>

	<p>mock</p>

    <script>

    	var arr=['momo','yanzi','ziwei']
        var obj={
            'host':'www.baidu',
            'port':'12345',
            'node':'selector'
        }

        //拦截请求，返回假数据
        Mock.mock('http://www.bai.com',{
            'firstName|3':'fei',//重复fei这个字符串 3 次，打印出来就是'feifeifei'。
            'lastName|2-5':'jiang',//重复jiang这个字符串 2-5 次。
            'big|+1':0, //属性值自动加 1，初始值为 0
            'age|20-30':25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型
            'weight|100-120.2-5':110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。
            'likeMovie|1':Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
            'friend1|1':arr,//从数组 arr 中随机选取 1 个元素，作为最终值。
            'friend2|+1':arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值
            'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。
            'life1|2':obj,//从属性值 obj 中随机选取 2 个属性
            'life1|1-2':obj,//从属性值 obj 中随机选取 1 到 2 个属性。
            'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
            
        })

        $.ajax({
            url:'http://www.bai.com',
            dataType:'json',
            success:function(e){
                console.log(e)
            }
        })
    </script>
</body>
</html>

结果示意图：

在这里插入图片描述

参考文章：https://www.cnblogs.com/zhenfei-jiang/p/7235339.html

2.json-server

官方API地址：https://github.com/typicode/json-server

准备工作：

1.Install JSON Server

npm install -g json-server

2.Create a db.json

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

3.Start JSON Server

json-server --watch db.json

我们就可以访问了：

http://localhost:3000
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

其他更多get/post/put/delete操作，还有自定义配置可以参考：

https://www.jianshu.com/p/bdbbd3314cf3
https://www.jianshu.com/p/9847dc1f5ca7

https://www.cnblogs.com/fly_dragon/p/9150732.html#top

https://segmentfault.com/a/1190000005793257

https://blog.csdn.net/weixin_40817115/article/details/81237128
https://blog.csdn.net/weixin_40817115/article/details/81281454

我们使用postman测试：

1.post

//原始数据
[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  }
]

在这里插入图片描述

form-data它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

x-www-from-urlencoded会将表单内的数据转换为键值对，比如name=java&age = 23。

Cacra

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Mock.js、json-server基本使用

Mock在开发者的眼中，泛指所有的客户端伪造数据的手段1.JSON文件的方式就是最简单的mock行为（无法进行写操作等，模拟的行为有限）2.自己写一个简单的API接口3.第三方的工具（mock.js，但mock.js无法持久化数据、json-server）1.mock.js下面讲mock.js基本使用官方文档和API：http://mockjs.com/examples.html#D...
复制链接

扫一扫

专栏目录