App登录页面以及记住密码的实现

最新推荐文章于 2024-10-09 11:19:11 发布
最新推荐文章于 2024-10-09 11:19:11 发布
阅读量265 收藏 1
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59527403/article/details/133953637
版权 
<view class="checkbox">
		<u-checkbox-group><u-checkbox shape="square" :checked="rememberPsw" v-model="rememberPsw"
					@change="saveps()" label="记住密码"></u-checkbox></u-checkbox-group>
		</view>
		<view class="action-btn">
			<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg">登录</button>
</view>

js代码

export default {
		data() {
			return {
				rememberPsw: true,
				radio1: 0,
				showPassword: true,
				showPasswordText: true,
				loginForm: {
					username: "admin",
					password: "admin12345",
					// username: "",
					// password: "",
				},
			}
		},
	},
	created() {
		//页面加载完成，获取本地存储的账号及密码  account账号 userPwd密码 rememberPsw就记住密码
		const account = uni.getStorageSync('account');
		const userPwd = uni.getStorageSync('userPwd');
		const rememberPsw1 = uni.getStorageSync('rememberPsw');
		//若三个都有就进行赋值，没有就初始化
		if (account && userPwd && rememberPsw1) {
			this.loginForm.username = account;
			this.loginForm.password = userPwd;
			this.rememberPsw = rememberPsw1;
		} else {
			this.loginForm.username = '';
			this.loginForm.password = '';
			this.rememberPsw = false;
		}
	},
		methods: {
			//根据选项按键来决定是否在本地存储账号密码
			saveps() {
				this.rememberPsw = !this.rememberPsw;  //选中不选中来回切换
				this.setPsw();
			},
			//记住密码操作
			setPsw() {
			//如果选中记住密码
				if (this.rememberPsw) {
					//用户勾选“记住密码”
					uni.setStorageSync('account', this.loginForm.username);
					uni.setStorageSync('userPwd', this.loginForm.password);
					uni.setStorageSync('rememberPsw', this.rememberPsw);
				} else {
					//用户没有勾选“记住密码”
					uni.removeStorageSync('account');
					uni.removeStorageSync('userPwd');
					uni.removeStorageSync('rememberPsw');
					this.loginForm.account = '';
					this.loginForm.userPwd = '';
				}
			},
			showPassWord() {
				this.showPassword = !this.showPassword;
				this.showPasswordText = !this.showPasswordText;
			},
		}

记住密码
在这里插入图片描述
不记住密码
在这里插入图片描述

完整代码：

