Ollama-book/src/components/BookManage/LoginBookManage.vue

<template>
  <div class="login_container">
    <div class="login_box">
      <div class="login_header">
        <h1>基于Ollama大模型的图书推荐系统</h1>
      </div>

      <div class="login_content">
        <div class="form_container">
          <h2>图书管理员登录</h2>
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginFormRules"
            label-width="0"
          >
            <el-form-item prop="username">
              <el-input
                v-model.trim="loginForm.username"
                prefix-icon="el-icon-user"
                placeholder="请输入管理员账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                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"
                class="login-btn"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="info_container">
          <h3>管理员须知</h3>
          <div class="notice">
            <p>欢迎使用图书管理系统</p>
            <p>请妥善保管您的管理员账号</p>
            <p>如有问题请联系系统管理员</p>
          </div>
        </div>
      </div>

      <div class="login_footer">
        <p>
          Copyright © 2025 基于Ollama大模型的图书推荐系统 All Rights Reserved
        </p>
        <div class="switch-buttons">
          <el-tooltip content="用户登录" placement="top">
            <i class="el-icon-user" @click="goUser"></i>
          </el-tooltip>
          <el-tooltip content="超级管理员" placement="top">
            <i class="el-icon-s-tools" @click="goAdmin"></i>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginBookManage",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
      loginFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      loginLoading: false,
    };
  },
  methods: {
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    async login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;

        try {
          this.loginLoading = true;
          const { data: res } = await this.$http.post("bookadmin/login", {
            username: this.loginForm.username,
            password: this.loginForm.password,
          });

          if (res.status !== 200) {
            throw new Error(res.msg);
          }

          this.$message.success("登录成功");
          window.sessionStorage.setItem("token", res.map.token);
          window.sessionStorage.setItem("bookAdminId", res.map.id);
          this.$router.push("/homemange");
        } catch (error) {
          this.$message.error(error.message || "登录失败");
        } finally {
          this.loginLoading = false;
        }
      });
    },
    goUser() {
      this.$router.push("/login");
    },
    goAdmin() {
      this.$router.push("/loginadmin");
    },
  },
};
</script>

<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;
      }

      .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;

    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>