uni-app: Realice el inicio de sesión de cuenta y contraseña, y tenga en cuenta que cuando la página haya iniciado sesión en la cuenta, no es necesario ingresar la contraseña de la cuenta la próxima vez que inicie sesión (implementación de caché local)

Mobile 2023-07-30 02:48:04 views: null

Efecto

código de front-end

1. Código completo

<template>
	<view>
		<view class="all">
			<view class="title">
				<image :src="title_login" alt="图片损坏" />
			</view>
			<form class="login-form" @submit="formSubmit">
				<view class="input-group ">
					<text class="input-label">帐号</text>
					<input binf cursor-spacing="30" id="userid" maxlength="18" placeholder="请输入用户名" data-type="Idnumber"
						name='zhanghao' />
				</view>
				<view class="input-group password">
					<text class="input-label">密码</text>
					<input :password='isShowPassword' class="mima" name='mima' cursor-spacing="30" id="passwd"
						placeholder="请输入6位及其以上字符" data-type="password" maxlength="20" />
					<view class="eye_position" @tap='toggleShowPassword'>
						<image :src='eye' v-if='isShowPassword' />
						<image :src='eye_close' v-if='!isShowPassword' />
					</view>
				</view>
				<view>
					<button form-type="submit"
						style="background-color:#3B759B;width:90%;color:white;margin-top:10%;font-size:20px;">登录</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isShowPassword: true,
				zhanghao: '',
				mima: '',
				title_login: getApp().globalData.icon + 'login/title_login.png',
				eye: getApp().globalData.icon + 'index/mine/eye.png',
				eye_close: getApp().globalData.icon + 'index/mine/eye_close.png',
			}
		},
		methods: {
			//密码是否显示
			toggleShowPassword: function(e) {
				var isShowPassword = !this.isShowPassword;
				this.isShowPassword = isShowPassword
			},
			//用户密码登录
			formSubmit(e) {
				//获取用户输入信息
				this.zhanghao = e.detail.value.zhanghao; //用户输入账号信息
				this.mima = e.detail.value.mima //用户输入密码信息
				let zhanghao = this.zhanghao
				let mima = this.mima
				//效验账号密码位数
				if (zhanghao.length < 2 || zhanghao.length > 10) {
					uni.showToast({
						title: '账号应在2~10位之间',
						icon: 'none'
					})
					return
				} else if (mima.length < 6 || mima.length > 12) {
					uni.showToast({
						title: '密码应在6~12位之间',
						icon: 'none'
					})
					return
				} else {
					//传入数据到后端，进行登录
					uni.request({
						url: getApp().globalData.position + 'Xcxuser/userlogin',
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: 'POST',
						dataType: 'json',
						data: {
							zhanghao: zhanghao,
							mima: mima
						},
						success: res => { //如果获取到服务器
							// console.log(res.data)
							if (res.data == 1) {
								uni.showToast({
									title: '账号不存在',
									icon: "none",
								})
								return
							} else if (res.data == 2) {
								uni.showToast({
									title: '密码错误',
									icon: "none",
								})
								return
							} else if (res.data == 3) {
								uni.showToast({
									title: '账号已失效',
									icon: "none",
								})
								return
							} else {
								//将账号信息作为全局变量
								getApp().globalData.username = res.data[0].username
								uni.setStorageSync('username', res.data[0].username)
								uni.reLaunch({ //跳转到主页，并携带账号参数
									url: '../../start_production/start_index/start_index?username=' +
										res.data[0].username
								})
								//存入登录变量
							}
						},
						fail: res => {}
					})
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: rgb(242, 242, 242);
		height: 100%;
		width: 100%;
	}

	image {
		height: 80px;
		width: 200px;
		/* border:1px solid black; */
		z-index: 999px;
		position: relative;
		left: 50%;
		margin-left: -100px;
		margin-top: 30%;
		margin-bottom: 10%;

	}

	.eye_position {
		margin: 0px;
		padding: 0px;
		width: 45rpx;
		height: 45rpx;
		padding-right: 2%;
	}

	.eye_position image {
		margin: 0px;
		padding: 0px;
		width: 45rpx;
		height: 45rpx;
	}

	.input-group {
		display: flex;
		align-items: center;
		padding: 25rpx 10rpx;
		margin: 40rpx 3%;
		background: #fff;
		border-radius: 5px;
		border: 2px solid #f4f4f4;
		transition: all .25s ease-in-out;
		width: 88%;
		height: 60rpx;
	}

	.input-group.active {
		border: 2px solid #7acfa6;
	}

	.input-label {
		color: #888;
		font-size: 13pt;
		height: 25rpx;
		line-height: 25rpx;
		padding: 0 25rpx;
		border-right: 1px solid #d8d8d8;
	}

	.input-group input,
	.input-group picker {
		flex: 1;
		font-size: 13pt;
		min-height: 52rpx;
		height: 52rpx;
		line-height: 52rpx;
		padding: 0 25rpx;
	}

	.input-placeholder,
	.input-group picker.placeholder {
		color: #ccc;
	}

	.login-help {
		display: flex;
		margin-left: 71%;
		align-items: center;
		justify-content: flex-end;
		padding: 0 30rpx;
		font-size: 10pt;
		color: #bbb;
	}

	.login-help-img {
		width: 11pt;
		height: 11pt;
		margin: 0 5rpx;
	}

	.confirm-btn {
		font-size: 13pt;
		line-height: 85rpx;
		height: 85rpx;
		background: #1296db;
		color: #fff;
		text-align: center;
		border-radius: 5px;
		margin: 50rpx 3%;
	}

	.confirm-btn:active {
		opacity: .8;
	}
</style>

En segundo lugar, el análisis de la parte de la etiqueta.

<template>
	<view>
		<view class="all">
			<view class="title">
				<image :src="title_login" alt="图片损坏" />
			</view>
			<form class="login-form" @submit="formSubmit">
				<view class="input-group ">
					<text class="input-label">帐号</text>
					<input binf cursor-spacing="30" id="userid" maxlength="18" placeholder="请输入用户名" data-type="Idnumber"
						name='zhanghao' />
				</view>
				<view class="input-group password">
					<text class="input-label">密码</text>
					<input :password='isShowPassword' class="mima" name='mima' cursor-spacing="30" id="passwd"
						placeholder="请输入6位及其以上字符" data-type="password" maxlength="20" />
					<view class="eye_position" @tap='toggleShowPassword'>
						<image :src='eye' v-if='isShowPassword' />
						<image :src='eye_close' v-if='!isShowPassword' />
					</view>
				</view>
				<view>
					<button form-type="submit"
						style="background-color:#3B759B;width:90%;color:white;margin-top:10%;font-size:20px;">登录</button>
				</view>
			</form>
		</view>
	</view>
</template>
  • Se utiliza una plantilla de definición de etiquetas <template>.
  • Una página <view>consta principalmente de una pestaña.
  • La página contiene una imagen de encabezado y un formulario de inicio de sesión.
  • La imagen del encabezado utiliza <image>una etiqueta y :srcla ruta de la imagen se establece mediante propiedades de enlace.
  • El formulario de inicio de sesión usa <form>una etiqueta y llama formSubmita un método al enviar. Establezca el nombre de la cuenta y la contraseña para obtenerlo en js, establezca el nombre de la tabla form-type="submit" en el botón, haga clic en este botón para enviar el formulario
  • El formulario contiene cuadros de entrada para la cuenta y la contraseña. El cuadro de entrada de la cuenta usa <input>una etiqueta, y el cuadro de entrada de la contraseña usa <input :password='isShowPassword'>una etiqueta para v-ifcontrolar si se muestra la contraseña.
  • Hay un botón de inicio de sesión al final del formulario, que activa el evento de envío del formulario cuando se hace clic.

 tres, js

<script>
	export default {
		data() {
			return {
				isShowPassword: true,
				zhanghao: '',
				mima: '',
				title_login: getApp().globalData.icon + 'login/title_login.png',
				eye: getApp().globalData.icon + 'index/mine/eye.png',
				eye_close: getApp().globalData.icon + 'index/mine/eye_close.png',
			}
		},
		methods: {
			//密码是否显示
			toggleShowPassword: function(e) {
				var isShowPassword = !this.isShowPassword;
				this.isShowPassword = isShowPassword
			},
			//用户密码登录
			formSubmit(e) {
				//获取用户输入信息
				this.zhanghao = e.detail.value.zhanghao; //用户输入账号信息
				this.mima = e.detail.value.mima //用户输入密码信息
				let zhanghao = this.zhanghao
				let mima = this.mima
				//效验账号密码位数
				if (zhanghao.length < 2 || zhanghao.length > 10) {
					uni.showToast({
						title: '账号应在2~10位之间',
						icon: 'none'
					})
					return
				} else if (mima.length < 6 || mima.length > 12) {
					uni.showToast({
						title: '密码应在6~12位之间',
						icon: 'none'
					})
					return
				} else {
					//传入数据到后端，进行登录
					uni.request({
						url: getApp().globalData.position + 'Xcxuser/userlogin',
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						method: 'POST',
						dataType: 'json',
						data: {
							zhanghao: zhanghao,
							mima: mima
						},
						success: res => { //如果获取到服务器
							// console.log(res.data)
							if (res.data == 1) {
								uni.showToast({
									title: '账号不存在',
									icon: "none",
								})
								return
							} else if (res.data == 2) {
								uni.showToast({
									title: '密码错误',
									icon: "none",
								})
								return
							} else if (res.data == 3) {
								uni.showToast({
									title: '账号已失效',
									icon: "none",
								})
								return
							} else {
								//将账号信息作为全局变量
								getApp().globalData.username = res.data[0].username
								uni.setStorageSync('username', res.data[0].username)
								uni.reLaunch({ //跳转到主页，并携带账号参数
									url: '../../start_production/start_index/start_index?username=' +
										res.data[0].username
								})
								//存入登录变量
							}
						},
						fail: res => {}
					})
				}
			},
		}
	}
</script>

1. Parte de datos:

  • isShowPassword: controle si se muestra la contraseña, el valor predeterminado es true.
  • zhanghao: El valor del cuadro de entrada de la cuenta, que está vacío de forma predeterminada.
  • mima: El valor del cuadro de entrada de la contraseña, que está vacío de forma predeterminada.
  • title_login: La ruta de la imagen de encabezado de la página de inicio de sesión, que se obtiene llamando getApp().globalData.icona la ruta de la imagen en la variable global.
  • eye: La ruta del icono de apertura de ojos y getApp().globalData.iconla ruta de la imagen en la variable global también se obtienen llamando.
  • eye_close: La ruta del icono de cierre de ojos y getApp().globalData.iconla ruta de la imagen en la variable global también se obtienen llamando.

2. Parte del método:

  • toggleShowPassword: El método para cambiar el estado de visualización de la contraseña, que se activa al hacer clic en el icono del ojo. En el método isShowPassword, se negará cambiar entre mostrar y ocultar la contraseña.
  • formSubmit: método de envío del formulario, activado al hacer clic en el botón de inicio de sesión. El método primero obtiene la información de cuenta y contraseña ingresada por el usuario, y luego verifica si el número de dígitos de la cuenta y contraseña cumple con los requisitos. Si no se cumplen los requisitos, aparecerá un mensaje de error apropiado y el método finalizará. Si se cumplen los requisitos, se envía una solicitud de inicio de sesión al backend. Después de que la solicitud sea exitosa, juzgue de acuerdo con los datos devueltos por el servidor y realice el procesamiento correspondiente, que incluye mostrar avisos de error, guardar la información de la cuenta en variables globales, saltar a la página de inicio, etc.

Código de fondo (usando thinkphp)

//账号密码登录
    public function userlogin()
    {
        //获取用户输入的账号密码
        $zhanghao = input('post.zhanghao');
        $mima = input('post.mima');
        //获取输入账号对应的密码信息
        $user_mima = Db::table('fa_account_info')->where(["username" => $zhanghao])->value('password');
        //获取账号的状态
        $blocked = Db::table('fa_account_info')->where(["username" => $zhanghao])->value('blocked');
        //查找数据库中是否含有此密码(如果账号为空)
        if (empty(Db::table('fa_account_info')->where(["username" => $zhanghao])->select())) {
            return 1;
        }
        //如果账号存在，但密码错误
        else if ($mima != $user_mima) {
            return 2;
        }
        else if($blocked==1){
          return 3;
        }
        //成功登录
        else {
            $login_info = Db::table('fa_account_info')->where(["username" => $zhanghao, "password" => $mima])->select();
            echo json_encode($login_info);
        }
    }

recordar la contraseña de la cuenta

Información de la cuenta almacenada localmente

Al ingresar la contraseña de la cuenta correcta, hay una operación para configurar la variable global de nombre de usuario y configurar el nombre de usuario en el caché local (consulte el código js)

getApp().globalData.username = res.data[0].username
uni.setStorageSync('username', res.data[0].username)

Ingrese el método de ejecución del sistema (App.vue)

código completo

<script>
	export default {
		onLaunch: function() {
			// 展示本地存储能力
			const logs = uni.getStorageSync('logs') || []
			logs.unshift(Date.now())
			uni.setStorageSync('logs', logs)
			// 登录
			const username = uni.getStorageSync('username')
			console.log('全局'+username)
			this.globalData.username=username
			if(username){
			  uni.reLaunch({
				  url:'./pages/start_production/start_index/start_index?username='+username,
			  })
			}
		},
		onShow: function() {
			// console.log('App Show')
		},
		onHide: function() {
			// console.log('App Hide')
		},
		globalData:{
			position:'XXX',
			icon:'XXX',
			username:''
		}
	}
</script>

<style>

</style>

onLaunchEs una función de ciclo de vida de uso común, que se activa cuando se inicia la aplicación y se puede usar para realizar algunas operaciones y lógica de inicialización.

 Entonces, aquí solo necesita onLaunch juzgar si el caché local existe, si hay un inicio de sesión directo, si no existe, inicie sesión con la cuenta y la contraseña

  •  Primero, obtenga los datos de almacenamiento local llamados 'registros' a través uni.getStorageSyncdel método y devuelva una matriz vacía si los datos no existen. uni.getStorageSyncEs una interfaz proporcionada por uni-app, que se utiliza para obtener datos del almacenamiento local.

  • Luego, agregue la marca de tiempo actual (Date.now()) al comienzo de la matriz de registros obtenida para registrar la hora en que se inició la aplicación. unshiftEl método se utiliza para insertar elementos al principio de la matriz.

  • A continuación, utilice uni.setStorageSyncel método para restaurar la matriz de registros actualizada en el almacenamiento local. uni.setStorageSyncSe utiliza para almacenar datos en el almacenamiento local.

  • La ejecución continúa uni.getStorageSyncobteniendo los datos de almacenamiento local denominados 'nombre de usuario' y asignándolos a const usernamela variable. Esto supone que el 'nombre de usuario' es un inicio de sesión de usuario guardado previamente.

  • Se utiliza para console.logimprimir usernamevariables globales.

  • A continuación, this.globalData.usernameguarde usernameel valor de en una variable global para usar en otras páginas de la aplicación a través de . Entre ellos, thisrepresenta la instancia actual del applet, globalDataque es un atributo personalizado que se utiliza para almacenar datos compartidos globalmente.

  • Realice un juicio condicional, si usernameexiste (es decir, el usuario está conectado), use uni.reLaunchel método para saltar a ./pages/start_production/start_index/start_indexla página y usernamepáselo como un parámetro a la página de destino.

Supongo que te gusta

Origin blog.csdn.net/weixin_46001736/article/details/131920632
Recomendado
Clasificación
Diario
Más
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)
2024-04-23(29)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com