平台登录页面实现(一)

news/2024/3/5 6:38:11/文章来源:https://blog.csdn.net/YZL40514131/article/details/127700789

在这里插入图片描述


文章目录

  • 一、实现用户名、密码、登录按钮、记住用户表单
    • 1、全局css代码定义在asserts/css/global.css
  • 二、用户名、密码、记住用户的双向绑定
  • 三、没有用户,点击注册功能实现
  • 四、实现输入用户名、密码、点击登录按钮进行登录操作
  • 五、实现表单项校验
  • 六、提交表单预验证
    • 1、在el-form标签通过ref属性,绑定一个methods中定义的方法
    • 2、在method中定义一个ref
    • 3、对表单进行预校验
  • 七、记住账号和密码
    • 1、保存token
    • 2、保存用户名
    • 3、判断是否需要记住用户的账号密码,将账号密码保存在localStorage中
    • 4、读取账号密码
    • 5、如果不需要记住账号密码将localStorage中的信息删除
  • 八、写好的登录页

一、实现用户名、密码、登录按钮、记住用户表单

<template><LoginBackVue><div class="login_box"><!-- 显示logo的地方 --><div class="log"></div><!-- 登录的表单 --><el-form><el-form-item><el-input prefix-icon="User" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item label="记住用户"><el-switch /></el-form-item><el-form-item><el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button></el-form-item></el-form></div></LoginBackVue>
</template><script>
import LoginBackVue from "@/components/LoginBack.vue";export default{components:{LoginBackVue}
}</script><style scoped>/* 设置登录框的宽高和位置居中 */.login_box{width: 500px;height:350px;margin: calc((100vh - 350px)/2) auto;text-align: center;color: white;}
</style>

1、全局css代码定义在asserts/css/global.css


/* --------------------登录页面--------------------- *//* 修改element-plus 输入框表单的样式*/
.login_box .el-input__wrapper{background: none;box-shadow: none;border-bottom: solid 1px #00608c;border-radius: 0;
}
/* 修改输入框图表样式 */
.login_box .el-input__prefix{color: #fff;font-size: 20px;
}

在这里插入图片描述
main.js中导入,全局生效
在这里插入图片描述

二、用户名、密码、记住用户的双向绑定

<template><LoginBackVue><div class="login_box"><!-- 显示logo的地方 --><div class="log"></div><!-- 登录的表单 --><el-form><el-form-item><el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item label="记住用户"><el-switch  v-model="loginForm.status" /></el-form-item><el-form-item><el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button></el-form-item></el-form></div></LoginBackVue>
</template><script>
import LoginBackVue from "@/components/LoginBack.vue";export default{data(){return{loginForm:{username:"",password:"",status:false}}},components:{LoginBackVue}
}</script><style scoped>/* 设置登录框的宽高和位置居中 */.login_box{width: 500px;height:350px;margin: calc((100vh - 350px)/2) auto;text-align: center;color: white;}</style>

在这里插入图片描述

三、没有用户,点击注册功能实现

<template><LoginBackVue><div class="login_box"><!-- 显示logo的地方 --><div class="log"></div><!-- 登录的表单 --><el-form><el-form-item><el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item label="记住用户"><el-switch  v-model="loginForm.status" /></el-form-item><el-form-item><el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button></el-form-item></el-form><div class="isregister">没有账号?<span @click="register">点击注册</span></div></div></LoginBackVue>
</template><script>
import LoginBackVue from "@/components/LoginBack.vue";export default{data(){return{loginForm:{username:"",password:"",status:false}}},methods:{register(){this.$message({type:'warning',message:"平台未开放注册功能"})}},components:{LoginBackVue}
}</script><style scoped>/* 设置登录框的宽高和位置居中 */.login_box{width: 500px;height:350px;margin: calc((100vh - 350px)/2) auto;text-align: center;color: white;}.isregister{width: 100%;text-align: left;}.isregister span{color: turquoise;cursor: pointer;}</style>

四、实现输入用户名、密码、点击登录按钮进行登录操作

