- A+
所属分类：.NET技术
项目名称:KeepGoing(继续前进)
介绍
工作后，学习的脚步一直停停走走，希望可以以此项目为基础，可以不断的迫使自己不断的学习以及成长
将以Girvs框架为基础，从壹开始二次开发一个前后端管理框架
在这过程中一步步去学习使用到的技术点，也同时会将在此过程中遇到的问题进行分享
前端框架创建
上文介绍到这次将使用到Vue3作为前端使用的技术，也将和大家一起学习并使用这项技术，首先我们将从头开始创建一个Vue3空项目
具体的操作步骤就不在介绍了，网上一搜就有很多的文章，下面附上自己在使用过程中参照的文章 Vue3 项目创建
这次将实现两个功能：用户登录,获取用户信息
1.用户登录
1.1需要完成的任务
开发一个用户登录页面，并调用后台登录接口获取到token,并存储到浏览器缓存中
1.2实现步骤
1.2.1实现登录页面
这一功能的工作大致流程：
在根目录下创建一个Login.Vue页面,页面很简单，两个输入框，一个按钮，点击按钮对输入数据进行校验，校验通过后调用登录接口，登录成功保存token到缓存中
后台接口登录成功后将用户Id，用户名称构建到授权中去
下面是Login.Vue源码
<template> <div class='bj'> <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef"> <el-form-item label="用户名" prop="userAccount"> <el-input v-model="form.userAccount" /> </el-form-item> <el-form-item label="用户密码" prop="password"> <el-input v-model="form.password" type="password" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submit(ruleFormRef)" :loading="isSending">登录</el-button> </el-form-item> </el-form> </div> </template> <script lang="ts"> import { reactive, defineComponent, ref } from "vue"; import { FormInstance, FormRules, ElMessage } from "element-plus"; import axiosInstande from "./utils/Axios/Axios"; import { setItem } from "./utils/storage"; import md5 from "js-md5"; import router from "@/router"; interface RuleForm { userAccount: string; password: string; } export default defineComponent({ setup() { const form = reactive({ userAccount: "", password: "", }); const ruleFormRef = ref<FormInstance>(); const isSending = ref(false); const rules = reactive<FormRules<RuleForm>>({ userAccount: [ { required: true, message: "请输入用户名", trigger: "blur", }, ], password: [ { required: true, message: "请输入用户密码", trigger: "blur", }, ], }); const submit = async (formEl: FormInstance | undefined) => { if (!formEl) return; formEl.validate(async (valid: any) => { if (valid) { isSending.value = true; const postFrom = Object.assign({}, form); postFrom.password = md5(postFrom.password); await axiosInstande.post("/User/Token", postFrom).then((data) => { if (data.status == 200) { ElMessage.success("登录成功"); setItem("token", data.data); setTimeout(() => { router.push("/UserInfo"); }, 500); } }); } else { return false; } }); }; return { form, submit, rules, ruleFormRef, isSending }; }, }); 在登录页面引用了element-plus,axios 需要先通过npm先将包下载下来
然后进行了简单的一些封装
route组件,把Login.vue添加到了路由中
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '../Login.vue' import UserInfo from '../views/UserInfo.vue' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Login', component: Home }, { path: '/UserInfo', name: 'UserInfo', component: UserInfo } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router Axios组件,增加了请求拦截器和响应拦截器,请求拦截器统一添加登录后存储的token在请求头中，响应拦截器处理不同的响应状态码的结果
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'; import { ElMessage } from "element-plus"; import router from "@/router"; import config from "@/config"; import store from "@/store"; const axiosInatance = axios.create({ baseURL: config.Host, // 基础路径 }); // 请求拦截器 const requestInterceptor = axiosInatance.interceptors.request.use( // 请求发起都会经过这里 function (config:any) { const { user } = store.state; // 解构得到拦截数据里 user数据 if (user) { // 如果user数据和user.token为真，为有效得 config.headers.Authorization = `Bearer ${user}`; // 返回一个拼接好得有效的token值 } // config 本次请求的配置对象 return config; }, function (err) { // 请求出错（还没发出去）会经过这里 return Promise.reject(err); } ); // 响应拦截器 const responseInterceptor = axiosInatance.interceptors.response.use( (response: AxiosResponse): AxiosResponse => { // 2xx 范围内的状态码都会触发该函数。对响数据成功时调用。 return response; }, (err) => { if (err && err.response) { switch (err.response.status) { case 400: err.message = JSON.stringify(err.response.data.errors); break; case 401: err.message = "未授权，请登录"; window.sessionStorage.removeItem("token"); setTimeout(() => { router.push("/"); }, 500); break; case 403: err.message = "权限不足,拒绝访问"; break; case 404: err.message = `请求地址不存在: ${err.response.config.url}`; break; case 408: err.message = "请求超时"; break; case 500: err.message = "服务器内部错误"; break; case 501: err.message = "服务未实现"; break; case 502: err.message = "网关错误"; break; case 503: err.message = "服务不可用"; break; case 504: err.message = "网关超时"; break; case 505: err.message = "HTTP版本不受支持"; break; case 568: // todo err.message = err.response.data.errors; break; default: err.message = { ...err.response.data.errors }; } } if (err.code === "ECONNABORTED" && err.message.indexOf("timeout") !== -1) { err.message = "请求超时,请重试"; } ElMessage.error(err.message); return err; } ); export default axiosInatance; 1.2.2获取登录后的用户信息
登录成功后页面跳转到UserInfo.Vue页面,通过调取接口获取到用户信息，从而返回到页面进行展示
UserInfo.vue页面代码
<template> <div class="about"> <h1>登陆账号:{{userInfo.userAccount}}</h1> <h1>用户名:{{userInfo.userName}}</h1> <h1>联系账号:{{userInfo.contactNumber}}</h1> </div> </template> <script lang="ts"> import { reactive, defineComponent, ref,nextTick } from "vue"; import axiosInstande from "@/utils/Axios/Axios"; export default defineComponent({ created() { this.getUser(); }, setup() { let userInfo = ref({ userAccount: "", userName: "", contactNumber: "", UserType: 0 }); const getUser = async () => { const data = await axiosInstande.get("/User/UserInfo"); if (data.status == 200) { userInfo.value = data.data; } }; return { getUser,userInfo }; } }) </script> 总结：
主要实现了用户登录以及获取用户信息这两个功能，前端使用到了路由、请求响应，拦截。实现的功能比较简单，但由于对Vue了解的不是很足够，在响应拦截这块遇到了一些困难，最终通过查阅资料并进行了解决。
