当前位置: 首页 > news >正文

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>
http://www.lryc.cn/news/148733.html

相关文章:

  • Linux的内存理解
  • 财务数据分析?奥威BI数据可视化工具很擅长
  • 趣味微项目:玩转Python编程,轻松学习快乐成长!
  • 总结安卓Preference使用过程中注意的问题
  • Laf 中大猫谱:让每一只流浪猫都有家
  • uniapp 使用mqtt 报错 socketTask onOpen is not a function
  • Docker部署RustDesk Server 设置开机自启
  • ESLint如何在vue3项目中配置和使用
  • Frida-hook:微信数据库的破解
  • 【Unity每日一记】WheelColider组件汽车游戏的关键
  • 项目-IM
  • 2023年口腔医疗行业研究报告
  • 1Java:JDK是什么
  • 使用 Amazon Lambda 进行无服务器计算:云架构中的一场革命
  • 谨慎使用Lombok的@Builder注解
  • leetcode455. 分发饼干 【贪心】
  • 4V-28V Vin,6A同步降压DCDC变换器,集成3.3V和150mA LDO——SCT2361FPBR
  • Linux中的scp指令
  • 剑指 Offer 11. 旋转数组的最小数字
  • Redis面试题总结
  • 【Eclipse】搭建python环境;运行第一个python程序helloword
  • OpenAI 发布企业版ChatGPT-4
  • Flowable7 设计器
  • Flutter问题记录 - Unable to find bundled Java version
  • Tomcat 日志乱码问题解决
  • yum源以及rpm安装包配置、yum源冲突、yum-config-manager命令找不到、curl: (35)、docker镜像重复拉取失败
  • ChatGPT和文心一言的优缺点比较
  • ⛳ 面试题-单例模式会存在线程安全问题吗?
  • C - 滑动窗口 /【模板】单调队列
  • 工厂人员作业行为动作识别检测算法