在Vue框架中配置Mock服务器的方法

更新时间：2022年12月05日 09:05:59 作者：冻羊的小屋

在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器，则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在Quasar项目和Vite项目中Mock服务器的配置方法

在Vite项目中配置Mock服务器

Vite项目的创建与目录结构

Vite项目的初始化按照官网上的教程进行：

yarn create vite

创建项目后，再安装Mock相关插件：

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

yarn add axios

配置Vite

在对Vite进行配置之前，需要先编辑根目录下的tsconfig.node.json，然后把里面的include内的内容删除，否则在配置Vite的时候会报错，删除后的文件如下：

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

将Vite插件的设置进行分离

这里借鉴NaiveUI Admin的设计思路，将Vite的所有插件的配置分离出去，通过函数进行返回，来实现模块化开发，具体的做法是：

先在根目录新建vite目录，用来存放Vite相关的设置，将插件的配置放在其中的plugins子目录。
plugins目录中首先有一个index.ts，作为工厂函数统一返回插件的配置列表，对应着Vite设置中的plugins的设置项的值。
然后，每一个插件对应着一个typescript文件，返回该插件的具体配置。

在本文的场景中，各文件的内容如下：

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() {
  // 初始插件，在这里导入其他框架的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方面的配置已经完毕，下面就可以配置Mock的返回接口了。

配置Mock的接口

文件目录结构

同样地，我们在项目根目录下创建一个文件夹来存放Mock相关的文件，这里命名为Mock，该目录的结构说明如下：

mock
├── module1         业务模块1
│   ├── mock1.ts    数据接口1
│   └── mock2.ts    数据接口2
├── module1         业务模块2
│   ├── mock1.ts    数据接口1
│   └── mock2.ts    数据接口2
├── index.ts        导出所有接口
└── _util.ts        对返回值的一些处理

工具函数

有时候我们需要模拟表格数据，而Mock提供的随机数据接口一次只能返回一条数据，我们可以自己封装一个函数来处理这种需要返回多个数据的情况，这里还是借鉴NaiveUI Admin的做法：

// _utils.ts 一些工具函数, 可用来处理返回的请求
import { mock } from 'mockjs';

// 包装返回的数据
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 回调函数需要执行的次数
 * @param {Function} callback 回调函数
 */
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 本函数用于从request数据中获取token，请根据项目的实际情况修改
 *
 */
export function getRequestToken({ headers }: requestParams): string | undefined {
    return headers?.token;
}

编写Mock接口

现在，按照业务进行模拟接口的编写，这里展示一个示例，返回一个人员信息表格的模拟数据：

// mock/table/list.ts 一个返回表格数据的接口

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 [
    //表格数据列表
    {
        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,
            });
        },
    },
];

在组件中使用

关于怎么在Vue中使用Axios，请参考其他的文章，这里假设已经完成了Axio的封装，在组件中直接调用设置好的接口就可以获取数据了，而且命令行中还会显示调用记录：

<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项目中使用Mock

在这里推荐一下这个框架，非常好用，快去它的官网看看吧。我们这里还是以官方初始模板为基础进行配置。

初始化项目

# 全局安装quasar脚手架
npm install -g @quasar/cli
yarn create quasar
# 注意选择vite作为打包工具, 进入目录后
yarn

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

修改Quasar中的Vite配置

需要注意的是，网络上有人提供了基于boot文件的解决方案，这种方案可以正常返回数据，但是不能在命令行显示调用记录，而且在浏览器中也看不到网络请求，调试起来不太方便，因此经过探索，只需要将Vite插件的配置直接复制到quasar.config.js中的build.vitePlugins中即可，修改过后的Quasar配置文件的部分显示如下：

// 导入mock服务器的函数
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();
               `,
            })
        ]
    ]
}

创建Mock的相关文件

这一部分的文件与Vite项目完全一样，就不再赘述

在组件中使用

同Vite项目，关键是要封装Axios

到此这篇关于在Vue框架中配置Mock服务器的方法的文章就介绍到这了,更多相关Vue配置Mock服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue2.0 + element UI 中 el-table 数据导出Excel的方法
下面小编就为大家分享一篇vue2.0 + element UI 中 el-table 数据导出Excel的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue纯前端实现导出Excel并修改样式
这篇文章主要为大家详细介绍了Vue如何利用xlsx-style库实现导出Excel并修改样式的功能,文中的示例代码讲解详细,有需要的可以参考下
2024-01-01
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
这篇文章主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-05-05
Vue.js图片滑动验证的实现示例
为了防止有人恶意使用脚本进行批量操作,会设置图片滑动验证，本文就介绍了Vue.js图片滑动验证的实现示例，感兴趣的可以了解一下
2023-05-05
一文详解Vue3中的setup函数的用法和原理
在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理
2024-02-02
Vue如何实现pptx在线预览
通过PPTXjs插件,实现PPTX文件在线预览,需下载PPTXjs,将其引入HTML页面,并编写相应的HTML和JS代码,如果是移动端还需调整div大小,这是一种便捷的前端PPTX转HTML技术,适合网页展示使用
2024-09-09
Vue守卫零基础介绍
导航守卫就是路由跳转过程中的一些钩子函数，这个过程中触发的这些函数能让你有操作一些其他的事儿的时机，这就是导航守卫，守卫适用于切面编程，即把一件事切成好几块，然后分给不同的人去完成，提高工作效率，也可以让代码变得更加优雅
2022-09-09
详解vue3+electron如何做到本地化
要在Vue 3和Electron中实现本地化,可以使用类似于在Vue项目中进行本地化的方式,本文为大家介绍了一种常见的做法,希望对大家有所帮助
2024-03-03
Vue.js中使用道具方法demo
这篇文章主要为大家介绍了Vue.js中使用道具方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Vue.js一个文件对应一个组件实践
Vue.js实现"一个文件对应一个组件"，无需webpack等工具，按需加载组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10