Предисловие

Привет всем, сегодня я хотел бы поделиться с вами, как реализовать простую функцию входа и регистрации в uni-app.

Для начала необходимо освоить некоторые пункты знаний:

1. Сетевой запрос uni.request

2. Переход по странице, параметр страницы uni.navigateTo.

3. Локальный кеш uni.setStorageSync, uni.getStorageSync

Нам нужно использовать интерфейсы входа и регистрации, поэтому нам нужно знать, как делать сетевые запросы.

Поскольку вам все равно нужно зарегистрироваться, вам нужно перейти на страницу. Чтобы перейти на страницу регистрации, вам нужно использовать переход по странице.

Локальное кэширование означает, что после входа в систему вам необходимо сохранить информацию о пользователе вашей текущей учетной записи и хранить ее локально, поэтому вам необходимо использовать локальное хранилище.

Давайте посмотрим на конкретный процесс реализации!

1. Макет страницы

Это базовый макет страницы входа. Здесь есть два поля для ввода: одно для учетной записи и одно для пароля. Ниже кнопки находится ссылка. При нажатии на зарегистрированную учетную запись происходит переход на страницу регистрации учетной записи. регистрация.

Ниже приведен базовый макет страницы регистрации. Есть три поля ввода: учетная запись, пароль и адрес электронной почты. Если параметром запроса интерфейса не является адрес электронной почты, вы можете изменить его на другой. Ниже поля ввода находится регистрация. Нажмите кнопку регистрации, чтобы получить запрос, если регистрация прошла успешно, вернитесь на страницу входа после запроса.

2. Страница регистрации

1. Использование интерфейса регистрации

Код следующий (пример):

uni.request({
	url: '',
	method: 'POST',
	data: {
	Username:this.account,
	Password:this.password,
	Email:this.email
	},
	success: res => {
	
	},
	fail: () => {
	
	},
});

2. Подсказка об успешной регистрации

Код следующий (пример):

uni.showToast({
	title:"Регистрация прошла успешно",
	duration:2000,
	success() {
							
	}
});

3.Переход на страницу успешной регистрации.

Код следующий (пример):

setTimeout(function () {
	uni.navigateTo({
	 url: '../login/index',
	});
}, 1000);

Здесь мы используем таймер. Причина в том, что при успешной регистрации код обратного вызова начнет выполняться. Если вы не добавите таймер, страница перейдет до появления запроса об успешной регистрации, поэтому мы добавили это. Таймер позволяет выполнить время перехода через определенное время, чтобы подсказка могла отображаться в тот период, когда страница перехода не выполняется.

4. Полный код

Код следующий (пример):

methods: {
	btnReg(){
		uni.request({
			url: '',
			method: 'POST',
			data: {
				UserName:this.account,
				Password:this.password,
				Email:this.email
			},
				success: res => {
					uni.showToast({
					title:"Регистрация прошла успешно",
					duration:2000,
					success() {
					setTimeout(function () {
					uni.navigateTo({
						 url: '../login/index',
					});
					}, 1000);
					}
					});
					},
			fail: () => {
					
			},
		});
	}
}

3. Страница входа

1. Использование интерфейса входа в систему

Код следующий (пример):

uni.request({
	url: '',
	method: 'GET',
	data: {
		username : this.account,
		password : this.password
	},
	success: res => {
					
	},
	fail: () => {
						
	},
	});

2. Использование локального хранилища

Код следующий (пример):

uni.setStorage({
	key: 'username',
	data: this.account,
	success:function(){
		console.log("Сохранение успешно!");
	}
})

Ранее я уже писал статью о локальном хранилище. Если вы хотите узнать больше, вы можете прочитать ее и выбрать, использовать ли синхронное или асинхронное хранилище в соответствии с вашими потребностями.

3. Полный код

Код следующий (пример):

methods: {
	uni.request({
		url: '',
		method: 'GET',
		data: {
			username : this.account,
			password : this.password
		},
		success: res => {
			console.log(res);
			if(res.code== 0){
				uni.showToast({
					icon: 'none',
					title: «Неправильный пароль или имя пользователя»,
				});
			} else {
				uni.showToast({
				icon: 'none',title: 'Авторизоватьсяуспех',
				});
				uni.setStorage({
					key: 'username',
					data: this.account,
						success:function(){
							console.log("Сохранение успешно!");
						}
				})
				uni.reLaunch({
					url:'../index/index',
				})
			}
		},
		fail: () => {
						
		},
	});
}

В нем есть решение. Это решение предназначено для проверки того, успешен ли вход в систему. Если вход не удался, будет отображено сообщение об ошибке входа. Если вход в систему успешен, будет отображено сообщение об успешном входе в систему, и пользователь будет перенаправлен. на домашнюю страницу.

Подвести итог

Выше приведено все содержание этой главы, я надеюсь, что это поможет вам.

Второй этап специального тренировочного лагеря Tencent Technology Creation 2023 года включает в себя эссе, получившие призы, которые разделят призовой фонд в 10 000 юаней и часы с клавиатурой.