uni-app心得之通过云数据库实现简单的登录和注册

前言

随着移动互联网的迅猛发展,APP已经成为人们生活中必不可少的一部分。而UniApp作为一种基于Vue.js的跨平台开发框架,提供了一种快速开发多端应用的解决方案。

        通过在学校学习uni-app的这段时间,作为一个初出茅庐的新人,我想分享一下关于登录与注册的实现。这是一个通过云数据库的方法实现的登录和注册。

        1.实现这个功能需要对uniCloud.callFunction请求的使用有一定的了解。

        2.还需要运用setStorageSync将登录的信息传给下一个界面。

        3.还有登录成功之后的页面跳转。

        下面就由我做一个简单的登录注册吧。

登录原理

  1. 用户输入凭证
    • 用户通过uni-app的前端界面(如表单)输入用户名和密码。
  2. 发送请求
    • 用户点击登录按钮后,uni-app通过uni.request方法(或其他网络请求API)将用户名和密码发送到后端服务器。
  3. 后端验证
    • 后端服务器接收到请求后,会验证用户名和密码的正确性。
    • 验证通常涉及与存储在数据库中的用户信息进行比对。
  4. 生成Token
    • 如果用户名和密码验证成功,后端会生成一个Token。
    • Token是一个字符串,通常包含用户的身份信息(如用户ID)和一些安全信息(如时间戳、签名等)。
    • Token的生成过程可能涉及加密算法(如MD5、SHA等)以确保其安全性。
  5. 返回Token
    • 后端将生成的Token返回给前端。
    • 前端通过uni.setStorageSync等方法将Token存储在本地(如localStorage、sessionStorage或Cookie中)。
  6. 后续请求携带Token
    • 在用户登录成功后,前端在向后端发送请求时(如获取用户数据、执行其他操作等),都会在请求头(Header)中携带Token。
    • 后端在接收到请求后,会验证Token的有效性。
  7. Token验证
    • 后端验证Token的过程可能包括解析Token、验证时间戳(防止Token过期)、验证签名(确保Token未被篡改)等步骤。
    • 如果Token验证通过,后端会处理该请求并返回相应的数据或执行相应的操作。
  8. Token失效与刷新
    • Token通常有一个有效期限,过期后需要用户重新登录或进行Token刷新操作。
    • Token刷新通常涉及前端向后端发送一个包含旧Token的请求,后端验证旧Token的有效性后返回一个新的Token。
  9. 安全性考虑
    • 在整个登录和Token管理过程中,安全性是非常重要的。
    • 应使用HTTPS协议进行通信,确保数据在传输过程中的安全性。
    • 对密码进行加密存储,防止密码泄露。
    • 使用安全的Token生成和验证算法,防止Token被伪造或篡改。

总结来说,uni-app云数据库的登录原理主要依赖于前端发送用户凭证到后端进行验证,后端生成并返回Token,前端存储并使用Token进行后续请求的验证。整个过程涉及网络通信、用户验证、Token生成和验证等多个环节,需要确保数据的安全性和用户隐私的保护。

一.页面样式.

.

做成如上界面,两个输入框,一个按钮即可,可以和上面差不多,也可以简单点。

二.创建数据表

右击uniCloud打开云数据库web控制台,找到云数据库,创建数据表

表中要包含有用户名和密码

三.数据绑定

<template>
    <view class="form">
        //对输入框的内容用v-model进行双向数据绑定
		<input type="text" v-model="username" placeholder="请输入账号">
		<input type="password" v-model="password" placeholder="请输入密码">
    </view>
			
    <view class="btn">
        //对按钮以及注册文字设置点击事件
	    <button @tap="applyLogin">登录</button>
        <view class="tip" @tap="applyRegister">
		    没有账号?点击此处注册账号
	    </view>
    </view>
</template>
<script>
    export default {
		data() {
			return {
                //返回用户名和密码
				username:"",
				password:""
			}
		},
    }
</script>