1、表单输入框,绑定输入的数据
2、点击登录按钮,发送请求完成登录

<template><LoginBackVue><div class="login_box"><!-- 显示logo的地方 --><div class="log"></div><!-- 登录的表单 --><el-form><el-form-item><el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/></el-form-item><el-form-item><el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item label="记住用户"><el-switch  v-model="loginForm.status" /></el-form-item><el-form-item><el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button></el-form-item></el-form><div class="isregister">没有账号?<span @click="register">点击注册</span></div></div></LoginBackVue>
</template><script>
import LoginBackVue from "@/components/LoginBack.vue";export default{data(){return{loginForm:{username:"",password:"",status:false}}},methods:{// 点击登录的方法async submitLogin(){const response=await this.$api.login(this.loginForm)if (response.status===200){// 提示登录成功this.$message({type:"success",message:"登录成功"})// 页面跳转(后面加)this.$router.push({"name":"home"})}},// 点击注册register(){this.$message({type:'warning',message:"平台未开放注册功能"})}},components:{LoginBackVue}
}</script><style scoped>/* 设置登录框的宽高和位置居中 */.login_box{width: 500px;height:350px;margin: calc((100vh - 350px)/2) auto;text-align: center;color: white;}.isregister{width: 100%;text-align: left;}.isregister span{color: turquoise;cursor: pointer;}</style>

在这里插入图片描述

五、实现表单项校验

步骤:
1、在el-form标签上绑定rules属性,指定校验的规则对象
在这里插入图片描述
2、在data中定义绑定校验规则
在这里插入图片描述
3、在el-form-item标签中指定校验的字段
在这里插入图片描述
在这里插入图片描述

<template><LoginBackVue><div class="login_box"><!-- 显示logo的地方 --><div class="log"></div><!-- 登录的表单 --><el-form :rules="loginRules" :model="loginForm"><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item label="记住用户"><el-switch  v-model="loginForm.status" /></el-form-item><el-form-item><el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button></el-form-item></el-form><div class="isregister">没有账号?<span @click="register">点击注册</span></div></div></LoginBackVue>
</template><script>
import LoginBackVue from "@/components/LoginBack.vue";export default{data(){return{// 登录输入的数据loginForm:{username:"",password:"",status:false},// 登录表单的校验规则loginRules:{// username的校验规则username:[{required:true,message:"用户名不能为空",trigger:'blur'}],// password的校验规则password:[{required:true,message:"密码不能为空",trigger:'blur'},{min:4,max:18,message:"密码长度需要在6-18位之间",trigger:'blur'}]}}},methods:{// 点击登录的方法async submitLogin(){const response=await this.$api.login(this.loginForm)if (response.status===200){// 提示登录成功this.$message({type:"success",message:"登录成功"})// 页面跳转(后面加)this.$router.push({"name":"home"})}else{this.$message({type:"error",message:response.data})}},// 点击注册register(){this.$message({type:'warning',message:"平台未开放注册功能"})}},components:{LoginBackVue}
}</script><style scoped>/* 设置登录框的宽高和位置居中 */.login_box{width: 500px;height:350px;margin: calc((100vh - 350px)/2) auto;text-align: center;color: white;}.isregister{width: 100%;text-align: left;}.isregister span{color: turquoise;cursor: pointer;}</style>

六、提交表单预验证

vue——》全局属性$refs={}
检测页面中是否有ref属性,如果有会将ref属性添加到$refs={}
$refs={
loginRef:元素(组件)
}

1、在el-form标签通过ref属性,绑定一个methods中定义的方法

<el-form :model="loginForm" :rules="loginRules" ref="loginRef">

2、在method中定义一个ref

clickLogin(){// 对登录的表单数据进行验证this.$refs['loginRef'].validate((res)=>{if(res){this.submitLogin()}})
},

3、对表单进行预校验

methods:{clickLogin(){// 对登录的表单数据进行验证this.$refs['loginRef'].validate((res)=>{if(res){this.submitLogin()}})},// 发送请求到后端async submitLogin(){const response=await this.$api.login(this.loginForm)if(response.status===200){// 提示登录成功this.$message({type:'success',message:'登录成功'})// 页面跳转(后面加)this.$router.push({name:'index'})}else{this.$message({type:'error',message:response.data})}},register(){this.$message({type:'warning',message:'平台暂时未开放注册功能'})}
},

七、记住账号和密码

1、保存token

window.sessionStorage.setItem('token',response.data.token)

2、保存用户名

window.sessionStorage.setItem('username',response.data.username)

3、判断是否需要记住用户的账号密码,将账号密码保存在localStorage中

特别注意
需要将this.loginForm转换为json格式数据

if(this.loginForm.status){// 将账号密码转换为json字符串const uinfo=JSON.stringify(this.loginForm)// 进行编码(加密)const u=window.btoa(unescape(encodeURIComponent(uinfo)))// 存储到localStoragewindow.localStorage.setItem('uinfo:',u)
}

4、读取账号密码

created(){const uinfo=window.localStorage.getItem('uinfo')// 判断是否有账号密码if(uinfo){// 进行解密// const u= decodeURIComponent(escape(window.atob(uinfo)))// 转化位js对象,保存到loginFormthis.loginForm =JSON.parse(uinfo)}}

5、如果不需要记住账号密码将localStorage中的信息删除

window.localStorage.removeItem('uinfo')

在这里插入图片描述

八、写好的登录页

<template><LoginBackVue><div class="login_box"><!-- 显示logo的地方 --><div class="log"></div><!-- 登录的表单 --><el-form :rules="loginRules" :model="loginForm" ref="loginRef"><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item label="记住用户"><el-switch  v-model="loginForm.status" /></el-form-item><el-form-item><el-button color="#00608c" style="width: 100%" @click="clickLogin">登录</el-button></el-form-item></el-form><div class="isregister">没有账号?<span @click="register">点击注册</span></div></div></LoginBackVue>
</template><script>
import LoginBackVue from "@/components/LoginBack.vue";export default{data(){return{// 登录输入的数据loginForm:{username:"",password:"",status:false},// 登录表单的校验规则loginRules:{// username的校验规则username:[{required:true,message:"用户名不能为空",trigger:'blur'}],// password的校验规则password:[{required:true,message:"密码不能为空",trigger:'blur'},{min:4,max:18,message:"密码长度需要在6-18位之间",trigger:'blur'}]}}},methods:{clickLogin(){// 对登录的表单数据进行校验this.$refs['loginRef'].validate((res) =>{if(res){this.submitLogin()}})},// 点击登录的方法async submitLogin(){const response=await this.$api.login(this.loginForm)if (response.status===200){// 保存token,用户名window.sessionStorage.setItem('token',response.data.token)window.sessionStorage.setItem('uname',response.data.username)// 判断是否需要记住用户名和密码if(this.loginForm.status){//将账号密码信息保存到localStorage中// 将账号密码转换为json字符串const uinfo=JSON.stringify(this.loginForm)// 存储到localStoragewindow.localStorage.setItem('uinfo',uinfo)}else{window.localStorage.removeItem('uinfo')}// 提示登录成功this.$message({type:"success",message:"登录成功"})// 页面跳转(后面加)this.$router.push({"name":"index"})}else{this.$message({type:"error",message:response.data})}},// 点击注册register(){this.$message({type:'warning',message:"平台未开放注册功能"})}},components:{LoginBackVue},created(){const uinfo=window.localStorage.getItem('uinfo')// 判断是否有账号密码if(uinfo){// 进行解密// const u= decodeURIComponent(escape(window.atob(uinfo)))// 转化位js对象,保存到loginFormthis.loginForm =JSON.parse(uinfo)}}
}</script><style scoped>/* 设置登录框的宽高和位置居中 */.login_box{width: 500px;height:350px;margin: calc((100vh - 350px)/2) auto;text-align: center;color: white;}.isregister{width: 100%;text-align: left;}.isregister span{color: turquoise;cursor: pointer;}</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ldbm.cn/p/138311.html

如若内容造成侵权/违法违规/事实不符,请联系编程新知网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git报错:Failed to connect to 127.0.0.1 port 1080

Bug描述 由于在试了网上的这条命令 git config --global http.proxy socks5 127.0.0.1:1080 git config --global https.proxy socks5 127.0.0.1:1080git config --global http.proxy 127.0.0.1:1080 git config --global https.proxy 127.0.0.1:1080Bug描述&#xff1a;Faile…

《Upload-Labs》01. Pass 1~13

Upload-Labs 索引前言Pass-01题解 Pass-02题解总结 Pass-03题解总结 Pass-04题解 Pass-05题解总结 Pass-06题解总结 Pass-07题解总结 Pass-08题解总结 Pass-09题解 Pass-10题解 Pass-11题解 Pass-12题解总结 Pass-13题解 靶场部署在 VMware - Win7。 靶场地址&#xff1a;https…

性格孤僻怎么办?改变性格孤僻的4种方法

性格孤僻是比较常见的说法&#xff0c;日常中我们说某人性格孤僻&#xff0c;意思就是这人不太合群&#xff0c;喜欢独来独往&#xff0c;话少&#xff0c;人际关系不太好&#xff0c;其言行往往不符合大众的价值观。从性格孤僻的角度来看&#xff0c;可能跟很多种心理疾病存在…

uniapp 实现下拉筛选框 二次开发定制

前言 最近又收到了一个需求&#xff0c;需要在uniapp 小程序上做一个下拉筛选框&#xff0c;然后找了一下插件市场&#xff0c;确实有找到&#xff0c;但不过他不支持搜索&#xff0c;于是乎&#xff0c;我就自动动手&#xff0c;进行了二开定制&#xff0c;站在巨人的肩膀上&…

经历网 微信二维码 制作方法

1、谷歌浏览器&#xff0c;打开要制作微信二维码的 网站页面 2、点击页面空白处&#xff08;此步为了使鼠标激活页面&#xff0c;可省&#xff09;&#xff0c;点击鼠标右键&#xff0c;弹窗 点选 为此页面创建二维码&#xff0c;点击下载到自己指定的地方。完成。 下载下来的…

【前段基础入门之】=>CSS 常用的字体文本属性

导读&#xff1a; 这一章&#xff0c;主要分享一些 CSS 中的一些&#xff0c;常用的 字体和文本方面的属性。 文章目录 字体属性字体大小字体族字体风格字体粗细字体复合写法 文本属性文本间距文本修饰文本缩进文本水平对齐行高vertical-align 字体属性 字体大小 属性名&…

inndy_echo

inndy_echo Arch: i386-32-little RELRO: Partial RELRO Stack: No canary found NX: NX enabled PIE: No PIE (0x8048000)32位&#xff0c;只开了NX int __cdecl __noreturn main(int argc, const char **argv, const char **envp) {char s; // [espCh…

麒麟信安服务器操作系统V3.5.2重磅发布!

9月25日&#xff0c;麒麟信安基于openEuler 22.03 LTS SP1版本的商业发行版——麒麟信安服务器操作系统V3.5.2正式发布。 麒麟信安服务器操作系统V3定位于电力、金融、政务、能源、国防、工业等领域信息系统建设&#xff0c;以安全、稳定、高效为突破点&#xff0c;满足重要行…

深度学习——模型选择、欠拟合和过拟合

深度学习——模型选择、欠拟合和过拟合 文章目录 前言一、训练误差和泛化误差1.1. 统计学习理论1.2. 模型复杂性 二、模型选择2.1. 验证集2.2. K折交叉验证 三、欠拟合 or 过拟合3.1. 模型复杂性3.2. 数据集大小 四、多项式回归4.1. 生成数据集4.2. 对模型进行训练和测试4.3. 三…

Elastic SQL 输入:数据库指标可观测性的通用解决方案

作者&#xff1a;Lalit Satapathy, Ishleen Kaur, Muthukumar Paramasivam Elastic SQL 输入&#xff08;metricbeat 模块和输入包&#xff09;允许用户以灵活的方式对许多支持的数据库执行 SQL 查询&#xff0c;并将结果指标提取到 Elasticsearch。 本博客深入探讨了通用 SQL …

数据链路层 MTU 对 IP 协议的影响

在介绍主要内容之前&#xff0c;我们先来了解一下数据链路层中的"以太网" 。 “以太网”不是一种具体的网络&#xff0c;而是一种技术标准&#xff1b;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内容。 下面我们再来了解一下以太网数据帧&#xff…

Transformers.js v2.6 现已发布

&#x1f92f; 新增了 14 种架构 在这次发布中&#xff0c;我们添加了大量的新架构&#xff1a;BLOOM、MPT、BeiT、CamemBERT、CodeLlama、GPT NeoX、GPT-J、HerBERT、mBART、mBART-50、OPT、ResNet、WavLM 和 XLM。这将支持架构的总数提升到了 46 个&#xff01;以下是一些示例…

ubuntu20安装nvidia驱动

1. 查看显卡型号 lspci | grep -i nvidia 我的输出&#xff1a; 01:00.0 VGA compatible controller: NVIDIA Corporation GP104 [GeForce GTX 1080] (rev a1) 01:00.1 Audio device: NVIDIA Corporation GP104 High Definition Audio Controller (rev a1) 07:00.0 VGA comp…

stable diffusion模型评价框架

GhostReview:全球第一套AI绘画ckpt评测框架代码 - 知乎大家好&#xff0c;我是_GhostInShell_&#xff0c;是全球AI绘画模型网站Civitai的All Time Highest Rated (全球历史最高评价) 第二名的GhostMix的作者。在上一篇文章&#xff0c;我主要探讨自己关于ckpt的发展方向的观点…

测试用例的编写(面试常问)

作者&#xff1a;爱塔居 专栏&#xff1a;软件测试 作者简介&#xff1a;不断总结&#xff0c;才能变得更好~踩过的坑&#xff0c;不能再踩~ 文章简介&#xff1a;常见的几个测试用例。 一、淘宝购物车 二、登录页面 三、三角形测试用例 abc结果346普通三角形333等边三角形334…

Scala第一章节

Scala第一章节 scala总目录 章节目标 理解Scala的相关概述掌握Scala的环境搭建掌握Scala小案例: 做最好的自己 1. Scala简介 1.1 概述 ​ Scala(斯嘎拉)这个名字来源于"Scalable Language(可伸缩的语言)", 它是一门基于JVM的多范式编程语言, 通俗的说: Scala是一…

【从入门到起飞】JavaSE—Stream流

&#x1f38a;专栏【JavaSE】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出我的问题 文章目录 &#x1f354;Stream流的作用&#x1f354;Stream流的使用步骤&#x1f384;获取Strea…

Android Shape设置背景

设置背景时&#xff0c;经常这样 android:background“drawable/xxx” 。如果是纯色图片&#xff0c;可以考虑用 shape 替代。 shape 相比图片&#xff0c;减少资源占用&#xff0c;缩减APK体积。 开始使用。 <?xml version"1.0" encoding"utf-8"?…

100行 python实现Android与windows局域网文件夹同步

编程解决一切烦恼 Obsidian搭建个人笔记 最近在使用Obsidian搭建个人云笔记 尽管我使用腾讯云COS图床gitee实现了云备份&#xff0c;但是在Android上使的Obsidian备份有点麻烦。还好我主要是在电脑端做笔记&#xff0c;手机只是作为阅读工具。 所以&#xff0c;我写一个局域…

Spring Boot 技术架构图(InsCode AI 创作助手辅助)

Spring Boot 技术架构是一种用于构建现代应用程序的框架&#xff0c;它可以与各种前端、代理、网关、业务服务、中间件、存储、持续集成和容器服务集成在一起&#xff0c;以创建功能强大的应用程序。 源文件下载链接&#xff01;&#xff01;&#xff01;&#xff01;&#xff…