Mock.js、json-server基本使用

红太狼 2022-02-03 09:47 450阅读 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][http_mockjs.com_examples.html_DPD]  
[https://github.com/nuysoft/Mock/wiki][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>

结果示意图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

参考文章：[https://www.cnblogs.com/zhenfei-jiang/p/7235339.html][https_www.cnblogs.com_zhenfei-jiang_p_7235339.html]

**2.json-server**

官方API地址：[https://github.com/typicode/json-server][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_bdbbd3314cf3]  
[https://www.jianshu.com/p/9847dc1f5ca7][https_www.jianshu.com_p_9847dc1f5ca7]

[https://www.cnblogs.com/fly\_dragon/p/9150732.html\#top][https_www.cnblogs.com_fly_dragon_p_9150732.html_top]

[https://segmentfault.com/a/1190000005793257][https_segmentfault.com_a_1190000005793257]

[https://blog.csdn.net/weixin\_40817115/article/details/81237128][https_blog.csdn.net_weixin_40817115_article_details_81237128]  
[https://blog.csdn.net/weixin\_40817115/article/details/81281454][https_blog.csdn.net_weixin_40817115_article_details_81281454]

我们使用postman测试：

1.post

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

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

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

[http_mockjs.com_examples.html_DPD]: http://mockjs.com/examples.html#DPD
[https_github.com_nuysoft_Mock_wiki]: https://github.com/nuysoft/Mock/wiki
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220203/5ffecb693b074584bd122f62cce81fcc.png
[https_www.cnblogs.com_zhenfei-jiang_p_7235339.html]: https://www.cnblogs.com/zhenfei-jiang/p/7235339.html
[https_github.com_typicode_json-server]: https://github.com/typicode/json-server
[https_www.jianshu.com_p_bdbbd3314cf3]: https://www.jianshu.com/p/bdbbd3314cf3
[https_www.jianshu.com_p_9847dc1f5ca7]: https://www.jianshu.com/p/9847dc1f5ca7
[https_www.cnblogs.com_fly_dragon_p_9150732.html_top]: https://www.cnblogs.com/fly_dragon/p/9150732.html#top
[https_segmentfault.com_a_1190000005793257]: https://segmentfault.com/a/1190000005793257
[https_blog.csdn.net_weixin_40817115_article_details_81237128]: https://blog.csdn.net/weixin_40817115/article/details/81237128
[https_blog.csdn.net_weixin_40817115_article_details_81281454]: https://blog.csdn.net/weixin_40817115/article/details/81281454
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220203/5b346b325f604aa88fd04a6f3a101b74.png