用mock.js模拟前端开发调用后台数据

野性酷女 2022-12-12 04:59 172阅读 0赞

导语：  
相信大家都遇到过一个问题，前端开发要用到api，但是后端的人员还没开发好，那可怎么办啊，前端没办法调试，别紧张，用mock解决这个问题。

### 本文的目录 ###

*  一，mock的作用
 *  二，如何使用mock？
 *   *  1，哪里需要写哪里法
     *  2，用mock拦截请求
     *  3，Mock Server

# 一，mock的作用 #

当后端api接口还没开发好，前端又想马上调试，就可以使用 mock，你可以在开发环境代码内置 Mock，拦截请求，模拟真实 API 返回。

# 二，如何使用mock？ #

先安装一下

npm install mockjs

## 1，哪里需要写哪里法 ##

var data = Mock.mock({ 
    	"string|1-10": "#",
    	"object": { 
    	   "313200": "上海市",
    	   "444400": "广东省"
    	 },
    	 "name": "xiaomizhou"
    })
    //这样直接写在js代码中，就可以随机生产1-10个“#”的字符串。

**优点和缺点**

简单方便使用，哪里需要就写在哪里。

缺点就是跟业务代码混合在一起，日后后端api开发好了，再来改这个地方就很麻烦，所以不推荐在实际开发中使用这个方法。

## 2，用mock拦截请求 ##

**优点和缺点**

相对于上一种，也是属于哪里需要写在哪里，但是这个东西可以存放在一个文件中，利用开发模式或者生产模式来区别是调用那个文件，这样就完美解决了代码混合的问题了。

而且这个可以发出网络请求，虽然被拦截了。

## 3，Mock Server ##

这种就是自己搭建一个mock服务，临时性的充当一下后台服务，在这个服务中，我们无需数据库的连接，数据库的优化等等关于后台的操作，只需要用mock生成随机的数据返回就行了。

而且这个可以使用一些现成的平台来搭建，大大的方便了我们的开发过程。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]  
这个网址可以免费搭建mock平台服务，而且有详细的教程，我这里就不多陈述了，网址的地址：[https://help.eolinker.com/\#/tutorial/?groupID=c-441&productID=13][https_help.eolinker.com_tutorial_groupID_c-441_productID_13]

**补充**：  
![在这里插入图片描述][20200902155530706.jpg_pic_center]  
微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/52235c8f63f74a8cb05089e441f2647e.png
[https_help.eolinker.com_tutorial_groupID_c-441_productID_13]: https://help.eolinker.com/#/tutorial/?groupID=c-441&productID=13
[20200902155530706.jpg_pic_center]: /images/20221123/306375273c4f43d8ac7c3fca379b0563.png
[20200825125805528.png_pic_center]: /images/20221123/633a401c81894a2ea295ab0907df80c3.png
[node]: /images/20221123/db103801ef4a4131b2669441be83d594.png