double_work/frontend/roll-book/src/views/LoginPage.vue

<template>
    <div class="login-page">
      <div class="login-container">
        <section class="image-section">
          <img src="https://cdn.builder.io/api/v1/image/assets/TEMP/1e9af2397a249392b659cd96eab793a73bb5bebb447827998f2ceb1304997200?placeholderIfAbsent=true&apiKey=f28f4cadbac64bf48902dfcdb6485882" class="login-image" alt="Login illustration" />
        </section>
        <section class="form-section" @submit.prevent="login">
          <form class="login-form">
            <h1 class="welcome-text">欢迎登录萝卜册</h1>
            <input type="text" id="nickname" class="input-nickname" placeholder="昵称" v-model="nickname"/>
            <input type="password" id="password" class="input-password" placeholder="密码" v-model="password"/>
            <button type="submit" class="login-button" @click="login">登录</button>
            <p class="message-link" v-if="message">{{ message }}</p>
            <router-link to="/register" class="register-link">没有账号？注册一个</router-link>
          </form>
        </section>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
      data() {
        return {
          nickname: '',
          password: '',
          message: ''
        };
      },
      methods: {
          async login() {
              try {
                  const params = new URLSearchParams();
                  params.append('username', this.nickname);  // FastAPI 中字段名是 'username'
                  params.append('password', this.password);
  
                  const response = await axios.post('http://127.0.0.1:8000/teacher/jwt/token', params);
                  this.message = '登录成功';
                  console.log(response.data);
  
                  // 保存 access_token 到 localStorage
                  localStorage.setItem('access_token', response.data.access_token);

                  // 保存 nickname 到 localStorage
                  localStorage.setItem('nickname', this.nickname); // 存储昵称
  
                  // 登录成功后跳转到班级管理页面
                  setTimeout(() => {
                      window.location.href = '/'; // 假设班级管理页面为 class_management.html
                  }, 100); 
              } catch (error) {
                  this.message = '用户名或密码错误';
                  console.error(error);
              }
          }
      }
    };
  </script>
  
  
  <style scoped>
  .login-page {
    background-color: #fff;
    padding: 0 80px 0 0;
    overflow: hidden;
  }
  
  .login-container {
    display: flex;
    gap: 20px;
  }
  
  .image-section {
    flex: 1;
  }
  
  .login-image {
    aspect-ratio: 0.39;
    object-fit: contain;
    width: 50%;
  }
  
  .form-section {
    flex: 1;
  }
  
  .login-form {
    display: flex;
    flex-direction: column;
    color: #000;
    font: 400 24px Microsoft Yi Baiti, -apple-system, Roboto, Helvetica, sans-serif;
    margin-top: 377px;
  }
  
  .welcome-text {
    width: 412px;
    color: rgba(0,0,0,1);
    position: absolute;
    top: 377px;
    left: 514px;
    font-family: Microsoft Yi Baiti;
    font-weight: Regular;
    font-size: 48px;
    opacity: 1;
    text-align: left;
  }
  
  .input-nickname {
    width: 412px;
    height: 58px;
    background: rgba(255,255,255,1);
    opacity: 1;
    position: absolute;
    top: 540px;
    left: 514px;
    border: 1px solid rgba(0,0,0,0.30000001192092896);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
  }
  
  .input-password {
    width: 412px;
    height: 58px;
    background: rgba(255,255,255,1);
    opacity: 1;
    position: absolute;
    top: 671px;
    left: 514px;
    border: 1px solid rgba(0,0,0,0.30000001192092896);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
  }
  
  
  .login-button {
    width: 412px;
    height: 68px;
    background: rgba(0,0,0,1);
    opacity: 1;
    position: absolute;
    top: 791px;
    left: 514px;
    border-top-left-radius: 34px;
    border-top-right-radius: 34px;
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
    overflow: hidden;
    color: rgba(255,255,255,1);
    font-family: Microsoft Yi Baiti;
    font-weight: Regular;
    font-size: 24px;
    opacity: 1;
    text-align: center;
  }
  
  .message-link {
    width: 390px;
    color: rgba(0,0,0,1);
    position: absolute;
    top: 900px;
    left: 536px;
    font-family: Microsoft Yi Baiti;
    font-weight: Regular;
    font-size: 20px;
    opacity: 1;
    text-align: center;
  
  }
  .register-link {
    width: 390px;
    color: rgba(0,0,0,1);
    position: absolute;
    top: 872px;
    left: 536px;
    font-family: Microsoft Yi Baiti;
    font-weight: Regular;
    font-size: 16px;
    opacity: 1;
    text-align: center;
  }
  
  </style>