vite+vue3从0开始搭建一个后管项目【学习随记二】

创建项目安装插件可以去【学习随记一】看下

1.路由配置

**文件路径是router/index.ts**
import { createRouter, createWebHistory } from 'vue-router'
import { UserStore, userMenu } from '@/pinia'
import routes from './routes'
import MainRouter from './MainRouter'const router = createRouter({history: createWebHistory(),routes: [...routes, ...MainRouter]
})router.beforeEach((to, from, next) => {const setUserMenu = userMenu()const userStore = UserStore()if (to.name !== 'login' && !userStore.token) {next({ name: 'login' })} else {if (to.name === 'login') {userStore.clearToken()userStore.clearUserInfo()setUserMenu.clearMenuList()}next()}
})
export default router

const routes = [{path: '/login',name: 'login',component: () => import('@/views/system/login/index.vue')},{path: '/:pathMatch(.*)*',name: '404',component: () => import('@/views/system/error/index.vue')}
]export default routes

2.axios的封装

import axios from 'axios'
import { showLoading, hideLoading } from './loading'
import { ElMessage } from 'element-plus'
import { UserStore } from '@/pinia'
let errormessage = ''
declare module 'axios' {interface AxiosInstance {(config: AxiosRequestConfig): Promise<any>}
}
//创建axios的一个实例
const instance = axios.create({baseURL: import.meta.env.VITE_BASE_URL, //接口统一域名timeout: 5000, //设置超时headers: {Accept: 'application/json','Content-Type': 'application/json;charset=utf-8'}
})//请求拦截器
instance.interceptors.request.use((config: any) => {showLoading({lock: true,text: '加载中',background: 'rgba(0, 0, 0, 0.7)'})// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了const userStore = UserStore()config.headers.token = userStore.token || ''return config},error => {setTimeout(() => {hideLoading()}, 200)ElMessage.error(error)Promise.reject(error)}// 对请求错误做些什么
)//响应拦截器
instance.interceptors.response.use(response => {setTimeout(() => {hideLoading()}, 200)const res = response.datareturn res},error => {console.log(error, '----错误信息')//响应错误if (error.response && error.response.status) {const status = error.response.statusswitch (status) {case 400:errormessage = '请求错误'breakcase 401:errormessage = '请求错误'breakcase 404:errormessage = '请求地址出错'breakcase 408:errormessage = '请求超时'breakcase 500:errormessage = '服务器内部错误!'breakcase 501:errormessage = '服务未实现!'breakcase 502:errormessage = '网关错误!'breakcase 503:errormessage = '服务不可用!'breakcase 504:errormessage = '网关超时!'breakcase 505:errormessage = 'HTTP版本不受支持'breakdefault:errormessage = '请求失败'}ElMessage.error(errormessage)setTimeout(() => {hideLoading()}, 200)return Promise.reject(error)}return Promise.reject(error)}
)export default instance

3.使用pinia来存储用户token和用户信息

**文件路径是pinia/modules/user/index.ts**import { defineStore } from 'pinia'
const UserStore = defineStore('layout', {state: () => {return {token: '',userInfo: {} as any}},actions: {setToken(token) {this.token = token},setUserInfo(userInfo) {this.userInfo = userInfo},clearToken() {this.token = ''},clearUserInfo() {this.userInfo = ''}},persist: {enabled: true,strategies: [{ key: 'token', storage: sessionStorage, paths: ['token'] },{ key: 'userInfo', storage: sessionStorage, paths: ['userInfo'] }]}
})export default UserStore

**文件路径是pinia/index.ts**
import UserStore from './modules/user'
export { UserStore }

4.接口使用

接下来就是正常的接口调用了，先联调一个登录接口

<template><div class="card_body"><div class="login_form"><el-form:model="user":rules="loginRules"ref="loginFormRef"><el-form-itemlabel="账号:"prop="account"><el-inputsize="large"v-model="user.account"clearable/></el-form-item><el-form-itemlabel="密码:"prop="password"><el-inputsize="large"v-model="user.password"show-passwordclearable/></el-form-item><el-rowclass="Submit"type="flex"justify="center"><el-buttontype="primary"@click="onSubmit">登录</el-button></el-row></el-form></div></div>
</template><script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { UserStore } from '@/pinia'
import { setUserInfo } from '@/api/login'interface LoginformState {account: stringpassword: string
}const router = useRouter()
const setUserStore = UserStore()const loginFormRef = ref()
const user: LoginformState = reactive({account: '',password: ''
})
const loginRules = reactive<FormRules>({account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})const onSubmit = () => {loginFormRef.value.validate().then(async () => {const res = await setUserInfo(user)if (res.code == 200) {const { token, userInfo } = res.datasetUserStore.setToken(token)setUserStore.setUserInfo(userInfo)router.push({ path: '/' })}})
}
</script><style lang="scss" scoped>
.card_body {display: flex;width: 100%;height: 100%;overflow: hidden;background-color: #a5c2cb8a;justify-content: center;align-items: center;.login_form {width: 500px;height: 400px;display: flex;justify-content: center;align-items: center;background-color: #a5c2cb8a;.el-input {width: 220px;}.Submit {margin-top: 50px;}}
}
</style>