图文并茂quasar2.6+vue3+ts+vite创建项目并引入mockjs,mockjs 拦截ajax请求的原理是什么，quasar为什么要使用boot?

每天都要开心(^▽)哇：

首先呢，我们来创建项目

• 执行下面命令，开始创建项目啦

$ npm i -g @quasar/cli
$ npm init quasar
1
2

• 下面是我的选项，仅供参考哇

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... quasar-test-pro20220627
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... quasar-test-pro20220627
√ Project product name: (must start with letter if building mobile apps) ... Quasar App
√ Project description: ... xiaojin love code
√ Author: ... xiaojin
√ Pick a Vue component style: » Composition API
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » ESLint, State Management (Pinia), Axios, Vue-i18n
√ Pick an ESLint preset: » Airbnb
1
2
3
4
5
6
7
8
9
10
11
12
13

• 创建成功啦

接下来开始引入mock.js

先思考一下，mockjs 拦截ajax请求的思路是什么？？

• 我看到这个代码

// 避免循环依赖
if (XHR) XHR.Mock = Mock

/*
    * Mock.mock( template )
    * Mock.mock( function() )
    * Mock.mock( rurl, template )
    * Mock.mock( rurl, function(options) )
    * Mock.mock( rurl, rtype, template )
    * Mock.mock( rurl, rtype, function(options) )
    根据数据模板生成模拟数据。
*/
Mock.mock = function(rurl, rtype, template) {
    // Mock.mock(template)
    if (arguments.length === 1) {
        return Handler.gen(rurl)
    }
    // Mock.mock(rurl, template)
    if (arguments.length === 2) {
        template = rtype
        rtype = undefined
    }
    // 拦截 XHR
    if (XHR) window.XMLHttpRequest = XHR
    Mock._mocked[rurl + (rtype || '')] = {
        rurl: rurl,
        rtype: rtype,
        template: template
    }
    return Mock
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• 通过这段代码，我们可以很清晰了解到，当if (XHR) window.XMLHttpRequest = XHR XMLHttpRequest 就被重写拦截了呢
• mockJS实现拦截，是模拟了XMLHttpRequest对象。
• 重写open、send等方法，方法调用时，只是普通函数的调用，不会发送真正的请求
• 我们等下测试的时候，就会很直观发现，浏览器并没有发送请求，而是执行了函数而已

下面，我们开始引入mockjs

• 安装vite-plugin-mock

npm i mockjs -D
npm i vite-plugin-mock -D

1
2
3

• 在根目录创建文件 mock\index.ts，这个文件用来编写总的mock管理

//  mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';

// 逐一导入您的mock.ts文件
// 如果使用vite.mock.config.ts，只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import testModule from './source/login';

export function setupProdMockServer() {
  createProdMockServer([...testModule]);
}

1
2
3
4
5
6
7
8
9
10
11
12

• 继续创建文件mock\source\login.ts,这个文件放一个我们的测试模拟接口

import { MockMethod } from 'vite-plugin-mock';

export default [
  {
    url: '/api/getUserInfo',
    method: 'get',
    response: () => 'hello world and get mockData',
  },
] as MockMethod[]; // 定义数据格式的

1
2
3
4
5
6
7
8
9
10

关键步骤来啦，接下来我们先了解一下：

quasar为什么要使用boot?

• “quasar”: "^2.6.0"里,在quasar 框架中boot 文件通常在root Vue被实例化之前运行,比如注册和初始化自己的依赖（例如vue组件，库等）或者是app启动程序的一些简单配置
• 由于没有main.js文件（因此quasar CLI才能为SPA/PWA/SSR/Cordova/Electron无缝隙初始化与构建时使用相同的代码库）quasar允许用户自定义boot文件。
• 在早期的版本中,root Vue实例被实例化之前，可以通过修改src下的main.js文件，添加需要执行的代码。
• 这样就产生了一个问题：随着项目的发展，main.js文件将会变的臃肿且难以维护.将破坏quasar
  倡导开发者编写优雅且可维护的 跨平台程序的理念。
• 通过boot文件，可以拆分为每一个独立，易维护的boot文件，这些boot文件可以在quasar.conf.js配置文件中设置禁用和启用。

好了，接下来我们创建一个boot的mock.js文件

• src\boot\mock.js

// mock--start
import { setupProdMockServer } from '../../mock/index.ts';
// if (process.env.NODE_ENV === 'production') {
setupProdMockServer();
// }
// mock--end

1
2
3
4
5
6
7

• 进入文件quasar.config.js，找到 boot 配置

boot: [
    'mock', //  如果不使用mock,可以注释掉
  ],
1
2
3

接下来运行代码，我们直接在代码里这样调用就可以

• A.vue

<template>
  <h2 @click="go">点击这一行字，就会得到mock结果</h2>
  <h2>{{testMock}}</h2>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

import axios from 'axios';

export default defineComponent({
  name: 'App',
  setup() {
    const testMock = ref('');
    function go() {
      axios.get('/api/getUserInfo').then((_) => {
        console.log('获取结果', _);
        testMock.value = JSON.stringify(_);
      });
    }
    go();
    return {
      go,
      testMock,
    };
  },
});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

• 好啦，执行一下代码看一下
  
  

• 这里还有一个可以参考的其他文章
  创建一个boot启动文件来注入全局的filter
  https://www.cnblogs.com/baiyifengyun/p/13967200.html

好啦，今天就到这里啦~~

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

(^▽)开开心心又一天~~