工作需求，Vue实现登录

加油，新时代打工人！

vue 2.x
Element UI

<template><div class="body" :style="{'background-image': `url(${require('@/assets/images/login.png')})`}"><el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer"><h3 class="loginTitle">宠物ERP管理系统</h3><el-form-item prop="username"><el-input type="text" v-model="loginForm.username" placeholder="请输入用户名" ></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" placeholder="请输入密码" ></el-input></el-form-item><!-- <el-form-item prop="code"><el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width: 250px;margin-right: 5px"></el-input><img :src="captchaUrl"></el-form-item> --><el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox><el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button></el-form></div>
</template><script>
import {storageuserlogin} from "@/api/login"
import { setToken, setCookie,getCookie, removeCookie } from "@/utils/auth";
export default {name: "Login",data(){return{captchaUrl: "",loginForm:{username:"",password:""},checked: true,rules:{username:[{required:true,message:"请输入用户名",trigger:"blur"},{ min: 2, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' }],password:[{required:true,message:"请输入密码",trigger:"blur"},,{ min: 6,  message: '密码长度要大于6', trigger: 'blur' }]}}},created() {// 页面加载时检查是否有记住我的记录，并填充到表单中// const storedLoginData = localStorage.getItem('loginData');// if (storedLoginData) {//   const parsedData = JSON.parse(storedLoginData);//   this.loginForm.username = parsedData.username;//   this.loginForm.password = parsedData.password;},methods:{submitLogin(){//           // 处理登录逻辑//   const loginData = { username: this.loginForm.username, password: this.loginForm.password };//         if (this.checked) {//     // 如果记住我被选中，则将登录信息存入localStorage//          localStorage.setItem('loginData', JSON.stringify(loginData));//         } else {//     // 取消记住我时，从localStorage中移除已存储的登录信息//            localStorage.removeItem('loginData');//         }this.$refs["loginForm"].validate(valid => {if(valid){storageuserlogin({...this.loginForm}).then(res => {if(res.code==0){this.$message({message: "登录成功",type: "success"});setToken(res.data.tokenValue);setCookie("userInfo", res.data.tag);this.$router.push({ path: "/home" });}else{this.$message({message: "登录失败",type: "error"}  )}});}});}}
};
</script><style lang="less" scoped>.loginContainer{border-radius: 15px;background-clip: padding-box;text-align: left;margin: auto;margin-top: 280px;width: 350px;padding: 15px 35px 15px 35px;background: aliceblue;border:1px solid blueviolet;box-shadow: 0 0 25px #f885ff;}.loginTitle{margin: 0px auto 48px auto;text-align: center;font-size: 26px;}.loginRemember{text-align: left;margin: 0px 0px 15px 0px;}
.body {width:100%;height:calc(-10px + 100vh);background-repeat: no-repeat;background-size: cover;background-position: center;display:flex;justify-content:center;align-items:center;
}
</style>

效果图