fix: 修改登录页面

src/components/Admin/LoginAdmin.vue

@@ -1,90 +1,196 @@
 <template>
   <div class="login_container">
-    <div class="login_title">系统管理员登录界面</div>
     <div class="login_box">
-      <!-- 头像区域 -->
+      <div class="login_header">
-      <div class="avatar_box">
+        <h1>基于Ollama大模型的图书推荐系统</h1>
-        <img
-          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
-          alt=""
-        />
       </div>
-      <!-- 登录表单区域 -->
+
+      <div class="login_content">
+        <div class="form_container">
+          <h2>系统管理员登录</h2>
           <el-form
             ref="loginFormRef"
             :model="loginForm"
             :rules="loginFormRules"
-        label-width="0px"
+            label-width="0"
-        class="login_form"
           >
-        <!-- 用户名 -->
             <el-form-item prop="username">
               <el-input
                 v-model.trim="loginForm.username"
-            prefix-icon="iconfont icon-gerenxinxi"
+                prefix-icon="el-icon-user"
+                placeholder="请输入管理员账号"
               ></el-input>
             </el-form-item>
-        <!-- 密码 -->
             <el-form-item prop="password">
               <el-input
                 v-model="loginForm.password"
-            prefix-icon="iconfont icon-tianchongxing-"
+                prefix-icon="el-icon-lock"
                 type="password"
+                placeholder="请输入密码"
                 @keyup.enter.native="login"
                 :show-password="true"
               ></el-input>
             </el-form-item>
-        <!-- 按钮区域 -->
             <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading"
+              <el-button
-            >登录</el-button
+                type="primary"
+                @click="login"
+                :loading="loginLoading"
+                class="login-btn"
               >
-          <el-button type="info" @click="resetLoginForm">重置</el-button>
+                登录
+              </el-button>
             </el-form-item>
           </el-form>
         </div>
-    <vue-particles
+
-      class="login-bg"
+        <div class="info_container">
-      color="#39AFFD"
+          <h3>管理员须知</h3>
-      :particleOpacity="0.7"
+          <div class="notice">
-      :particlesNumber="100"
+            <p>欢迎使用系统管理平台</p>
-      shapeType="circle"
+            <p>请妥善保管您的管理员账号</p>
-      :particleSize="4"
+            <p>如有问题请联系技术支持</p>
-      linesColor="#8DD1FE"
+          </div>
-      :linesWidth="1"
+        </div>
-      :lineLinked="true"
+      </div>
-      :lineOpacity="0.4"
+
-      :linesDistance="150"
+      <div class="login_footer">
-      :moveSpeed="3"
+        <p>
-      :hoverEffect="true"
+          Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
-      hoverMode="grab"
+        </p>
-      :clickEffect="true"
+        <div class="switch-buttons">
-      clickMode="push"
+          <el-tooltip content="用户登录" placement="top">
-    >
+            <i class="el-icon-user" @click="goUser"></i>
-    </vue-particles>
+          </el-tooltip>
-    <div class="footer">
+        </div>
-      <span style="font-weight: bold; color: white; margin-bottom: 10px">
+      </div>
-        登录页面切换
-      </span>
-      <span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
     </div>
-    <div class="footer2"></div>
   </div>
 </template>
 
