文章目录
引入1.引入依赖2.集成插件3.测试接口请求引入
后端接口出的太慢？问题不大，咱们可以借助vite-plugin-mock-server插件自己写接口，返回商量好的格式，后续联调直接切换环境即可
视频讲解
vite-plugin-mock-server官网
mock.js官网
demo项目地址
1.引入依赖
npm i vite-plugin-mock-server -D
2.集成插件
1.我们调整vite.config.ts文件：
import mockServer from 'vite-plugin-mock-server'// ...plugins: [// mock数据mockServer({logLevel: 'info',urlPrefixes: ['/api/'],mockRootDir: path.relative(__dirname, './src/api/mock'),// 模拟数据文件所放置的目录mockJsSuffix: '.mock.js', // js模拟数据文件的后缀mockTsSuffix: '.mock.ts',// js模拟数据文件的后缀noHandlerResponse404: true,})],
2.我们调整api目录下的auth目录中的文件：
在types.ts中新增一个userInfo接口在index.ts中新增一个getUserInfo的请求方法
目录结构一览
// src\api\auth\types.ts/*** 用户信息 */export interface UserInfo {/*** 用户名*/nickName: string;/*** 用户id*/userId: string;/*** 年龄*/age: number;}
// src\api\auth\index.tsimport {LoginData, LoginResult, UserInfo } from './types'/*** 获取用户信息** @param data {UserInfo}* @returns*/export function getUserInfoApi(accessToken: string): AxiosPromise<UserInfo> {return request({url: '/auth/userInfo',method: 'get',params: accessToken});}
3…我们在src/api/目录下创建一个mock目录,并新建一个auth.mock.ts文件：
src\api\mock\auth.mock.ts
import {MockHandler } from 'vite-plugin-mock-server';import {LoginResult, UserInfo } from '../auth/types';import Mock from 'mockjs';// 通用请求返回结果const resData = {code: '0', // 状态码data: {} // 响应数据};const mocks: MockHandler[] = [{pattern: '/api/auth/login',handle: (req, res) => {const result: LoginResult = {accessToken: 'xaxacaca'};resData.data = result;res.setHeader('Content-Type', 'application/json');res.end(JSON.stringify(resData));}},{pattern: '/api/auth/userInfo',handle: (req, res) => {res.setHeader('Content-Type', 'application/json');// 使用mock.js模拟响应结果resData.data = Mock.mock({userId: '@id', // 随机idnickName: '@cname', // 随机中文名称'age|18-35': 18, // 随机年龄 18-35});res.end(JSON.stringify(resData));}},];export default mocks;
4.我们调整utils下的request文件
我们调整baseURL和vite.config.ts文件一致
// src\utils\request.tsconst service = axios.create({baseURL: '/api',});
3.测试接口请求
1.我们在demo目录下新建一个MockApiDemo.vue：
src\components\demo\MockApiDemo.vue
<template><div><GoBack></GoBack><h1>测试本地模拟接口</h1><el-button type="info" @click="handleLogin">登录请求</el-button><el-button type="success" @click="handleGetUserInfo">获取用户信息</el-button></div></template><script setup lang="ts">import {loginApi, getUserInfoApi } from '../../api/auth'// 登录function handleLogin() {loginApi({username: 'xxx', password: 'xxx' }).then(res => {console.log(`登录请求响应:=>${res.data.accessToken}`);})}// 登录function handleGetUserInfo() {getUserInfoApi("xxaxxx").then(res => {console.log(`用户信息响应：=> userId:${res.data.userId}, nickName: ${res.data.nickName},age:${res.data.nickName}}`);})}</script><style scoped></style>
2.我们在router中补充对应路由，并且在demo中配置
3.实现效果：
