jiangchengfeiyi-Web/src/views/Login.vue

<template>
    <div class="wrapper">
      <div style="margin: 200px auto; background-color: #fff; width: 800px; height: 400px; border-radius: 10px">
        <div >
          <img
              class="image"
              style="height: 400px;width: 300px;float: left;"
              src="../img/Login/login_top.png"
          />
        </div>
        <div style="height: 400px;width: 430px;float: left;margin:30px 0 0 40px;">
          <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>匠承非遗后台管理系统</b></div>
          <el-form :model="user"  ref="userForm">
            <el-form-item prop="username">
              <h2>账号</h2>
              <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <h2>密码</h2>
              <el-input size="medium" style="margin: 10px 0;" prefix-icon="el-icon-lock" show-password v-model="password"></el-input>
            </el-form-item>
            <div style="margin: 10px 0; text-align: right">
              <div  style="display: block;
                    font-size: 15px;
                    width: 80%;
                    margin: 50px  auto 0 auto;
                    text-align: center;
                    border-radius: 20px;
                    background-color: rgb(172, 115, 82);
                    line-height: 40px;
                    " @click="Login">登录</div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { SuccessInfo, ErrorInfo, WarnInfo, CommInfo  } from '@/utils/messageInfo';
  import {useRouter} from 'vue-router'
  import myAxios from '@/api/myAxios';
  import { userStore } from '../store/userStore';

  const user = ref({})
  const username = ref('')
  const password = ref('')
  const router = useRouter()
  const store = userStore()

 

  const Login = async ()=>{
    if(username.value === '' || password.value === '') {
      ErrorInfo('检查账号或密码是否成功填写')
      return;
    }
    const res: any = await myAxios.post("/user/login",{
      userAccount: username.value,
      userPassword: password.value
    })
    // console.log(res.data)
    if(res.data.code === 1 && res ?.data) {
      SuccessInfo('登陆成功')
      //将用户信息放入pinia
      await store.getLoginUser(res.data.data)
      //跳转个人中心
      await router.replace('/PersonalCenter')
    } else {
      WarnInfo(res.data.message)
    return;  //空返回结束函数
    }
  }
  </script>
  
  <style scoped>
    .wrapper{
      height: 100vh;
      background-image:url(https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FzGMkHxQk-login.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;
    }
  </style>