項目名稱: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瞭解的不是很足夠，在響應攔截這塊遇到了一些困難，最終通過查閱資料併進行瞭解決。