工作後，學習的腳步一直停停走走，希望可以以此專案為基礎，可以不斷的迫使自己不斷的學習以及成長
將以Girvs框架為基礎，從壹開始二次開發一個前後端管理框架
在這過程中一步步去學習使用到的技術點，也同時會將在此過程中遇到的問題進行分享
上文介紹到這次將使用到Vue3作為前端使用的技術，也將和大家一起學習並使用這項技術，首先我們將從頭開始建立一個Vue3空專案
具體的操作步驟就不在介紹了，網上一搜就有很多的文章，下面附上自己在使用過程中參照的文章 Vue3 專案建立
這次將實現兩個功能：使用者登入,獲取使用者資訊
開發一個使用者登入頁面，並呼叫後臺登入介面獲取到token,並儲存到瀏覽器快取中
這一功能的工作大致流程：
在根目錄下建立一個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;
登入成功後頁面跳轉到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瞭解的不是很足夠，在響應攔截這塊遇到了一些困難，最終通過查閱資料並進行了解決。