一、初始化环境（默认都会安装vue3项目+ts）
安装mock：全局安装
# 使用 npm 安装
npm install mockjs vite-plugin-mock
# 使用 yarn 安装
yarn add mockjs vite-plugin-mock二、进行配置
在vite.config.ts中进行配置
import { UserConfigExport, ConfigEnv } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';//command 是用于检测当前开发的环境
export default defineConfig(({command}:ConfigEnv):UserConfigExport=>{return {plugins: [//mock配置//localEnabled已经弃用，现在用enableviteMockServe({mockPath:'mock',enable: command=='serve'}),],}
}）
三、开始使用
~
1.在根目录下创建mock目录（如果要起别的名字，对应上边vite.config.ts中mockPath也要做相应修改）。
2.在mock目录下创建文件，创建user.js (根据自己具体需求去取名)，根据需求写几个接口路径，例子如下：
user.ts内容：
function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111111',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]
}
//对外暴露接口
export default [// 用户登录接口{url: '/api/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: { checkUser } }},},
]好了其实里面的内容看起来很难，其实一点也不简单，要细心理解一下
就是定义一个createUserList()函数，直接返回数据集而已，然后
//对外暴露接口 export default，请求的根据就是，url、method、和response中的body参数
就像请求后端一样，在response中的{}中类似方法体，定义参数 const { username, password } =
body;，并且写一下简单的判断业务，就是判断密码是否和createUserList函数中的数据一样，这是
一个简单的登录业务。~~
四、axios二次封装 request.ts
import axios from "axios";
import { ElMessage } from "element-plus";
//创建了一个axios对象// alert(import.meta.env.VITE_APP_BASE_API);
const request = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 5000,
});
let userStore:any = null
let token =null;
//request实例添加请求响应拦截器
request.interceptors.request.use((config) => {token = localStorage.getItem('userToken');
console.log('toekn',token);if(token!=null){// 设置请求头tokenconfig.headers.token = token;}//config配置对象，header属性配置请求头，经常给服务器端携带公共参数//返回配置对象// console.log(config);return config;
});//响应拦截器
request.interceptors.response.use((response) => {return response.data;},(error) => {//处理网络错误//失败调回//定义一个变量处理网络错误let msg = "";let status = error.response?.status || error.code;switch (status) {case 401:msg = "token过期";break;case 403:msg = "无权访问";break;case 404:msg = "请求地址错误";break;case 500:msg = "服务器出现问题";break;case "ECONNABORTED":msg = "请求超时";break;default:msg = "无网络";break;}ElMessage({type: "error",message: msg,});return { code: status, message: msg };}
);//对外暴露
export default request;
baseURL: import.meta.env.VITE_APP_BASE_API是设置axios的一个基础路径，
import.meta.env：读取.env数据，方便切换开发和生产环境的后端服务路径
.env.development：中的变量为：
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
# VITE_NODE_ENV = 'development'
VITE_APP_TITLE = '开发中 • 硅谷甄选'#可用来区分同个域名下不同地址
VITE_APP_BASE_API = '/api' #//基础路径会携带/api
# VITE_APP_DOMAIN = 'http://sph-api.atguigu.cn'
VITE_SERVE="http://xxx.com"这里读取的是：VITE_APP_BASE_API:'/api'
因为是mock本地测试数据，所以不用再添加本地连接默认请求本地地址。
五、创建api管理文件（ts文件）
虽然使用requts.ts可以直接请求，但是为了这篇文章的很多东西可以直接粘贴用，所以还是严谨一点。
创建src/api/user/index1.ts文件
src/api/user/type1.ts文件
index1内容：
//统一管理项目用户相关接口
import request from '@/utils/request';
// loginFormData形参类型
import type { loginFormData,loginResultData,userInfoResultData } from './type1';enum API{LOGIN_URL="/user/login",UUSERINFO_URL="/user/info"
}
//暴露请求函数
//登录接口方法
export const reqLogin =(data:loginFormData)=>request.post<any,loginResultData>(API.LOGIN_URL,data);// 用户信息
export const reqUserInfo =()=> request.get<any,userInfoResultData>(API.UUSERINFO_URL);type1内容：
//登录接口需要携带ts参数类型export interface loginFormData{username:string,password:string
}interface dataType{token:string
}
//登录接口返回参数
export interface loginResultData{code:any,data:any
}interface userInfo{userId:number,avatar:string,username:string,password:string,desc:string,roles:string[],bottons:string[],routes:string[],token:string
}
interface user{checkUser:userInfo
}
// 定义获取用户信息接口返回的数据
export interface userInfoResultData{code:number,data:user
}这里improt：引入request、type1 这里type1是配置接口中的参数，里面是对mock返回的数据节奏来定义的参数结构，反正太难的结构就用any来定义
enum API，写的是url， export 把定义的管理api方法暴露出去。
六、调用api接口文件
在app.vue文件引入接口管理文件。
import {reqLogin,reqUserInfo} from '@/api/user/index1';使用onMounted函数调用接口
//使用api管理接口是否能使用
//登录接口
onMounted(()=>{reqLogin({username:'admin',password:'111111'}).then(res=>{console.log('toeknset',res);if(res.code==200){//将token存储到本地缓存中localStorage.setItem('userToken',res.data.token);}console.log('成功！');})
})
//获取用户信息
onMounted(()=>{reqUserInfo().then(res=>{console.log(res);})
})查看控制台成功了！
![春秋云境：CVE-2022-25578[漏洞利用]](https://img-blog.csdnimg.cn/direct/750bad4fc84546f583f82177c8752185.png)