<template>
	<view class="container">
		<view class="normal-login-container">
			<view class="logo-content">
				<view class="title">
					<text >
						您好,
					</text><br>
					<text>欢迎</text>
				</view>
			</view>
			<view class="login-form-content">
				<view class="input-item">

					<view class="input-itemOne">
						<view class="iconfont icon-user icon"></view>
						<view class="text">账号</view>
					</view>
					<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" />
				</view>
				<view class="input-item">
					<view class="input-itemOne">
						<view class="iconfont icon-password icon"></view>
						<view class="text">密码</view>
					</view>
					<view class="uni_password">
						<input v-model="loginForm.password" :type="showPasswordText ? 'password' : 'text'"
							placeholder="请输入密码" style="font-size: 14px;border: none;outline: none;">
						</input>
						<view class="">
							<img style="width: 18px;height: 11px;" src="../static/eye-xianshi.png" alt=""
								v-show="!showPasswordText" @click="showPasswordText = true">
							<img style="width: 18px;height: 11px;" src="../static/eye-yincang.png" alt=""
								v-show="showPasswordText" @click="showPasswordText = false">
						</view>
					</view>
				</view>
			</view>
			<!-- //记住密码 -->
			<view class="checkbox">
				<u-checkbox-group><u-checkbox shape="square" :checked="rememberPsw" v-model="rememberPsw"
						@change="saveps()" label="记住密码"></u-checkbox></u-checkbox-group>
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	getCodeImg
	// } from '@/api/login'
	export default {
		data() {
			return {
				rememberPsw: true,
				radio1: 0,
				showPassword: true,
				showPasswordText: true,
				codeUrl: "",
				captchaEnabled: false,
				// 用户注册开关
				register: false,
				globalConfig: getApp().globalData.config,
				loginForm: {
					username: "admin",
					password: "admin123",
					// username: "",
					// password: "",
					code: "",
					uuid: '',
				},
			}
		},
		created() {
			// this.getCode()
			//页面加载完成，获取本地存储的账号及密码
			const account = uni.getStorageSync('account');
			const userPwd = uni.getStorageSync('userPwd');
			const rememberPsw1 = uni.getStorageSync('rememberPsw');
			//若三个都有就进行赋值，没有就初始化
			if (account && userPwd && rememberPsw1) {
				this.loginForm.username = account;
				this.loginForm.password = userPwd;
				this.rememberPsw = rememberPsw1;
			} else {
				this.loginForm.username = '';
				this.loginForm.password = '';
				this.rememberPsw = false;
			}
		},

		methods: {
			//根据选项按键来决定是否在本地存储账号密码
			saveps() {
				this.rememberPsw = !this.rememberPsw;
				this.setPsw();
			},
			//记住密码操作
			setPsw() {
				if (this.rememberPsw) {
					//用户勾选“记住密码”
					uni.setStorageSync('account', this.loginForm.username);
					uni.setStorageSync('userPwd', this.loginForm.password);
					uni.setStorageSync('rememberPsw', this.rememberPsw);
				} else {
					//用户没有勾选“记住密码”
					uni.removeStorageSync('account');
					uni.removeStorageSync('userPwd');
					uni.removeStorageSync('rememberPsw');
					this.loginForm.account = '';
					this.loginForm.userPwd = '';
				}
			},
			showPassWord() {
				this.showPassword = !this.showPassword;
				this.showPasswordText = !this.showPasswordText;
			},
			// 登录方法
			async handleLogin() {
				if (this.loginForm.username === "") {
					this.$modal.msgError("请输入您的账号")
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
				} else {
					this.$modal.loading("登录中，请耐心等待...")
					this.pwdLogin()
				}
			},
			// 密码登录
			async pwdLogin() {
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch()
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index')
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-image: url('../static/bgc.png');
		/* 背景图片的路径 */
		background-size: cover;
		/* 背景图片的尺寸适应容器 */
		background-repeat: no-repeat;
		/* 不重复平铺背景图片 */
		height: 100vh;
		/* 设置容器的高度，以便填满整个屏幕 */
	}

	.action-btn {
		width: 305px;
		height: 45px;
		margin-left: 35px;
		margin-right: 35px;
	}

	// page {
	// 	background-color: #ffffff;
	// }

	.normal-login-container {
		width: 100%;

		.logo-content {
			margin-left: 35px;
			width: 100%;
			font-size: 21px;
			// padding-top: 10%;

			.title {
				padding-top: 57px;
				color: #FFF;
				font-family: PingFang SC;
				line-height: 44px;
			}
		}

		.login-form-content {

			margin-top: 107px;

			.input-item {
				margin-right: 35px;

				.input-itemOne {
					display: flex;

					.icon {
						margin-right: 7px;
						margin-left: 35px;
						font-family: PingFang SC;
						font-size: 18px;
						font-style: normal;
						font-weight: bold;
						border: 0px solid #333333;
					}

					.text {
						font-size: 15px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						padding-bottom: 11px;
					}

				}

				.input {
					color: #000;
					font-family: PingFang SC;
					margin-left: 35px;
					font-size: 14px;
					margin-bottom: 20px;
					padding-bottom: 4px;
					border-bottom: 1px solid #E6E6E6;
				}

				// 请输入密码
				.uni_password {
					margin-left: 35px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #E6E6E6;
					margin-bottom: 21px;
					padding-bottom: 4px;

				}
			}
		}

		// 按钮
		.checkbox {
			width: 15px;
			height: 15px;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			margin-left: 37px;
			margin-bottom: 10px;
		}
	}
</style>
愿➣
关注
Android 记住密码实现
qq_46290634的博客
01-28 1089
以下有三个点 第一点是记住密码， 第二点是点击隐藏点击显示， 第三点是登录存储。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.andro
android怎么实现记住密码功能,安卓 实现记住用户名和密码功能
weixin_39836726的博客
05-25 1121
开发步骤：在程序布局中键入复选框在LoginActivity类中加入登陆处理的方法3.在 LoginActivity类中加入是否记住密码的判断方法4.运用SharedPreferences进行用户名和密码的存储5.如果用户名和密码正确，会跳转到欢迎界面注意问题要注意数据之间的转换复选框的不同状态处理SharedPreferences的用法页面的正确跳转事件处理的主要代码protected void...
记住密码"功能的正确设计
weixin_33994444的博客
12-25 217
这个功能简直就是一个安全隐患，我觉得并不是所有的程序员都知道怎么设计这个事。一般的设计 是——一时用户勾选了这个功能，系统会生成一个cookie，cookie包括用户名和一个固定的散列值，这个固定的散列值一直使用。这样，你就可以在所有的设备和客户上都可以登录，而且可以有多个用户同时登录。这个并不是很安全。下面是一些更为安全的方法供你参考： 1）在cookie中，保存三个东西——用户名，登...
android怎么实现记住密码功能,Android App“记住密码”功能的实现逻辑
weixin_30177835的博客
05-25 2218
主要是通过SharedPreferences对象来保存密码，详见【Android SharedPreferences的使用】1、如果“记住密码”为勾选状态，那么在登陆时需要将用户信息存放在SharedPreferences选项中：private void isRemember() {//“记住密码”为勾选状态if (chkPwd.isChecked()) {if (sp == null) {sp ...
android怎么实现记住密码功能,android 记住密码功能实现
weixin_32349711的博客
05-25 678
android:id="@+id/login"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="登录" />下面我们介绍下主要实现的功能代码:package com.example.m;im...
uni-app登录实例的实现
10-29
总的来说，uni-app结合HBuilderX为开发者提供了高效且便捷的开发环境，实现登录功能并不复杂。通过理解uni-app的组件、API以及网络请求机制，开发者可以快速搭建起一个功能完善的登录系统。同时，不断学习和实践，...
Android制作登录页面并且记住账号密码功能的实现代码
08-19
android:text="记住密码" app:layout_constraintStart_toStartOf="@+id/et_Password" app:layout_constraintTop_toBottomOf="@+id/et_Password" /> android:id="@+id/button" android:onClick="Login" ...
Android 使用SharedPreferrences储存密码登录界面记住密码功能
08-30
总结来说，通过上述步骤，我们可以使用Android的SharedPreferences来实现登录界面的记住密码功能，同时要注意数据的安全性，确保用户体验的同时不牺牲安全性。在实际开发中，还可以结合其他存储方式，如SQLite数据库...
android 记住密码和自动登录,Android SharedPreferences实现记住密码和自动登录
weixin_36237054的博客
05-25 1053
本文实例为大家分享了Android SharedPreferences实现记住密码和自动登录，供大家参考，具体内容如下效果图：第一次进入进来勾选记住密码和自动登录成功后，第二次进来说明：中间存在的图片或者多余的其他部分可删掉。留下最主要的填写部分和登陆按钮即可。功能还是可以实现的。XML文件xmlns:android="http://schemas.android.com/apk/res/andr...
[Uniapp]用户登录界面“记住密码”功能的实现方法
wahzx的博客
12-05 2591
在使用Uniapp编写用户登录界面时，有必要增加的一大功能就是“记住密码”这一功能。“记住密码”功能允许用户在使用本机下次登录时，无需输入账号密码即可完成快速登陆。为实现这一功能，我们可以借助Uniapp提供的API接口中的数据缓存这一模块实现，现在让我们简单认识一下需要用到的模块。
Android实现用户登录记住密码功能
08-30
主要为大家详细介绍了Android实现用户登录记住密码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android实现记住密码功能
qq_38266804的博客
11-29 1047
登录界面：activity_login.xml &lt;LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" &gt; &lt;CheckBox and...
AppCan用cookie实现记住密码功能 [APP]
weixin_34413103的博客
01-14 188
今天想做个在应用上记住密码的功能。想了一下，先用COOKIE来测试。COOKIE保存在客户端。关于COOKIE在手机上安不安全的问题，以后再讨论。其实想过在手机上创建文件保存密码，但是，没有时间，没有COOKIE来得容易。下面正题：先做出要测试的界面，如下示：界面源码如下：<body class="ui-mobile-viewport" onload="useCook...
uniapp开发手机app--登录记住密码功能，代码直接复制可用奥
快来一起学习前端知识把！加油，前端人
04-12 1495
登录记住密码功能：我采用的是本地持久化的方式来实现的这个需求，uniapp开发手机app--登录记住密码功能，代码直接复制可用哦
前端实现登录时记住密码功能
weixin_筱玉的博客
04-18 9298
vue 项目 前端实现记住密码功能
前端记住账号，记住密码用H5本地储存
姚辉乾
03-18 1510
设置：localStorage.setItem(user,value) 获取：localStorage.user 清除：localStorage.remove(user)
Vue+vant实现移动端记住密码功能
On the way
03-12 1988
1、因项目需要，移动端需要进行记住密码，在此，将实现思路记录如下：这里有一个细节，就是移动端和PC端机制不同，因此所使用的存储机制也不同。这里使用的存储机制是localStorage。 created() { if(!!localStorage.getItem("rememberMe") &&localStorage.getItem("rememberMe") =='true'){ this.getrememberPassword(); } }, 在me
手机登录页面（记住密码）
yuzaijun的博客
04-12 2796
LoginActivity代码如下： package cn.edu.bzu.a01; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.support.v7.app.AppCompatActivity;
npm 和 npx 的区别和使用场景
最新发布
Dou_Hua6的博客
10-09 783
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值