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

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

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

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

image.png

首先呢,我们来创建项目

  • 执行下面命令,开始创建项目啦
$ npm i -g @quasar/cli
$ npm init quasar
复制代码
  • 下面是我的选项,仅供参考哇
 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
复制代码
  • 创建成功啦

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

下面,我们开始引入mockjs

  • 安装vite-plugin-mock
npm i mockjs -D
npm i vite-plugin-mock -D

复制代码
  • 在根目录创建文件 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]);
}

复制代码
  • 继续创建文件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[]; // 定义数据格式的

复制代码

关键步骤来啦,接下来我们先了解一下:

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

复制代码
  • 进入文件quasar.config.js,找到 boot 配置
boot: [
    'mock', //  如果不使用mock,可以注释掉
  ],
复制代码

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

  • 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>

复制代码
  • 好啦,执行一下代码看一下

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

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

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

在这里插入图片描述

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

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

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

在这里插入图片描述

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改