在Vue框架中配置Mock服務(wù)器的方法

更新時(shí)間：2022年12月05日 09:05:59 作者：凍羊的小屋

在前端開發(fā)中，如果需要模擬后端數(shù)據(jù)，而又不想開發(fā)一個(gè)后端服務(wù)器，則可以借助mock.js配置一個(gè)后端服務(wù)器來(lái)返回前端需要的數(shù)據(jù)，本文將會(huì)分別介紹在Quasar項(xiàng)目和Vite項(xiàng)目中Mock服務(wù)器的配置方法

在Vite項(xiàng)目中配置Mock服務(wù)器

Vite項(xiàng)目的創(chuàng)建與目錄結(jié)構(gòu)

Vite項(xiàng)目的初始化按照官網(wǎng)上的教程進(jìn)行：

yarn create vite

創(chuàng)建項(xiàng)目后，再安裝Mock相關(guān)插件：

yarn add -D mockjs
yarn add -D vite-plugin-mock

yarn add axios

配置Vite

在對(duì)Vite進(jìn)行配置之前，需要先編輯根目錄下的tsconfig.node.json，然后把里面的include內(nèi)的內(nèi)容刪除，否則在配置Vite的時(shí)候會(huì)報(bào)錯(cuò)，刪除后的文件如下：

// tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

將Vite插件的設(shè)置進(jìn)行分離

這里借鑒NaiveUI Admin的設(shè)計(jì)思路，將Vite的所有插件的配置分離出去，通過(guò)函數(shù)進(jìn)行返回，來(lái)實(shí)現(xiàn)模塊化開發(fā)，具體的做法是：

先在根目錄新建vite目錄，用來(lái)存放Vite相關(guān)的設(shè)置，將插件的配置放在其中的plugins子目錄。
plugins目錄中首先有一個(gè)index.ts，作為工廠函數(shù)統(tǒng)一返回插件的配置列表，對(duì)應(yīng)著Vite設(shè)置中的plugins的設(shè)置項(xiàng)的值。
然后，每一個(gè)插件對(duì)應(yīng)著一個(gè)typescript文件，返回該插件的具體配置。

在本文的場(chǎng)景中，各文件的內(nèi)容如下：

vite/plugins/index.ts

// vite/plugins/index.ts
import type { Plugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import { configMockPlugin } from './mock';

export function createVitePlugins() {
  // 初始插件，在這里導(dǎo)入其他框架的resolver
  const vitePlugins: (Plugin | Plugin[])[] = [
    vue(),
  ];

  // vite-plugin-mock
	vitePlugins.push(configMockPlugin(true, true));

	// 下面可以添加其他的插件
	// vitePlugins.push(...);

  return vitePlugins;
}

vite/plugins/mock.ts

// plugin/mock.ts
import { viteMockServe } from 'vite-plugin-mock';

export function configMockPlugin(isBuild: boolean, prodMock: boolean) {
  return viteMockServe({
    ignore: /^\_/,
    mockPath: 'mock',
    localEnabled: !isBuild,
    prodEnabled: isBuild && prodMock,
    injectCode: `
       import { setupProdMockServer } from '../mock/_createProductionServer';
       setupProdMockServer();
       `,
  });
}

vite.config.ts

// vite.config.ts
import { UserConfig, ConfigEnv, defineConfig } from 'vite';
import { createVitePlugins } from './vite/plugins';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  return {
    plugins: createVitePlugins(),
  }
})

至此，Vite方面的配置已經(jīng)完畢，下面就可以配置Mock的返回接口了。

配置Mock的接口

文件目錄結(jié)構(gòu)

同樣地，我們?cè)陧?xiàng)目根目錄下創(chuàng)建一個(gè)文件夾來(lái)存放Mock相關(guān)的文件，這里命名為Mock，該目錄的結(jié)構(gòu)說(shuō)明如下：

mock
├── module1         業(yè)務(wù)模塊1
│   ├── mock1.ts    數(shù)據(jù)接口1
│   └── mock2.ts    數(shù)據(jù)接口2
├── module1         業(yè)務(wù)模塊2
│   ├── mock1.ts    數(shù)據(jù)接口1
│   └── mock2.ts    數(shù)據(jù)接口2
├── index.ts        導(dǎo)出所有接口
└── _util.ts        對(duì)返回值的一些處理

工具函數(shù)

有時(shí)候我們需要模擬表格數(shù)據(jù)，而Mock提供的隨機(jī)數(shù)據(jù)接口一次只能返回一條數(shù)據(jù)，我們可以自己封裝一個(gè)函數(shù)來(lái)處理這種需要返回多個(gè)數(shù)據(jù)的情況，這里還是借鑒NaiveUI Admin的做法：

// _utils.ts 一些工具函數(shù), 可用來(lái)處理返回的請(qǐng)求
import { mock } from 'mockjs';

