完成前后端联调

Author: caolib

package-lock.json

@@ -26,6 +26,6 @@
     "eslint-plugin-vue": "^9.17.0",
     "unplugin-auto-import": "^0.17.3",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.10"
+    "vite": "^5.1.2"
   }
 }

package.json

@@ -108,7 +108,7 @@ const url = ref("https://pic.imgdb.cn/item/65a271fe871b83018a8f9a8f.gif");
             :inactive-action-icon="Sunny"
             style="
             --el-switch-on-color: rgba(19, 206, 102, 0.7);
-            --el-switch-off-color: rgba(141, 141, 141, 0.79);
+            --el-switch-off-color: rgb(74,163,252);
           "
         />
       </el-menu-item>

src/components/HeaderView.vue

@@ -6,13 +6,14 @@ import router from "@/router";
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
-import { createPersistedState } from "pinia-persistedstate-plugin";
-
 import "@/css/main.css";
+
 import { createPinia } from "pinia";
+import { createPersistedState } from "pinia-persistedstate-plugin";
 
 // 导入element-plus中文语言
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+
 const app = createApp(App);
 
 // 使用pinia和persist保存状态并持久化

src/main.js

@@ -1,15 +1,5 @@
 import request from "@/util/request.js";
-
-import {useTokenStore} from "@/stores/token";
-import {useReaderStore} from "@/stores/reader";
-import {useAdminStore} from "@/stores/admin";
-import {ElMessage} from "element-plus";
-
-const adminStore = useAdminStore();
-const tokenStore = useTokenStore();
-const readerStore = useReaderStore();
-
-// 用户退出
+// 用户退出登录
 const logoutService = function () {
     // 调用后端接口清除redis中的令牌
     return request.delete('/logout');

src/methods/logout.js

@@ -1,7 +1,6 @@
 import {defineStore} from "pinia";
 import {ref} from 'vue';
 
-
 /**
  * 保存登录时用户的信息
  */
@@ -29,7 +28,7 @@ export const useReaderStore = defineStore('reader', () => {
             reader.value.token = '';
         }
         return {
-            reader, setReader,clearReader
+            reader, setReader, clearReader
         }
     },
     {

src/stores/reader.js

@@ -1,22 +1,23 @@
-import { defineStore } from "pinia";
+import {defineStore} from "pinia";
 import {ref} from 'vue';
-export const useTokenStore = defineStore('token',()=>{
+
+export const useTokenStore = defineStore('token', () => {
         //1.定义描述token
         const token = ref('')
         //2.定义修改token的方法
-        const setToken = (newToken)=>{
+        const setToken = (newToken) => {
             token.value = newToken
         }
         //3.定义移除token的方法
-        const removeToken = ()=>{
-            token.value=''
+        const removeToken = () => {
+            token.value = ''
         }
         return {
-            token,setToken,removeToken
+            token, setToken, removeToken
         }
     },
     {
         //使用persis插件持久化
         persis: true
     }
-)
+)

src/stores/token.js

@@ -5,7 +5,6 @@ import {useTokenStore} from "@/stores/token.js";
 
 const baseURL = "/api";
 const instance = axios.create({baseURL});
-
 const tokenStore = useTokenStore();
 
 
@@ -22,19 +21,22 @@ instance.interceptors.response.use(
     },
     //失败回调
     (error) => {
-        // 状态码为401,419都跳转到登录界面
-        if (error.response) {
-            const code = error.response.status;
-            if (code === 401) {
+        const code = error.response.status;
+        switch (code) {
+            case 401:
                 ElMessage({message: '请先登录！', type: "error",});
-                router.push('/login');
-            } else if (code === 419) {
+                break;
+            case 419:
                 ElMessage.error("身份已过期,请重新登录！");
-                router.push('/login');
-            } else {
+                break;
+            default:
                 ElMessage.error("服务器异常！" + code);
-            }
+                break;
         }
+        router.push('/login');
+        window.local.reload();
+
+
         // 将异步的状态设置为失败状态
         return Promise.reject(error);
     }

src/util/request.js

@@ -5,10 +5,8 @@ import SideView from "@/components/SideView.vue";
 import HeaderView from "@/components/HeaderView.vue";
 import { Search } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
-import { useReaderStore } from "@/stores/reader.js";
 import { borrowService } from "@/methods/borrow.js";
 
-const readerStore = useReaderStore();
 const tableData = ref([]);
 
 // 页面加载时获取所有书籍
@@ -21,9 +19,11 @@ onMounted(async () => {
 // 获取所有书籍
 const getAllBooks = async function () {
   loading.value = true;
+
   const result = await getAllBookService(condition.value);
   tableData.value = result.data;
   total.value = result.total;
+
   loading.value = false;
 };
 
@@ -34,29 +34,25 @@ const condition = ref({
   isbn: null,
   number: 0,
   currentPage: 1,
-  pageSize: 8,
+  pageSize: 15,
 });
 
-// 是否加载中
+// 是否显示加载中动画
 const loading = ref(false);
 
 // 结果总数
 const total = ref(0);
 
 // 分页大小变化
 const handleSizeChange = (val) => {
-  loading.value = true;
   condition.value.pageSize = val;
   getAllBooks();
-  loading.value = false;
 };
 
 // 当前页数发生变化
 const handleCurrentChange = (val) => {
-  loading.value = true;
   condition.value.currentPage = val;
   getAllBooks();
-  loading.value = false;
 };
 
 let detail = ref(false);
@@ -165,9 +161,11 @@ const disabledDate = (time) => {
 
               <!--书籍表格-->
               <el-table
+                height="600"
                 :data="tableData"
                 style="width: 100%"
                 v-loading="loading"
+                element-loading-text="玩命加载中......"
               >
                 <el-table-column prop="title" label="书名" width="150" />
                 <el-table-column prop="author" label="作者" width="150" />

src/views/BookView.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { reactive, ref } from "vue";
-import { adminLoginService, loginService } from "@/methods/login";
+import {reactive, ref} from "vue";
+import {adminLoginService, loginService} from "@/methods/login";
 import router from "@/router";
-import { useTokenStore } from "@/stores/token";
-import { useReaderStore } from "@/stores/reader.js";
-import { ElNotification } from "element-plus";
-import { useAdminStore } from "@/stores/admin.js";
+import {useTokenStore} from "@/stores/token";
+import {useReaderStore} from "@/stores/reader.js";
+import {ElLoading, ElNotification} from "element-plus";
+import {useAdminStore} from "@/stores/admin.js";
 
 const adminStore = useAdminStore();
 const readerStore = useReaderStore();
@@ -16,7 +16,7 @@ const ruleFormRef = ref();
 // 表单校验规则
 const rules = {
   username: [
-    { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "change" },
+    {min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "change"},
   ],
 };
 
@@ -36,14 +36,28 @@ const loginDto = ref({
   password: "",
 });
 const login = async function () {
+  // 显示加载中动画
+  const loading = ElLoading.service({
+    lock: true,
+    text: '长时间加载请刷新页面......',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+
   const result = await loginService(loginDto.value);
   returnReader = result.data;
-  console.log(returnReader);
+
+  // console.log(returnReader);
+
   //保存用户信息和token
   readerStore.setReader(returnReader);
   tokenStore.setToken(returnReader.token);
   adminStore.setIsAdmin(false);
-  console.log("tokenStore:" + tokenStore.token);
+
+  // 关闭动画
+  loading.close();
+
+  // console.log("tokenStore:" + tokenStore.token);
+
   await router.push("/book");
   ElNotification.success({
     title: "登录成功",
@@ -100,44 +114,46 @@ let isAdmin = ref(false);
 <template>
   <!--用户登录表单-->
   <el-form
-    ref="ruleFormRef"
-    status-icon
-    label-width="120px"
-    class="centered-form"
-    :model="loginDto"
-    :rules="rules"
-    title="登录"
+      ref="ruleFormRef"
+      status-icon
+      label-width="120px"
+      class="centered-form"
+      :model="loginDto"
+      :rules="rules"
+      title="登录"
   >
     <!--用户名-->
     <el-form-item label="用户名" prop="username" class="form-row" required>
-      <el-input v-model="loginDto.username" />
+      <el-input v-model="loginDto.username"/>
     </el-form-item>
     <!--密码-->
     <el-form-item label="密码" prop="password" class="form-row" required>
       <el-input
-        v-model.number="loginDto.password"
-        type="password"
-        show-password
+          v-model.number="loginDto.password"
+          type="password"
+          show-password
       />
     </el-form-item>
     <div class="button-row">
       <el-form-item>
         <el-button type="primary" @click="submitForm(ruleFormRef)"
-          >登录</el-button
+        >登录
+        </el-button
         >
         <el-button type="success" @click="router.push('/register')"
-          >注册</el-button
+        >注册
+        </el-button
         >
       </el-form-item>
 
       <el-switch
-        v-model="isAdmin"
-        class="mb-2"
-        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #fd8250"
-        inline-prompt
-        size="large"
-        active-text="管理员"
-        inactive-text="读者"
+          v-model="isAdmin"
+          class="mb-2"
+          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #fd8250"
+          inline-prompt
+          size="large"
+          active-text="管理员"
+          inactive-text="读者"
       />
     </div>
   </el-form>