uniapp简单的登录页实现

Sue_sy

已于 2024-06-16 22:59:44 修改

阅读量1.2k

点赞数 5

文章标签： uni-app

于 2024-06-16 22:36:51 首次发布

本文链接：https://blog.csdn.net/Sue_sy/article/details/139726923

版权

uni-app简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app，腾讯课堂官方为uni-app录制培训课程，开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

详细见：官方网站下载HBuider

登录页实现

一、创建项目

文件新建项目，使用空白文档，版本选择vue2,启用uniCloud

二、关联云空间

再官网进行购买，每个账号都有一次免费的机会

三、创建云函数

云函数页

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	var username = event.username;
	var password = event.password;
	var db=uniCloud.database();
	
	let result = await db.collection('user').where({
		username: username
	}).get();
	// console.log(result)
	if (result.affectedDocs == 0) {
		return {
			code: 500,
			msg: "用户不存在"
		}
	} else if (password == result.data[0].password) {
		return {
			code: 200,
			msg: "登录成功",
			user: result.data[0]
		}
	} else {
		return {
			code: 500,
			msg: "密码错误"
		}
	}
	//返回数据给客户端
	// return event
};

四、云数据库创建

打开web控制台

添加数据库user

五、新建页面

开始实现代码页

template部分

<template>
	<view class="Login">
		<view class="title">
			Welcome to SY-community
		</view>
		<view class="form">
			<view class="txt">用户密码登录</view>
			<input class="user" type="text" v-model="username" placeholder="用户名" />
			<input class="password" password type="text" v-model="password" placeholder="密码" @confirm="onLogin()"/>
		</view>
		<view class="btn">
			<button class="button" @tap="onLogin">立即登录</button>
			<view @tap="toEnroll" class="tip">
				没有账号，请先注册
			</view>
		</view>
	</view>
</template>

script部分

<script>
	export default {
		data() {
			return {
				username:"",
				password:""
			}
		},
		methods: {
			onLogin(){
				uniCloud.callFunction({
					name: "Login",
					data: {
						username: this.username,
						password: this.password,
					},
					success: (res) => {
						console.log(res);
						
						uni.setStorageSync("user", res.result.user)
				
						if (res.result.code == 200) {
							uni.showToast({
								title: "登录成功",
								icon:"success"
							})
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.result.msg,
								icon:"error",
							})
						}
					}
				})
			},
			toEnroll(){
				uni.navigateTo({
					url: "/pages/Login/Enroll"
				})
			}
		}
	}
</script>

style部分

<style scoped lang="scss">
	.Login {
		background: url("../../static/liuying.png");
		background-repeat: no-repeat;
		background-size: 100% 370rpx;
		height: 70vh;
		padding: 350rpx 40rpx 0;

		.title {
			font-weight: bold;
			font-size: 60rpx;
			font-family: STXingkai;
			margin: 50rpx 50rpx;
		}

		.form {
			.txt {
				font-weight: bold;
				font-size: 40rpx;
				margin-bottom: 40rpx;
			}

			.user {
				background: url("../../static/icon/user.png");
				background-size: 50rpx 50rpx;
				background-repeat: no-repeat;
				text-indent: 60rpx;
				border-bottom: 1rpx solid lightblue;
				margin-bottom: 60rpx;
			}

			.password {
				background: url("../../static/icon/lock.png");
				background-size: 50rpx 50rpx;
				background-repeat: no-repeat;
				text-indent: 60rpx;
				border-bottom: 1rpx solid lightblue;
				margin-bottom: 60rpx;
			}
		}
		
		.btn {
			button {
				background-color: #66e6ff;
				color: white;
			}
		
			.tip {
				text-align: right;
				margin-top: 20rpx;
				color: #c3c3c3;
			}
		}
	}
</style>