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

末蓝、 2023-07-22 04:58 17阅读 0赞

![format_png][]

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
     <script>
            var xhr = new XMLHttpRequest();
            xhr.open('GET','/hello.json',true);
            xhr.send();
    
            xhr.onload = function(){
                if(xhr.status===200){
                    var data = xhr.responseText;
                    console.log(JSON.parse(data));
                    
                }
            }
        </script>
    
    //json文件
              {
                "name":"饥人谷",
                "age":2
              }

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

![format_png 1][]

image.png

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

1.  使用 [http://easy-mock.com/][http_easy-mock.com]
2.  使用 [http://rapapi.org/org/index.do][http_rapapi.org_org_index.do]
3.  使用 server-mock  
    以第一种为例，进入网站后建立个人项目。
    
     
    
    ![format_png 2][]
    
    image.png
    
     
    
    ![format_png 3][]
    
    image.png
    
     
    
    ![format_png 4][]
    
    image.png
    
     
    
    ![format_png 5][]
    
    image.png
    
     
    
    ![format_png 6][]
    
    image.png
    
     
    
    创建之后进行查看：
    
     
    
    ![format_png 7][]
    
    image.png
    
      
    控制台输出结果：
    
    ![format_png 8][]

[format_png]: /images/20230528/f2794b7e1244497c9dcf848ceae7c59a.png
[format_png 1]: /images/20230528/cdd371bedac8479c8f202300f9e937fa.png
[http_easy-mock.com]: http://easy-mock.com/
[http_rapapi.org_org_index.do]: http://rapapi.org/org/index.do
[format_png 2]: /images/20230528/5530e20a772142f98620f241f6873d73.png
[format_png 3]: /images/20230528/b2c740b647354458a10a46c2ae638e60.png
[format_png 4]: /images/20230528/4b9aee2461d74dcd9fe1b8c446b08fc4.png
[format_png 5]: /images/20230528/6dad68da18d94c02bfa55b1fee0317d5.png
[format_png 6]: /images/20230528/b4bac78c6d3545f68135f9cc0c55557c.png
[format_png 7]: /images/20230528/b03511b87569472b8db0157522db4ba0.png
[format_png 8]: /images/20230528/77226efc0f0540d89de59f95487daacc.png