diff --git "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/6.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/6.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.json"
index df679607af319c44219e75ac134453f8a943e1cc..76fb9881fe92628e204772d51cad69e2e2c518c7 100644
--- "a/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/6.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.json"
+++ "b/data/2.Vue\344\270\255\351\230\266/6.webpack\346\211\223\345\214\205\345\267\245\345\205\267/6.webpack\347\232\204\347\233\270\345\205\263\351\205\215\347\275\256/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "f288e76b11f24f40872cc190f1f1eeb6"
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.Mock/1.Mock\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/7.Mock/1.Mock\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json"
index b2ef4e7c32be47dc40a40987023e5773b738f329..80285b7b333d409d3ce82f16466f69669f0e8021 100644
--- "a/data/2.Vue\344\270\255\351\230\266/7.Mock/1.Mock\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json"
+++ "b/data/2.Vue\344\270\255\351\230\266/7.Mock/1.Mock\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "ff25ada43c004da08d40a23b98c3bcab"
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.Mock/2.Mock\350\257\255\346\263\225\350\247\204\350\214\203/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/7.Mock/2.Mock\350\257\255\346\263\225\350\247\204\350\214\203/exercises.json"
index cae7d5bed4da14d531720aa763dc46f2a736f608..472a676580a29c284f4ba83537e6f8cff29f9a84 100644
--- "a/data/2.Vue\344\270\255\351\230\266/7.Mock/2.Mock\350\257\255\346\263\225\350\247\204\350\214\203/exercises.json"
+++ "b/data/2.Vue\344\270\255\351\230\266/7.Mock/2.Mock\350\257\255\346\263\225\350\247\204\350\214\203/exercises.json"
@@ -1,6 +1,6 @@
 {
   "type": "code_options",
-  "author": null,
+  "author": "zhaoss",
   "source": "exercises.md",
   "notebook_enable": false,
   "exercise_id": "04390e4a329d47fea0922d0908683d33"
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.Mock/3.Mock\346\225\260\346\215\256\345\215\240\344\275\215\347\254\246/config.json" "b/data/2.Vue\344\270\255\351\230\266/7.Mock/3.Mock\346\225\260\346\215\256\345\215\240\344\275\215\347\254\246/config.json"
index 75b1bf89dcda53b04882ea53c62da65ba9ac5c4a..eae3b5c123f87ee81bf895c1238d721d0d1996b9 100644
--- "a/data/2.Vue\344\270\255\351\230\266/7.Mock/3.Mock\346\225\260\346\215\256\345\215\240\344\275\215\347\254\246/config.json"
+++ "b/data/2.Vue\344\270\255\351\230\266/7.Mock/3.Mock\346\225\260\346\215\256\345\215\240\344\275\215\347\254\246/config.json"
@@ -2,7 +2,9 @@
   "node_id": "vue-e39a5fbfbde6413c894ae9bd006511d4",
   "keywords": [],
   "children": [],
-  "export": [],
+  "export": [
+    "exercises.json"
+  ],
   "keywords_must": [],
   "keywords_forbid": []
 }
