平台登录页面设计（一）
  TEZNKK3IfmPf 2天前 6 0

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

<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)))
	// 存储到localStorage
	window.localStorage.setItem('uinfo：',u)
}

4、读取账号密码

created(){
     
       
		const uinfo=window.localStorage.getItem('uinfo')
		// 判断是否有账号密码
		if(uinfo){
     
       
			// 进行解密
			// const u= decodeURIComponent(escape(window.atob(uinfo)))
			// 转化位js对象,保存到loginForm
			this.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)
					// 存储到localStorage
					window.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对象,保存到loginForm
			this.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>
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2天前 0

暂无评论
TEZNKK3IfmPf
TEZNKK3IfmPf
作者其他文章 更多
Java中的异常处理机制详解

2024-11-16

C++ 实现Python String 中的strip,lstrip,rstrip函数

2024-11-16

JavaScript学习笔记（1.0）

2024-11-16

HTML5学习笔记(1.0)

2024-11-16

平台登录页面设计（一）

2024-11-16

JMeter三大重要组件——线程组、取样器、查看结果数（3）

2024-11-16

自动化测试——css元素定位

2024-11-16

CSS”叠叠乐“——WEB开发系列16

2024-11-16

从0开始开发一个简单web界面的学习笔记(HTML类)

2024-11-16

每日一练

2024-11-16

最新推荐 更多
Vue3学习笔记（1.0）

2024-11-16

Java中的异常处理机制详解

2024-11-16

C++ 实现Python String 中的strip,lstrip,rstrip函数

2024-11-16

JavaScript学习笔记（1.0）

2024-11-16

HTML5学习笔记(1.0)

2024-11-16

平台登录页面设计（一）

2024-11-16

JMeter三大重要组件——线程组、取样器、查看结果数（3）

2024-11-16

自动化测试——css元素定位

2024-11-16

CSS”叠叠乐“——WEB开发系列16

2024-11-16

从0开始开发一个简单web界面的学习笔记(HTML类)

2024-11-16

每日一练

2024-11-16

Linux shell编程学习笔记55：hostname命令——获取或设置主机名，显示IP地址和DNS、NIS

2024-11-16

报告CPU当前工作模式的汇编源代码

2024-11-16

Python自动化小技巧19——复制excel表放入word

2024-11-16

基于SpringBoot+Vue的中医药店管理系统的详细设计和实现(源码+lw+部署文档+讲解等)

2024-11-16

基于SpringBoot+Vue的房屋租赁系统的详细设计和实现(源码+lw+部署文档+讲解等)

2024-11-16

sysInfo-用MASM32编写的Windows系统软件、硬件、网络信息收集程序（补充了下载地址）

2024-11-16

模板-初阶

2024-11-16

字符串中的第一个唯一字符（基数排序的思想应用）

2024-11-16

QT硬件通讯基础

2024-09-20