2023年5月20日版本更新

Author: luoye6

README.md

@@ -356,9 +356,8 @@
 ⭐
 
 + **QQ：909088445**
-
-+ 晚上在线，建议先自己寻找问题，实在实现不了，可以滴我
-+ 需要定制化项目和修改项目的某些的功能也可以加我
++ 一般晚上在线，建议先自己寻找问题！！！
++ 开源免费， 定制化和调试项目付费。
 
 ## 🐼项目API接口文档
 
@@ -398,16 +397,43 @@
 
 ### 2023-5-1
 
-1.添加“系统管理员”权限的系统管理功能，添加借书类型分析统计图（饼图）采用Echarts。
+1.添加“系统管理员”权限的系统管理功能，**添加借书类型分析统计图（饼图）**采用Echarts。
+
+2.优化请求在没有收到数据时的显示卡顿的情况，添加“加载中”状态,**使用v-loading**(ElementUI组件库)，**优化用户人机交互体验**，在服务器调用接口缓慢的情况下，给予**良好的交互**。
+
+3.轮播图优化：**压缩图片体积**，另外使用Swiper的**懒加载**，实现图片加载中状态，然后图片完全加载完成后才显示图片，**优化用户体验过程**。
+
+4.后端**新增自定义错误码枚举类**，可以自定义状态码进行返回，保留原有枚举类。
+
+5.前端优化部分表格内容展示，当纵向内容过长，**设置了表格最大高度**，超出就会显示滑动窗口。优化表格列宽度，**提高表格美观度**。
+
+6.**添加**书籍管理组件的**批量删除图书**功能，优化管理员体验，不用单个删除图书，**提高效率**。
+
+7.Jmeter进行压力测试，服务器接口在**100个用户并发**发送请求的情况下，**QPS达到50**以上。
+
+### 2023-5-20
+
+**后端更新情况**
+
+1.防止前端抓包被获取明文密码，前端输入密码，进行md5加密（混合盐值，防止碰撞),后端直接与数据库加密后的密码比较，相等代表登录成功。提高系统**安全性**。
+
+2.整改Controller层，**将业务代码全部放入Service层**，由Controller调用Service服务，并修改了@Transactional注解位置到业务层，减少耦合度，让Controller减少臃肿。做到对扩展开放，对修改关闭。后续考虑运用**设计模式**进行优化代码和**多线程**知识提高在**高并发**下接口响应的速度。
+
+3.对照阿里巴巴手册进行代码修改，将警告进行减少，代码更加**优雅、规范**。
+
+4.**修复BUG**： 借阅时间为空，造成服务器被击穿。归还日期为空，仍然显示借书成功。（解决方法：时间参数进行校验，判断是否为空)
+
+5.**工具类增加情况**:SQLUtils(防止SQL注入)，NetUtils(网络工具类)
+
+**前端更新情况**
 
-2.优化请求在没有收到数据时的显示卡顿的情况，添加“加载中”状态,使用v-loading(ElementUI组件库)，优化用户人机交互体验，在服务器调用接口缓慢的情况下，给予良好的交互。
+1.将路由加载方式，改为懒加载，利用懒加载可以有效分担首页加载压力，**减少首页加载用时**。
 
-3.轮播图优化：压缩图片体积，另外使用Swiper的懒加载，实现图片加载中状态，然后图片完全加载完成后才显示图片，优化用户体验过程。
+2.添加404页面，当用户访问请求地址不存在的页面，直接跳转到404页面，**提高用户体验度**。
 
-4.后端新增自定义错误码枚举类，可以自定义状态码进行返回，保留原有枚举类。
+3.添加按钮的加载中状态，**优化人机交互**，提升用户体验度。修改按钮：登录按钮，其他按钮如果有需要可以自定义去修改，增加:loading="loading"即可。
 
-5.前端优化部分表格内容展示，当纵向内容过长，设置了表格最大高度，超出就会显示滑动窗口。优化表格列宽度，提高表格美观度。
+**Bug修复情况**
 
-6.添加书籍管理组件的批量删除图书功能，优化管理员体验，不用单个删除图书，提高效率。
+1.11位图书编号可以借，但却**无法进行逾期检查**，发现方法参数还是Integer,上次把借书和还书的改成Long了，逾期查看还没改成Long,因此出现问题，现在已经修复。
 
-7.Jmeter进行压力测试，服务器接口在100个用户并发发送请求的情况下，QPS达到50以上。

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "dev": "npm run serve"
+    "dev": "npm run serve",
+    "npm-build": "npm run build"
   },
   "dependencies": {
     "axios": "^1.2.1",

public/index.html

@@ -9,7 +9,9 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <!-- <link rel="stylesheet" href="../node_modules/swiper/dist/css/swiper.min.css">
     <script src="../node_modules/swiper/dist/js/swiper.min.js"></script> -->
-   
+    <!-- md5加密工具类cdn -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
+
     <title>图书管理系统</title>
 
   </head>

src/assets/images/404.png

@@ -0,0 +1,16 @@
+<template>
+    <div class="container">
+        
+    </div>
+</template>
+  
+<script>
+</script>
+<style>
+.container {
+    width: 100%;
+    height: 100vh;
+    background: url('@/assets/images/404.png') no-repeat;
+    background-size: cover;
+}
+</style>

src/components/404/404.vue

@@ -33,7 +33,7 @@
         </el-form-item>
         <!-- 按钮区域 -->
         <el-form-item class="btns">
-          <el-button type="primary" @click="login">登录</el-button>
+          <el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
           <el-button type="info" @click="resetLoginForm">重置</el-button>
         </el-form-item>
       </el-form>
@@ -103,6 +103,7 @@ export default {
           },
         ],
       },