\ No newline at end of file
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/config.json" "b/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/config.json"
new file mode 100644
index 0000000000000000000000000000000000000000..03ab323d6450aa34eb6d8cc1b38ebb7819a7b25c
--- /dev/null
+++ "b/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/config.json"	
@@ -0,0 +1,16 @@
+{
+  "node_id": "vue-ea0937067ef3462daa6a9de2cbfa764a",
+  "keywords": [
+    "Mock.js 的安装与使用",
+    "Mock.js教程",
+    "Mock.js 的使用"
+  ],
+  "children": [],
+  "export": [
+    "exercises.json"
+  ],
+  "keywords_must": [
+    "Mock"
+  ],
+  "keywords_forbid": []
+}
\ No newline at end of file
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/exercises.json"
new file mode 100644
index 0000000000000000000000000000000000000000..14999d7db98048b2e659e7a8c7a4e69c8c1b6bf6
--- /dev/null
+++ "b/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/exercises.json"	
@@ -0,0 +1,7 @@
+{
+  "type": "code_options",
+  "author": null,
+  "source": "exercises.md",
+  "notebook_enable": false,
+  "exercise_id": "05ae338aa71f413898540a67101dba19"
+}
\ No newline at end of file
diff --git "a/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/exercises.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b66100fa685f8b814b378dfb30057d02ef52c7ab
--- /dev/null
+++ "b/data/2.Vue\344\270\255\351\230\266/7.Mock/4.Mock.js \347\232\204\345\256\211\350\243\205\344\270\216\344\275\277\347\224\250/exercises.md"	
@@ -0,0 +1,215 @@
+# Mock.js 的安装与使用
+
+ <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
+<br>
+安装
+
+我们可以看到官网上提供了很多关于不同前端项目的安装（有兴趣的同学可以看一下，`如果你和博主一样想在Vue项目中去使用的话那么就跳过下面这张图片我们看下面步骤`）
+<br>
+
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/92e563fbe17147deb3377fba81627546.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+
+<br>
+**下面就以Vue为例子来为大家演示**
+<br>
+
+1、创建vue项目
+<br>
+我们利用vue脚手架创建一个项目，不会访问这篇文章[https://blog.csdn.net/JHXL_/article/details/107631123](https://blog.csdn.net/JHXL_/article/details/107631123)
+![在这里插入图片描述](https://img-blog.csdnimg.cn/02259bc6a0b24ca886ff98fccd70eedb.png)
+<br>
+2、项目中安装mock.js和axios
+<br>
+因为我们的mock是拦截请求，所以我们需要安装axios进行请求，当然使用原生的ajax也是可以的！
+
+```php
+npm i mockjs -D
+npm i axios
+```
+<br>
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/7b2d52012005485894a3dfeec8f80ff7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br>
+
+**使用**
+<br>
+
+
+**1、创建mock文件**
+
+- 在src文件夹下面创建mock文件夹
+- 在mock文件夹中创建json文件夹
+- 在mock文件夹中创建index.js文件
+
+<br>
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/b347849d3c9641419c77a1304d44c172.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+
+<br>
+
+<br>
+**2、在mock下面的index.js中引入mock并创建mock响应内容**
+
+<br>
+
+```php
+// 引入 mock.js
+const Mock = require('mockjs')
+//Mock.mock  接口，请求方式，返回数据（数据就是json文件夹中的文件自行添加）
+Mock.mock('/user/list', 'get', require('./json/userList'))
+```
+**说明：**`Mock.mock()`
+此方法就是匹配我们的请求进行拦截然后返回模拟数据，有如下几种形式
+
+```php
+Mock.mock( rurl, template )
+```
+
+记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
+
+```php
+Mock.mock( rurl, function( options ) )
+```
+
+记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 `function(options)` 将被执行，并把执行结果作为响应数据返回。
+
+```php
+Mock.mock( rurl, rtype, template )
+```
+
+记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
+<br>
+
+```php
+Mock.mock( rurl, rtype, function( options ) )
+```
+
+记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
+
+当然我们的Mock还有好几种方法，更多方法可以去官网了解一下哦！
+
+<br>
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/c4fc6fc979484144a44e1724b3ffa2c2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_11,color_FFFFFF,t_70,g_se,x_16)
+
+<br>
+
+**3、我们在mock文件夹下面的json文件夹下创建我们引用的userList.json**
+
+<br>
+
+![在这里插入图片描述](https://img-blog.csdnimg.cn/85b88c060126450fb5f04551abff0120.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+
+<br>
+
+```php
+{
+    "status": 0,
+    "data|10": [
+        {
+            "id|+1": 1001,
+            "company": "10001",
+            "username": "ceshi1",
+            "age": 25
+        }
+    ],
+    "msg": ""
+}
+```
+<br>
+
+**4、接着我们就去我们的页面中测试请求**
+<br>
+找到我们页面，因为我们是新建的项目 所以我们删除页面中的东西 换成清爽的内容
+<br>
+![在这里插入图片描述](https://img-blog.csdnimg.cn/fa61e879aead49618b0e413a69679fe5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br>
+![在这里插入图片描述](https://img-blog.csdnimg.cn/0905d947e9fd4848b841a126a82bb1be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br>
+然后我们引入axios并注册事件就可以发送请求了
+
+```php
+<template>
+  <div>
+      <div @click="btnClick" class="btn">
+          这是测试
+      </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data() {
+    return {};
+  },
+
+  methods: {
+    async btnClick() {
+      const res = await axios.get("/user/list");
+      console.log(res.data.data);
+    },
+  },
+};
+</script>
+
+<style>
+</style>
+```
+
+然后我们点击发现还是请求了接口这是为什么呢？原来是我们前面少了一个步骤，那就是我们需要在main中去引用我们的mock
+<br>
+![在这里插入图片描述](https://img-blog.csdnimg.cn/6a3c3222810341c5b5d3c622ddd55ee5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br>
+再次尝试成功
+<br>
+![在这里插入图片描述](https://img-blog.csdnimg.cn/497963fb0e7a4c218b6cbfcacab98884.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16)
+<br>
+**总结**
+<br>
+通过上面的使用可以看到，我们前端发送的请求只要被我们的 Mock.mock 方法中的url匹配上就会被mock拦截，我们可以自行验证当我们使用mock并匹配上url后我们的network中是没有请求了，mock会根据我们定义的此条url的法则去返回对应的数据，在实际开发中其实前端很多后期工作都是在调试通接口后根据返回的数据进行的，通过mock我们前端就不会过多的依赖后端接口，只要知道后端返回数据的格式我们自己就可以通过mock.js自己生成数据进行模拟接口，从而在接口调通前我们也可以自己进行数据渲染和调试工作；
+
+<br>
+
+ <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
+
+根据上方小常识，判断下面描述错误得是？<br/><br/>
+
+## 答案
+```php
+Mock.mock( rurl, rtype, template )
+```
+
+记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
+
+## 选项
+
+### A
+
+
+```php
+Mock.mock( rurl, template )
+```
+
+记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
+
+### B
+
+```php
+Mock.mock( rurl, rtype, function( options ) )
+```
+
+记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
+
+### C
+
+```php
+Mock.mock( rtype, template )
+```
+
+记录数据模板。当拦截到匹配 rtype 的 Ajax 请求类型时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
+
+
+
diff --git a/data/tree.json b/data/tree.json
index d35cfcbc6fa7f561b3d1fa52b63eb98ff99b4c06..651b4373becdc28e5f00b3baec0f8ffbc270c1d0 100644
--- a/data/tree.json
+++ b/data/tree.json
@@ -1020,18 +1020,27 @@
                   {
                     "Mock是什么？": {
                       "node_id": "vue-b5fd0da867d74041a258647cd1f2b688",
-                      "keywords": [],
+                      "keywords": [
+                        "mock是什么",
+                        "什么是mock"
+                      ],
                       "children": [],
-                      "keywords_must": [],
+                      "keywords_must": [
+                        "mock"
+                      ],
                       "keywords_forbid": []
                     }
                   },
                   {
                     "Mock语法规范": {
                       "node_id": "vue-be7de8061d2443dead0d472870a1fa1b",
-                      "keywords": [],
+                      "keywords": [
+                        "Mock.js 的语法规范"
+                      ],
                       "children": [],
-                      "keywords_must": [],
+                      "keywords_must": [
+                        "Mock.js"
+                      ],
                       "keywords_forbid": []
                     }
                   },
@@ -1045,11 +1054,17 @@
                     }
                   },
                   {
-                    "Easy Mock创建接口": {
+                    "Mock.js 的安装与使用": {
                       "node_id": "vue-ea0937067ef3462daa6a9de2cbfa764a",
-                      "keywords": [],
+                      "keywords": [
+                        "Mock.js 的安装与使用",
+                        "Mock.js教程",
+                        "Mock.js 的使用"
+                      ],
                       "children": [],
-                      "keywords_must": [],
+                      "keywords_must": [
+                        "Mock"
+                      ],
                       "keywords_forbid": []
                     }
                   }