+<style lang="less" scoped>
+.login_container {
+  height: 100vh;
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login_box {
+  width: 1000px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  .login_header {
+    background: #1e62c0;
+    padding: 20px;
+    text-align: center;
+
+    h1 {
+      color: #fff;
+      font-size: 24px;
+      margin: 0;
+    }
+  }
+
+  .login_content {
+    display: flex;
+    padding: 40px;
+
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #e8e8e8;
+
+      h2 {
+        color: #333;
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #333;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 1.8;
+
+        p {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f7f9fc;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #e8e8e8;
+    position: relative;
+
+    p {
+      color: #666;
+      margin: 0;
+    }
+
+    .switch-buttons {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      i {
+        font-size: 20px;
+        color: #999;
+        cursor: pointer;
+        transition: all 0.3s;
+        margin-left: 15px;
+
+        &:hover {
+          color: #409eff;
+        }
+      }
+    }
+  }
+}
+</style>
+
 <script>
 export default {
+  name: "LoginAdmin",
   data() {
     return {
-      //登录表单
       loginForm: {
         username: "root",
         password: "123456",
       },
-      //登录表单规则的验证对象
       loginFormRules: {
         username: [
-          { required: true, message: "用户名不能为空", trigger: "blur" },
+          { required: true, message: "请输入用户名", trigger: "blur" },
           {
             min: 3,
             max: 20,
@@ -93,7 +199,7 @@ export default {
           },
         ],
         password: [
-          { required: true, message: "密码不能为空", trigger: "blur" },
+          { required: true, message: "请输入密码", trigger: "blur" },
           {
             min: 6,
             max: 15,
@@ -109,31 +215,30 @@ export default {
     resetLoginForm() {
       this.$refs.loginFormRef.resetFields();
     },
-    login() {
+    async login() {
       this.$refs.loginFormRef.validate(async (valid) => {
-        // console.log(valid);
+        if (!valid) return;
-        //如果表单验证无效，直接返回
+
-        if (!valid) {
+        try {
-          return;
-        }
           this.loginLoading = true;
-        const username = this.loginForm.username;
-        const password = this.loginForm.password;
-        //向数据库发送axios请求，如果登录成功，就跳转
           const { data: res } = await this.$http.post("admin/login", {
-          username,
+            username: this.loginForm.username,
-          password,
+            password: this.loginForm.password,
           });
+
           if (res.status !== 200) {
-          this.loginLoading = false;
+            throw new Error(res.msg);
-          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);
           this.$router.push("/homeadmin");
+        } catch (error) {
+          this.$message.error(error.message || "登录失败");
+        } finally {
+          this.loginLoading = false;
+        }
       });
     },
     goUser() {
@@ -144,93 +249,155 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer2 {
-  position: absolute;
-  bottom: 0px;
-  left: 35%;
-  color: #ccc;
-
-  a {
-    color: #ccc;
-  }
-}
-
 .login_container {
-  // background-color: #2b4b6b;
+  height: 100vh;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
-    no-repeat 0px 0px;
   background-size: cover;
-  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .login_box {
-  height: 300px;
+  width: 1000px;
-  width: 450px;
+  background: rgba(255, 255, 255, 0.95);
-  background-color: #fff;
+  border-radius: 10px;
-  border-radius: 3px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-  position: absolute;
+  overflow: hidden;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  .avatar_box {
-    width: 130px;
-    height: 130px;
-    border: 1px solid #eee;
-    border-radius: 50%;
-    padding: 10px;
-    box-shadow: 0 0 10px #ddd;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
-
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background-color: #eee;
-    }
-  }
-}
-
-.login_form {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.btns {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.login_title {
   position: relative;
-  top: 5%;
+  z-index: 1;
-  font-size: 36px;
-  color: white;
-  text-align: center;
-  font-weight: 700;
-  //控制字体间距
-  letter-spacing: 10px;
-}
 
-.footer {
+  .login_header {
-  display: flex;
+    background: #1a237e;
-  position: absolute;
+    padding: 25px;
-  flex-direction: column;
-  bottom: 0;
-  right: 0;
-  width: 100px;
-  height: 120px;
-  // background-color: pink;
-  span {
-    // width: 100%;
-    // background-color: red;
     text-align: center;
+
+    h1 {
+      color: #fff;
+      font-size: 28px;
+      margin: 0;
+      margin-bottom: 8px;
+    }
+
+    p {
+      color: rgba(255, 255, 255, 0.8);
+      margin: 0;
+      font-size: 16px;
+    }
+  }
+
+  .login_content {
+    display: flex;
+    padding: 40px;
+
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #eee;
+
+      .admin_icon {
+        text-align: center;
+        margin-bottom: 20px;
+
+        i {
+          font-size: 50px;
+          color: #1a237e;
+          background: #e8eaf6;
+          padding: 20px;
+          border-radius: 50%;
+        }
+      }
+
+      h2 {
+        color: #1a237e;
+        margin-bottom: 30px;
+        font-weight: 500;
+        text-align: center;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+        background: #1a237e;
+        border-color: #1a237e;
+
+        &:hover {
+          background: #283593;
+          border-color: #283593;
+        }
+      }
+
+      .reset-btn {
+        width: 100%;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #1a237e;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 2;
+
+        p {
+          margin-bottom: 15px;
+          padding-left: 20px;
+          position: relative;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 10px;
+            width: 6px;
+            height: 6px;
+            background: #1a237e;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f5f5f5;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #eee;
+    position: relative;
+
+    p {
+      color: #666;
+      margin: 0;
+    }
+
+    i {
+      position: absolute;
+      right: 20px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 20px;
+      color: #666;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #1a237e;
+      }
+    }
   }
 }
 </style>

src/components/BookManage/LoginBookManage.vue

@@ -1,91 +1,88 @@
 <template>
   <div class="login_container">
-    <div class="login_title">图书管理员登录界面</div>
     <div class="login_box">
-      <!-- 头像区域 -->
+      <div class="login_header">
-      <div class="avatar_box">
+        <h1>基于Ollama大模型的图书推荐系统</h1>
-        <img
-          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
-          alt=""
-        />
       </div>
-      <!-- 登录表单区域 -->
+
+      <div class="login_content">
+        <div class="form_container">
+          <h2>图书管理员登录</h2>
           <el-form
             ref="loginFormRef"
             :model="loginForm"
             :rules="loginFormRules"
-        label-width="0px"
+            label-width="0"
-        class="login_form"
           >
-        <!-- 用户名 -->
             <el-form-item prop="username">
               <el-input
                 v-model.trim="loginForm.username"
-            prefix-icon="iconfont icon-gerenxinxi"
+                prefix-icon="el-icon-user"
+                placeholder="请输入管理员账号"
               ></el-input>
             </el-form-item>
-        <!-- 密码 -->
             <el-form-item prop="password">
               <el-input
                 v-model="loginForm.password"
-            prefix-icon="iconfont icon-tianchongxing-"
+                prefix-icon="el-icon-lock"
                 type="password"
+                placeholder="请输入密码"
                 @keyup.enter.native="login"
                 :show-password="true"
               ></el-input>
             </el-form-item>
-        <!-- 按钮区域 -->
             <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading"
+              <el-button
-            >登录
+                type="primary"
+                @click="login"
+                :loading="loginLoading"
+                class="login-btn"
+              >
+                登录
               </el-button>
-          <el-button type="info" @click="resetLoginForm">重置</el-button>
             </el-form-item>
           </el-form>
         </div>
-    <vue-particles
+
-      class="login-bg"
+        <div class="info_container">
-      color="#39AFFD"
+          <h3>管理员须知</h3>
-      :particleOpacity="0.7"
+          <div class="notice">
-      :particlesNumber="100"
+            <p>欢迎使用图书管理系统</p>
-      shapeType="circle"
+            <p>请妥善保管您的管理员账号</p>
-      :particleSize="4"
+            <p>如有问题请联系系统管理员</p>
-      linesColor="#8DD1FE"
+          </div>
-      :linesWidth="1"
+        </div>
-      :lineLinked="true"
+      </div>
-      :lineOpacity="0.4"
+
-      :linesDistance="150"
+      <div class="login_footer">
-      :moveSpeed="3"
+        <p>
-      :hoverEffect="true"
+          Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
-      hoverMode="grab"
+        </p>
-      :clickEffect="true"
+        <div class="switch-buttons">
-      clickMode="push"
+          <el-tooltip content="用户登录" placement="top">
-    >
+            <i class="el-icon-user" @click="goUser"></i>
-    </vue-particles>
+          </el-tooltip>
-    <div class="footer">
+          <el-tooltip content="超级管理员" placement="top">
-      <span style="font-weight: bold; color: white"> 登录页面切换 </span>
+            <i class="el-icon-s-tools" @click="goAdmin"></i>
-      <span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
+          </el-tooltip>
-      <span>
+        </div>
-        <i class="iconfont icon-guanliyuanrenzheng" @click="goAdmin"></i>
+      </div>
-      </span>
     </div>
-    <div class="footer2"></div>
   </div>
 </template>
 
 <script>
 export default {
+  name: "LoginBookManage",
   data() {
     return {
-      //登录表单
       loginForm: {
         username: "admin",
         password: "123456",
       },
-      //登录表单规则的验证对象
       loginFormRules: {
         username: [
-          { required: true, message: "用户名不能为空", trigger: "blur" },
+          { required: true, message: "请输入用户名", trigger: "blur" },
           {
             min: 3,
             max: 20,
@@ -94,7 +91,7 @@ export default {
           },
         ],
         password: [
-          { required: true, message: "密码不能为空", trigger: "blur" },
+          { required: true, message: "请输入密码", trigger: "blur" },
           {
             min: 6,
             max: 15,
@@ -110,34 +107,30 @@ export default {
     resetLoginForm() {
       this.$refs.loginFormRef.resetFields();
     },
-    login() {
+    async login() {
       this.$refs.loginFormRef.validate(async (valid) => {
-        // console.log(valid);
+        if (!valid) return;
-        //如果表单验证无效，直接返回
+
-        if (!valid) {
+        try {
-          return;
-        }
           this.loginLoading = true;
-        // 进行md5加密
-        const username = this.loginForm.username;
-        const password = this.loginForm.password;
-        //向数据库发送axios请求，如果登录成功，就跳转
           const { data: res } = await this.$http.post("bookadmin/login", {
-          username,
+            username: this.loginForm.username,
-          password,
+            password: this.loginForm.password,
           });
-        // console.log(res);
+
           if (res.status !== 200) {
-          this.loginLoading = false;
+            throw new Error(res.msg);
-          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);
+        } catch (error) {
-        // this.$router.push("/home"); //跳转到home页面下
+          this.$message.error(error.message || "登录失败");
+        } finally {
+          this.loginLoading = false;
+        }
       });
     },
     goUser() {
@@ -151,93 +144,116 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer2 {
-  position: absolute;
-  bottom: 0px;
-  left: 35%;
-  color: #ccc;
-
-  a {
-    color: #ccc;
-  }
-}
-
 .login_container {
-  // background-color: #2b4b6b;
+  height: 100vh;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
-    no-repeat 0px 0px;
   background-size: cover;
-  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .login_box {
-  height: 300px;
+  width: 1000px;
-  width: 450px;
+  background: #fff;
-  background-color: #fff;
+  border-radius: 8px;
-  border-radius: 3px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  position: absolute;
+  overflow: hidden;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 
-  .avatar_box {
+  .login_header {
-    width: 130px;
+    background: #1e62c0;
-    height: 130px;
+    padding: 20px;
-    border: 1px solid #eee;
+    text-align: center;
-    border-radius: 50%;
-    padding: 10px;
-    box-shadow: 0 0 10px #ddd;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
 
-    img {
+    h1 {
-      width: 100%;
+      color: #fff;
-      height: 100%;
+      font-size: 24px;
-      border-radius: 50%;
+      margin: 0;
-      background-color: #eee;
     }
   }
-}
 
-.login_form {
+  .login_content {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.btns {
     display: flex;
-  justify-content: flex-end;
+    padding: 40px;
-}
 
-.login_title {
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #e8e8e8;
+
+      h2 {
+        color: #333;
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+      }
+
+      .reset-btn {
+        width: 100%;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #333;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 1.8;
+
+        p {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f7f9fc;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #e8e8e8;
     position: relative;
-  top: 5%;
-  font-size: 36px;
-  color: white;
-  text-align: center;
-  font-weight: 700;
-  //控制字体间距
-  letter-spacing: 10px;
-}
 
-.footer {
+    p {
-  display: flex;
+      color: #666;
+      margin: 0;
+    }
+
+    .switch-buttons {
       position: absolute;
-  flex-direction: column;
+      right: 20px;
-  bottom: 0;
+      top: 50%;
-  right: 0;
+      transform: translateY(-50%);
-  width: 100px;
+
-  height: 120px;
+      i {
-  // background-color: pink;
+        font-size: 20px;
-  span {
+        color: #999;
-    // width: 100%;
+        cursor: pointer;
-    // background-color: red;
+        transition: all 0.3s;
-    text-align: center;
+        margin-left: 15px;
+
+        &:hover {
+          color: #409eff;
+        }
+      }
+    }
   }
 }
 </style>

src/components/Login.vue

@@ -1,94 +1,88 @@
 <template>
   <div class="login_container">
-    <div class="login_title">登录</div>
     <div class="login_box">
-      <!-- 头像区域 -->
+      <div class="login_header">
-      <div class="avatar_box">
+        <h1>基于Ollama大模型的图书推荐系统</h1>
-        <img
-          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
-          alt=""
-        />
       </div>
-      <!-- 登录表单区域 -->
+
+      <div class="login_content">
+        <div class="form_container">
+          <h2>用户登录</h2>
           <el-form
             ref="loginFormRef"
             :model="loginForm"
             :rules="loginFormRules"
-        label-width="0px"
+            label-width="0"
-        class="login_form"
           >
-        <!-- 用户名 -->
             <el-form-item prop="username">
               <el-input
                 v-model.trim="loginForm.username"
-            prefix-icon="iconfont icon-gerenxinxi"
+                prefix-icon="el-icon-user"
+                placeholder="请输入用户名"
               ></el-input>
             </el-form-item>
-        <!-- 密码 -->
             <el-form-item prop="password">
               <el-input
                 v-model="loginForm.password"
-            prefix-icon="iconfont icon-tianchongxing-"
+                prefix-icon="el-icon-lock"
                 type="password"
+                placeholder="请输入密码"
                 @keyup.enter.native="login"
                 :show-password="true"
               ></el-input>
             </el-form-item>
-        <!-- 按钮区域 -->
             <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading"
+              <el-button
-            >登录</el-button
+                type="primary"
+                @click="login"
+                :loading="loginLoading"
+                class="login-btn"
               >
-          <el-button type="info" @click="resetLoginForm">重置</el-button>
+                登录
+              </el-button>
             </el-form-item>
           </el-form>
         </div>
-    <!--    粒子插件特效-->
+
-    <vue-particles
+        <div class="info_container">
-      class="login-bg"
+          <h3>系统公告</h3>
-      color="#39AFFD"
+          <div class="notice">
-      :particleOpacity="0.7"
+            <p>欢迎使用基于Ollama大模型的图书推荐系统</p>
-      :particlesNumber="100"
+            <p>本系统提供个性化图书推荐服务</p>
-      shapeType="circle"
+            <p>如有问题请联系管理员</p>
-      :particleSize="4"
+          </div>
-      linesColor="#8DD1FE"
+        </div>
-      :linesWidth="1"
+      </div>
-      :lineLinked="true"
+
-      :lineOpacity="0.4"
+      <div class="login_footer">
-      :linesDistance="150"
+        <p>
-      :moveSpeed="3"
+          Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
-      :hoverEffect="true"
+        </p>
-      hoverMode="grab"
+        <el-tooltip content="管理员入口" placement="top">
-      :clickEffect="true"
+          <i class="el-icon-s-tools" @click="goManage"></i>
-      clickMode="push"
+        </el-tooltip>
-    >
+      </div>
-    </vue-particles>
-    <div class="footer">
-      <span style="font-weight: bold; color: white; margin-bottom: 10px">
-        登录页面切换
-        <!-- <i class="iconfont icon-haoyou " @click="goUser"></i> -->
-      </span>
-      <span>
-        <i class="iconfont icon-guanliyuan" @click="goManage"></i>
-      </span>
     </div>
   </div>
 </template>
 
 <script>
+import VueParticles from "vue-particles";
+import Vue from "vue";
+
+Vue.use(VueParticles);
+
 export default {
+  name: "Login",
   data() {
     return {
-      //登录表单
       loginForm: {
         username: "yangzhen",
         password: "123456",
       },
-
-      //登录表单规则的验证对象
       loginFormRules: {
         username: [
-          { required: true, message: "用户名不能为空", trigger: "blur" },
+          { required: true, message: "请输入用户名", trigger: "blur" },
           {
             min: 3,
             max: 20,
@@ -97,7 +91,7 @@ export default {
           },
         ],
         password: [
-          { required: true, message: "密码不能为空", trigger: "blur" },
+          { required: true, message: "请输入密码", trigger: "blur" },
           {
             min: 6,
             max: 15,
@@ -113,38 +107,32 @@ export default {
     resetLoginForm() {
       this.$refs.loginFormRef.resetFields();
     },
-    login() {
+    async login() {
       this.$refs.loginFormRef.validate(async (valid) => {
-        console.log(valid);
+        if (!valid) return;
-        //如果表单验证无效，直接返回
+
-        if (!valid) {
+        try {
-          return;
-        }
           this.loginLoading = true;
-        // 进行md5加密
-        const salt = "xiaobaitiao";
-        const username = this.loginForm.username;
-        const password = this.loginForm.password;
-        //向数据库发送axios请求，如果登录成功，就跳转
           const { data: res } = await this.$http.post("user/login", {
-          username,
+            username: this.loginForm.username,
-          password,
+            password: this.loginForm.password,
           });
+
           if (res.status !== 200) {
-          this.loginLoading = false;
+            throw new Error(res.msg);
-          return this.$message.error(res.msg);
           }
-        // console.log(res);
+
           this.$message.success("登录成功");
-        this.loginLoading = false;
           window.sessionStorage.setItem("token", res.map.token);
           window.sessionStorage.setItem("userId", res.map.id);
-        this.$router.push("/home"); //跳转到home页面下
+          this.$router.push("/home");
+        } catch (error) {
+          this.$message.error(error.message || "登录失败");
+        } finally {
+          this.loginLoading = false;
+        }
       });
     },
-    goUser() {
-      this.$router.push("/login");
-    },
     goManage() {
       this.$router.push("/loginmanage");
     },
@@ -153,94 +141,117 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer2 {
-  position: absolute;
-  bottom: 0px;
-  left: 35%;
-  color: #ccc;
-
-  a {
-    color: #ccc;
-  }
-}
-
 .login_container {
-  // background-color: #2b4b6b;
+  height: 100vh;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
+  background-image: url("https://www.sxhju.cn/images/d535073cf7ef217b1270190e6e4c5a8.jpg");
-    no-repeat 0px 0px;
   background-size: cover;
-  height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .login_box {
-  height: 300px;
+  width: 1000px;
-  width: 450px;
+  background: #fff;
-  background-color: #fff;
+  border-radius: 8px;
-  border-radius: 3px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  position: absolute;
+  overflow: hidden;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 
-  .avatar_box {
+  .login_header {
-    width: 130px;
+    background: #1e62c0;
-    height: 130px;
+    padding: 20px;
-    border: 1px solid #eee;
+    text-align: center;
-    border-radius: 50%;
-    padding: 10px;
-    box-shadow: 0 0 10px #ddd;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #fff;
 
-    img {
+    .logo {
-      width: 100%;
+      height: 60px;
-      height: 100%;
+      margin-bottom: 10px;
-      border-radius: 50%;
+    }
-      background-color: #eee;
+
+    h1 {
+      color: #fff;
+      font-size: 24px;
+      margin: 0;
     }
   }
-}
 
-.login_form {
+  .login_content {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-.btns {
     display: flex;
-  justify-content: flex-end;
+    padding: 40px;
-}
 
-.login_title {
+    .form_container {
+      flex: 1;
+      padding-right: 40px;
+      border-right: 1px solid #e8e8e8;
+
+      h2 {
+        color: #333;
+        margin-bottom: 30px;
+        font-weight: 500;
+      }
+
+      .el-input {
+        margin-bottom: 20px;
+      }
+
+      .login-btn {
+        width: 100%;
+        margin-bottom: 15px;
+      }
+
+      .reset-btn {
+        width: 100%;
+      }
+    }
+
+    .info_container {
+      flex: 1;
+      padding-left: 40px;
+
+      h3 {
+        color: #333;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+
+      .notice {
+        color: #666;
+        line-height: 1.8;
+
+        p {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  .login_footer {
+    background: #f7f9fc;
+    padding: 15px;
+    text-align: center;
+    border-top: 1px solid #e8e8e8;
     position: relative;
-  top: 5%;
-  font-size: 36px;
-  color: white;
-  text-align: center;
-  font-weight: 700;
-  //控制字体间距
-  letter-spacing: 10px;
-}
 
-.footer {
+    p {
-  display: flex;
+      color: #666;
+      margin: 0;
+    }
+
+    .el-icon-s-tools {
       position: absolute;
-  flex-direction: column;
+      right: 20px;
-  bottom: 0;
+      top: 50%;
-  right: 0;
+      transform: translateY(-50%);
-  width: 100px;
+      font-size: 20px;
-  height: 120px;
+      color: #999;
+      cursor: pointer;
+      transition: all 0.3s;
 
-  // background-color: pink;
+      &:hover {
-  span {
+        color: #409eff;
-    // width: 100%;
+      }
-    // background-color: red;
+    }
-    text-align: center;
   }
 }
 </style>

src/main-dev.js

@@ -40,7 +40,7 @@ Vue.use(vueBaberrage)
 //导入axios
 import axios from 'axios'
 //配置请求的根路径
-axios.defaults.baseURL = 'http://localhost:8889/api/'
+axios.defaults.baseURL = 'https://book-api.shuguangwl.com:443/api/'
 Vue.prototype.$http = axios
 // const CancelToken = axios.CancelToken;
 // const source = CancelToken.source();

src/main-prod.js

@@ -36,7 +36,7 @@ Vue.use(vueBaberrage)
 //导入axios
 import axios from 'axios'
 //配置请求的根路径
-axios.defaults.baseURL = 'http://abc.xiaobaitiao.top:443/api/'
+axios.defaults.baseURL = 'https://book-api.shuguangwl.com:443/api/'
 Vue.prototype.$http = axios
 // const CancelToken = axios.CancelToken;
 // const source = CancelToken.source();