// 包裝返回的數(shù)據(jù)
export function resultSuccess(result, { message = 'ok' } = {}) {
    return mock({
        code: 200,
        result,
        message,
        type: 'success',
    });
}
export function resultError(message = 'Request failed', { code = -1, result = null } = {}) {
    return {
        code,
        result,
        message,
        type: 'error',
    };
}
export function resultPageSuccess<T = any>(
    page: number,
    pageSize: number,
    list: T[],
    { message = 'ok' } = {}
) {
    const pageData = pagination(page, pageSize, list);
    return {
        ...resultSuccess({
            page,
            pageSize,
            pageCount: list.length,
            list: pageData,
        }),
        message,
    };
}

// 
export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
    const offset = (pageNo - 1) * Number(pageSize);
    const ret =
        offset + Number(pageSize) >= array.length
            ? array.slice(offset, array.length)
            : array.slice(offset, offset + Number(pageSize));
    return ret;
}

/**
 * @param {Number} times 回調(diào)函數(shù)需要執(zhí)行的次數(shù)
 * @param {Function} callback 回調(diào)函數(shù)
 */
export function doCustomTimes(times: number, callback: any) {
    let i = -1;
    while (++i < times) {
        callback(i);
    }
}

export interface requestParams {
    method: string;
    body: any;
    headers?: { token?: string };
    query: any;
}

/**
 * @description 本函數(shù)用于從request數(shù)據(jù)中獲取token，請(qǐng)根據(jù)項(xiàng)目的實(shí)際情況修改
 *
 */
export function getRequestToken({ headers }: requestParams): string | undefined {
    return headers?.token;
}

編寫Mock接口

現(xiàn)在，按照業(yè)務(wù)進(jìn)行模擬接口的編寫，這里展示一個(gè)示例，返回一個(gè)人員信息表格的模擬數(shù)據(jù)：

// mock/table/list.ts 一個(gè)返回表格數(shù)據(jù)的接口

import { Random } from 'mockjs';
import { resultSuccess, doCustomTimes } from '../_utils';

const tableList = (pageSize) => {
    const result: any[] = [];
    doCustomTimes(pageSize, () => {
        result.push({
            id: '@integer(10,999999)',
            beginTime: '@datetime',
            endTime: '@datetime',
            address: '@city()',
            name: '@cname()',
            avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
            date: `@date('yyyy-MM-dd')`,
            time: `@time('HH:mm')`,
            'no|100000-10000000': 100000,
            'status|1': [true, false],
        });
    });
    return result;
};

export default [
    //表格數(shù)據(jù)列表
    {
        url: '/api/table/list',
        timeout: 1000,
        method: 'get',
        response: ({ query }) => {
            const { page, pageSize } = query;
            const list = tableList(Number(pageSize));
            return resultSuccess({
                page: Number(page),
                pageSize: Number(pageSize),
                pageCount: 60,
                list,
            });
        },
    },
];

在組件中使用

關(guān)于怎么在Vue中使用Axios，請(qǐng)參考其他的文章，這里假設(shè)已經(jīng)完成了Axio的封裝，在組件中直接調(diào)用設(shè)置好的接口就可以獲取數(shù)據(jù)了，而且命令行中還會(huì)顯示調(diào)用記錄：

<script setup lang="ts">
    import { ref } from 'vue';
    import service from '../axios';
    const text = ref('123');

    const getdata = () => {
        service
            .get('/table/list', {
                params: {
                    page: Math.round(Math.random()*10) + 1,
                    pageSize: Math.round(Math.random()*10) + 1,
                },
            })
            .then((res) => {
                text.value = res.data;
            });
    };
</script>

<template>
    <button @click="getdata">click</button>
    <p>{{text}}</p>
</template>

在Quasar項(xiàng)目中使用Mock

在這里推薦一下這個(gè)框架，非常好用，快去它的官網(wǎng)看看吧。我們這里還是以官方初始模板為基礎(chǔ)進(jìn)行配置。

初始化項(xiàng)目

# 全局安裝quasar腳手架
npm install -g @quasar/cli
yarn create quasar
# 注意選擇vite作為打包工具, 進(jìn)入目錄后
yarn

yarn add -D mockjs
yarn add -D vite-plugin-mock

修改Quasar中的Vite配置

需要注意的是，網(wǎng)絡(luò)上有人提供了基于boot文件的解決方案，這種方案可以正常返回?cái)?shù)據(jù)，但是不能在命令行顯示調(diào)用記錄，而且在瀏覽器中也看不到網(wǎng)絡(luò)請(qǐng)求，調(diào)試起來(lái)不太方便，因此經(jīng)過(guò)探索，只需要將Vite插件的配置直接復(fù)制到quasar.config.js中的build.vitePlugins中即可，修改過(guò)后的Quasar配置文件的部分顯示如下：

// 導(dǎo)入mock服務(wù)器的函數(shù)
const viteMockServe = require('vite-plugin-mock').viteMockServe

build: {
    // 添加mock插件
    vitePlugins: [
        [
            viteMockServe({
                ignore: /^\_/,
                mockPath: 'mock',
                localEnabled: !isBuild,
                prodEnabled: isBuild && prodMock,
                injectCode: `
               import { setupProdMockServer } from '../mock/_createProductionServer';
               setupProdMockServer();
               `,
            })
        ]
    ]
}