WebProject/vue_project/src/components/LoginForm.vue

<template>
  <div class="content">
    <div class="wrapper">
      <div class="form-wrapper">
        <div class="login-form">
          <div class="tips">
            <h1>登录.</h1>
            <span>没有账号?</span>
            <router-link to="/register"
              ><span class="signup-into">注册</span></router-link
            >
          </div>
          <div class="form-wrapper">
            <!-- 账号 -->
            <div class="input-wrapper user">
              <input type="text" class="inputs" v-model="loginForm.username" />
            </div>
            <!-- 密码 -->
            <div class="input-wrapper pwd">
              <input
                type="password"
                class="inputs"
                v-model="loginForm.password"
              />
            </div>

            <div class="input-wrapper veri-code">
              <input type="text" class="inputs veri-code-input" />
            </div>

            <div class="btn-wrapper">
              <button class="form-btn login-btn" @click="onLogin">
                Sign In
              </button>
            </div>
            <div class="other-login">
              <div class="divider">
                <span class="line"></span>
                <span class="divider-text">or</span>
                <span class="line"></span>
              </div>
              <div class="other-login-wrapper">
                <div class="other-login-item">
                  <img src="../assets/images/qq (1).png" alt="QQ" />
                </div>
                <div class="other-login-item">
                  <img src="../assets/images/微信 (1).png" alt="WeChat" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { login } from "../api/index";
const router = useRouter();

const loginForm = ref({
  username: "",
  password: "",
});

//向服务器发送请求
const onLogin = async () => {
  ElMessage.info("正在登录");
  await login(loginForm.value).then(
    (response) => {
      console.log(response);
      if (response.data.data.code == 501) {
        ElMessage.error("账号或密码错误，请重试");
      } else {
        ElMessage.success("登录成功");
        router.push({ path: "/index" });
      }
    },
    (error) => {
      console.log("登录失败");
    }
  );
};
</script>

<style scoped>
/* @import url("../assets/css/style.css"); */

@import url("../assets/css/style.scss");
</style>