后台管理系统【登录页面】

<template><div class="login_container"><div class="login_box"><!-- 头像区域 --><div class="avatar_box"><img src="../assets/liqin.jpg" alt="" /></div><!-- 登录表单区域   :model=“loginForm”是登录表单的数据绑定对象 :rules:"。。"是表单的验证规则对象 --><el-formref="loginFormRef":model="loginForm":rules="loginFormRules"label-width="0px"class="login_form"><!-- 用户名 --><el-form-item prop="username"><el-inputv-model="loginForm.username"prefix-icon="el-icon-s-custom"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-inputv-model="loginForm.password"type="password"prefix-icon="el-icon-lock"></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="warning" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div>
</template><script>
export default {name: "Login",data() {return {// 这是登录表单的数据绑定对象loginForm: {username: "admin",password: "123456",},//这是表单的验证规则对象loginFormRules: {//验证用户名是否合法username: [{ required: true, message: "请输入登录名称", trigger: "blur" },{ min: 3, max: 5, message: "用户名为admin", trigger: "blur" },],//验证密码是否合法password: [{ required: true, message: "请输入登录密码", trigger: "blur" },{min: 6,max: 15,message: "长度在 6 到 15 个字符",trigger: "blur",},],},};},methods: {//点击重置按钮，重置登录表单resetLoginForm() {console.log(this);this.$refs.loginFormRef.resetFields(); //对整个表单进行重置},login() {//点击登录按钮       这里通过this.$refs.loginFormRef拿到vcthis.$refs.loginFormRef.validate(async (valid) => {//对整个表单进行校验的方法 validateif (!valid) return; //如果valid等于false，直接不发起请求const { data: res } = await this.$http.post("login", this.loginForm); // 用了对象解构赋值console.log("Login==>res", res); // 解构赋值出一个data属性，重命名为resif (res.meta.status !== 200) return this.$message.error("登陆失败"); //return就登陆失败this.$message.success("登录成功"); //没有return就登陆成功  （$message是 elementUI提供的弹窗方法）//1.将登陆成功后的token，保存到客户端的sessionStorage中//1.1项目中除了登录之外的其他API接口，必须在登陆之后才能访问//1.2token只应该在当前网站打开期间生效，所以把token保存在sessionstorage中window.sessionStorage.setItem("token", res.data.token);//2.通过编程式导航跳转到后台主页，路由地址是/home this.$router.push("/home");});},//      * 校验全部字段// validate() {//   this.$refs['form'].validate((valid) => {//     console.log(valid); // true/false//   });// },      这个是elementUI里面的校验表单的方法！！！！！！！！！！！！！！！！// 点击回车键登录keyDown(e) {if (e.keyCode == 13) {this.login();}},},mounted() {window.addEventListener("keydown", this.keyDown);},destroyed() {window.removeEventListener("keydown", this.keyDown, false); // 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，// 而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件},
};
</script><style lang="less" scoped>
.login_container {// background-color: #2b4b6b;background-color: skyblue;background: url(../assets/333.jpg); //设置背景图片// background-repeat: no-repeat;height: 100%;background: cover;background-size: 100% 100%;
}
.login_box {width: 450px;height: 300px;// background-color: #fff;background-color: pink;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background: url(../assets/aa.gif);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;transition: all 2s;}img:hover {transform: rotate(360deg);}}
}
.btns {display: flex;justify-content: flex-end;
}
.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box; //这样相当于把padding和border的值都算在content里::v-deep.el-form-item__error {color: black;}
}
</style>

后台管理系统【登录页面】相关推荐

React后台管理系统-登录页面
登录页面 <div className="col-md-4 col-md-offset-4"> <div className=&qu ...
后台管理系统-登录页面
对于element-ui的修改:完成登录业务静态组件完成 <el-button :loading="loading" type="primary" st ...
【Vue 实战项目】后台管理系统登录页详解附源码
提示:前端查漏补缺,仅代表个人观点. 文章目录一.先看效果图二.实战步骤 1. 创建项目 2. 引入库 3. 登录页关键代码三.页面源代码总结提示:项目源代码除了登录页面还有动态路由一.先 ...
后台管理系统-------登录功能@zj-zhangjie
后台管理系统-------登录功能实现(element-ui) 登录页面代码(login): <template><div class="login">&l ...
SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
淘淘商城第20讲——展示后台管理系统首页面
我们前面做了那么多准备工作不是白做的,大家如果坚持到现在,真的值得给自己一个拥抱!现在我们就来开始着手处理后台管理系统. 首先,大家需要整合淘淘商城的后台管理系统静态页面,你可能想问这些静态页面怎么获 ...
后台管理系统——登录功能
登录功能 1. 根据UI图完成页面编写页面支持登录方式账号登录包括用户名, 密码 ,图形验证码 ,短信验证码账号登录形式为表单 // html <template><el-fo ...
用ASP.NET实现简单的超市管理系统-登录页面
一. 任务描述 1. 使用Asp.NET技术,完成超市商品管理系统 2. 开发工具:VS2010 3. 数据库:SQL Server 2008 4. 功能模块:登录. ...
Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录主页 #left>a:nth-child(4) {} 登录页主页 #left& ...
搭建Vue3 后台管理框架 —— 登录页面
声明本文章只是自己搭建后台框架得一个笔记,不作为任何项目搭建指南,大家看着乐呵乐呵就行. 之前把项目简单配置了依赖路由算是基础打出来了细节肯定还需要打磨,然后就是脸面(登录页面),各种疯狂查询搜 ...

后台管理系统【登录页面】

后台管理系统【登录页面】相关推荐

最新文章

热门文章