四.创建云函数(登录)

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	//连接数据库
	const db=uniCloud.database();

	var username=event.username;
	var	password=event.password
	
    //查找云数据库表,User是表名
	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:"登录成功",
				msg:result.data[0]
			}
		}else{
			return{
				code:500,
				msg:"密码错误"
			}
		}
		
	}
	//返回数据给客户端
	return event
};

五.调用云函数

		methods: {
			applyLogin(){
				uniCloud.callFunction({
					name:"getUserInfo",					
					data:{
						username:this.username,
						password:this.password
					},
					success: (res) => {	
						//将登录的信息保存到本地
						uni.setStorageSync('User',res.result.msg)
						//对结果进行判断
						if(res.result.code==200){
							uni.showToast({
								title:"登陆成功"
							})
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/index/index"
								})
							},1000)
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			},
            //注册跳转
			applyRegister(){
				uni.navigateTo({
					url:"/pages/register/register"
				})
			}
			
			
		}

对页面输入的数据和云函数从表中查到的数据进行对比,然后判断是否成功,一致则跳转下一个页面,不一致显示错误的地方。

六.创建云函数(注册)

注册的云函数跟插入数据差不多,将注册页的输入框的数据插入到用户表里就可以了。

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	const db=uniCloud.database();
	//添加数据到云数据库
	var id=await db.collection('User').add({
			username:event.username,
			password:event.password,
			name:event.name
		})
	if(id){
		return {
			code:200,
			msg:"注册完成"
		}
	}else{
		return {
			code:501,
			msg:"注册失败"
		}
	}
	//返回数据给客户端
	return event
};

七.调用云函数

也是一样,数据绑定,设置点击事件

<view class="middle">
	<view class="form">
		<input type="text" v-model="name" placeholder="请输入用户名">
		<input type="text" v-model="username" placeholder="请输入账号">
		<input type="password" v-model="password" placeholder="请输入密码">
	</view>

	<view class="btn">
		<button @tap="applyRegister">注册</button>
		<view class="tip" @tap="toLogin">
			返回登录
		</view>
	</view>
</view>
<script>
	export default {
		data() {
			return {
				username:"",
				password:"",
				name:""
			}
		},
		methods: {
			applyRegister(){
				uniCloud.callFunction({
					name:"addUser",
					data:{
						username:this.username,
						password:this.password,
						name:this.name
					},
					success: (res) => {
						console.log(res)
						if(res.result.code==200){
							uni.showToast({
								title:"注册成功",
								icon:"success"
							}),
							uni.navigateBack();
							
						}
					}
				})
			},
			
			toLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

以上就是简单的登录和注册啦。

总结

登录和注册在uni-app中的意义在于确保用户的身份和数据安全。登录功能允许用户通过验证后进入应用,注册功能则允许用户创建新账号。

  • 19
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
开源uni-app是一种跨平台的应用开发框架,可以实现在多个平台上开发应用程序。PDA(便携式数据终端)扫描功能可以用于扫描条码或二维码,并将扫描的数据存入数据库中。 首先,需要在uni-app中引入PDA扫描的相关插件或组件,例如uni-PDA插件。通过该插件,可以调用PDA设备的扫描功能,并获取到扫描到的数据。 然后,创建一个数据库,并建立相应的表来存储扫描到的数据。可以使用uni-app的本地数据库或者远程数据库(如MySQL、MongoDB等)。 在uni-app中,编写前端页面,包括扫描按钮和显示扫描结果的区域。通过监听扫描按钮的点击事件,调用PDA插件进行扫描操作,并获取到扫描结果。将扫描结果显示在页面上,并同时将结果存入数据库中。 在后端,编写相应的接口来接收前端传递的扫描数据,并将数据存入数据库。可以使用后端开发框架如Node.js、Spring Boot等来完成接口的编写和数据库的连接操作。 最后,在uni-app的页面中,可以添加查询按钮或搜索框,通过调用相应的接口从数据库中查询对应的扫描结果,并在页面上展示查询结果。 总结来说,使用开源uni-app开发PDA扫描存入数据库的功能需要引入PDA扫描插件或组件,建立数据库并创建对应的表,编写前端页面和后端接口来实现扫描和存入数据库的操作,并可以通过查询功能来展示扫描结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值