From 1ba74e0c51dd08ae03adf0212aa12184a256ee10 Mon Sep 17 00:00:00 2001 From: zhaoss Date: Mon, 9 May 2022 13:33:32 +0800 Subject: [PATCH] =?UTF-8?q?2.7.4=E5=B0=8F=E8=8A=82=E4=B9=A0=E9=A2=98?= =?UTF-8?q?=E3=80=81=E5=85=B3=E9=94=AE=E5=AD=97=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exercises.json" | 2 +- .../exercises.json" | 2 +- .../exercises.json" | 2 +- .../config.json" | 4 +- .../config.json" | 16 ++ .../exercises.json" | 7 + .../exercises.md" | 215 ++++++++++++++++++ data/tree.json | 29 ++- 8 files changed, 266 insertions(+), 11 deletions(-) create mode 100644 "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" create mode 100644 "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" create mode 100644 "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" 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 df67960..76fb988 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 b2ef4e7..80285b7 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 cae7d5b..472a676 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 75b1bf8..eae3b5c 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 0000000..03ab323 --- /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 0000000..14999d7 --- /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 0000000..b66100f --- /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 的安装与使用 + +
小常识：
+
+安装 + +我们可以看到官网上提供了很多关于不同前端项目的安装（有兴趣的同学可以看一下，`如果你和博主一样想在Vue项目中去使用的话那么就跳过下面这张图片我们看下面步骤`） +
+ + +![在这里插入图片描述](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) + +
+**下面就以Vue为例子来为大家演示** +
+ +1、创建vue项目 +
+我们利用vue脚手架创建一个项目，不会访问这篇文章[https://blog.csdn.net/JHXL_/article/details/107631123](https://blog.csdn.net/JHXL_/article/details/107631123) +![在这里插入图片描述](https://img-blog.csdnimg.cn/02259bc6a0b24ca886ff98fccd70eedb.png) +
+2、项目中安装mock.js和axios +
+因为我们的mock是拦截请求，所以我们需要安装axios进行请求，当然使用原生的ajax也是可以的！ + +```php +npm i mockjs -D +npm i axios +``` +
+ +![在这里插入图片描述](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) +
+ +**使用** +
+ + +**1、创建mock文件** + +- 在src文件夹下面创建mock文件夹 +- 在mock文件夹中创建json文件夹 +- 在mock文件夹中创建index.js文件 + +
+ +![在这里插入图片描述](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) + +
+ +
+**2、在mock下面的index.js中引入mock并创建mock响应内容** + +
+ +```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 生成模拟数据，并作为响应数据返回。 +
+ +```php +Mock.mock( rurl, rtype, function( options ) ) +``` + +记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。 + +当然我们的Mock还有好几种方法，更多方法可以去官网了解一下哦！ + +
+ +![在这里插入图片描述](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) + +
+ +**3、我们在mock文件夹下面的json文件夹下创建我们引用的userList.json** + +
+ +![在这里插入图片描述](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) + +
+ +```php +{ + "status": 0, + "data|10": [ + { + "id|+1": 1001, + "company": "10001", + "username": "ceshi1", + "age": 25 + } + ], + "msg": "" +} +``` +
+ +**4、接着我们就去我们的页面中测试请求** +
+找到我们页面，因为我们是新建的项目 所以我们删除页面中的东西 换成清爽的内容 +
+![在这里插入图片描述](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) +
+![在这里插入图片描述](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) +
+然后我们引入axios并注册事件就可以发送请求了 + +```php + + + + + +``` + +然后我们点击发现还是请求了接口这是为什么呢？原来是我们前面少了一个步骤，那就是我们需要在main中去引用我们的mock +
+![在这里插入图片描述](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) +
+再次尝试成功 +
+![在这里插入图片描述](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) +
+**总结** +
+通过上面的使用可以看到，我们前端发送的请求只要被我们的 Mock.mock 方法中的url匹配上就会被mock拦截，我们可以自行验证当我们使用mock并匹配上url后我们的network中是没有请求了，mock会根据我们定义的此条url的法则去返回对应的数据，在实际开发中其实前端很多后期工作都是在调试通接口后根据返回的数据进行的，通过mock我们前端就不会过多的依赖后端接口，只要知道后端返回数据的格式我们自己就可以通过mock.js自己生成数据进行模拟接口，从而在接口调通前我们也可以自己进行数据渲染和调试工作； + +
+ +
小测试：
+ +根据上方小常识，判断下面描述错误得是？

+ +## 答案 +```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 d35cfcb..651b437 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": [] } } -- GitLab