+      loginLoading: false
     };
   },
   methods: {
@@ -116,16 +117,26 @@ export default {
         if (!valid) {
           return;
         }
+        this.loginLoading = true;
+        // 进行md5加密
+        const salt = "xiaobaitiao";
+        const username = this.loginForm.username;
+        const password = CryptoJS.MD5(salt + this.loginForm.password).toString();
         //向数据库发送axios请求，如果登录成功，就跳转
         const { data: res } = await this.$http.post(
           "admin/login",
-          this.loginForm
+          {
+            username,
+            password
+          }
         );
         // console.log(res);
         if (res.status !== 200) {
+          this.loginLoading = false;
           return this.$message.error(res.msg);
         }
         this.$message.success("登录成功");
+        this.loginLoading = false;
         // console.log(res);
         window.sessionStorage.setItem("token", res.map.token);
         window.sessionStorage.setItem("adminId", res.map.id);

src/components/Admin/LoginAdmin.vue

@@ -99,6 +99,14 @@ export default {
         this.returnInfo.bookNumber = this.expireInfo.bookNumber;
     },
     async returnBook(){
+        // 对表单参数进行校验
+        if(this.returnInfo.returnDate===""){
+          this.$message.error({
+            message:"归还日期不能为空",
+            duration:1000
+          })
+          return;
+        }
         this.returnInfo.violationAdminId = parseInt(window.sessionStorage.getItem('bookAdminId'))
         const {data:res} = await this.$http.post('bookadmin/return_book',this.returnInfo)
         // console.log(res);

src/components/BookManage/BookExpire.vue

@@ -45,9 +45,14 @@ export default {
   methods: {
     async borrowBook(){
       // console.log(this.borrowInfo.borrowDate);
+      if(this.borrowInfo.borrowDate=== ""){
+        return this.$message.error({
+          message:"借阅时间不能为空",
+          duration:1000
+        })
+      }
       this.borrowInfo.bookAdminId = parseInt(window.sessionStorage.getItem('bookAdminId')) 
       const {data:res} = await this.$http.post('bookadmin/borrow_book',this.borrowInfo)
-      console.log(res);
       if(res.status !== 200){
         return this.$message.error(res.msg)
       }

src/components/BookManage/BorrowBook.vue

@@ -36,7 +36,7 @@
         </el-form-item>
         <!-- 按钮区域 -->
         <el-form-item class="btns">
-          <el-button type="primary" @click="login">登录</el-button>
+          <el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
           <el-button type="info" @click="resetLoginForm">重置</el-button>
         </el-form-item>
       </el-form>
@@ -106,6 +106,7 @@ export default {
           },
         ],
       },
+      loginLoading: false
     };
   },
   methods: {
@@ -119,32 +120,44 @@ export default {
         if (!valid) {
           return;
         }
+        this.loginLoading = true;
+        // 进行md5加密
+        const salt = "xiaobaitiao";
+        const username = this.loginForm.username;
+        const password = CryptoJS.MD5(
+          salt + this.loginForm.password
+        ).toString();
         //向数据库发送axios请求，如果登录成功，就跳转
-        const {data:res} = await this.$http.post('bookadmin/login',this.loginForm)
+        const { data: res } = await this.$http.post("bookadmin/login", {
+          username,
+          password,
+        });
         // console.log(res);
-        if(res.status !== 200){
-            return this.$message.error(res.msg);
-          }
-        this.$message.success('登录成功')
-        window.sessionStorage.setItem('token',res.map.token)
-          window.sessionStorage.setItem('bookAdminId',res.map.id)
-        this.$router.push('/homemange')
+        if (res.status !== 200) {
+          this.loginLoading = false;
+          return this.$message.error(res.msg);
+        }
+        this.$message.success("登录成功");
+        this.loginLoading = false;
+        window.sessionStorage.setItem("token", res.map.token);
+        window.sessionStorage.setItem("bookAdminId", res.map.id);
+        this.$router.push("/homemange");
         // window.sessionStorage.setItem("token", token);
         // this.$router.push("/home"); //跳转到home页面下
       });
     },
-    goUser(){
-      this.$router.push('/login');
+    goUser() {
+      this.$router.push("/login");
+    },
+    goAdmin() {
+      this.$router.push("/loginadmin");
     },
-    goAdmin(){
-      this.$router.push('/loginadmin');
-    }
   },
 };
 </script>
 
     <style lang="less" scoped>
-    .footer2 {
+.footer2 {
   position: absolute;
   bottom: 0px;
   left: 45%;
@@ -155,8 +168,8 @@ export default {
 }
 .login_container {
   // background-color: #2b4b6b;
-  background: url(http://xxx.xiaobaitiao.club/img/digitalCityMin.png)
-    no-repeat 0px 0px;
+  background: url(http://xxx.xiaobaitiao.club/img/digitalCityMin.png) no-repeat
+    0px 0px;
   background-size: cover;
   height: 100%;
 }

src/components/BookManage/LoginBookManage.vue

@@ -89,6 +89,8 @@
 </template>
 
 <script>
+
+
 export default {
   data() {
     return {