使用云开发数据库实现登录功能,多的不说了直接看代码
登录功能代码段
WXML代码
<view class="waikuang">
<view class="neikuang">
<view class="shurukuang">
<text>账号</text>
<input type="text" value="" placeholder="账号" bindinput="GetZhanghao"/>
</view>
<view class="shurukuang">
<text>密码</text>
<input type="text" value="" password="true" placeholder="密码" bindinput="GetMima"/>
</view>
</view>
<view class="anniu" bindtap="GoDenglu">
<text>登录</text>
</view>
</view>
WXSS代码
page {
width: 100%;
height: 100%;
direction: ltr;
}
.waikuang {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.neikuang {
width: 90%;
display: flex;
flex-direction: column;
background-color: white;
}
.shurukuang {
width: 100%;
height: 84rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.shurukuang text {
width: 20%;
font-size: 32rpx;
margin-left: 3%;
}
.shurukuang input {
width: 74%;
font-size: 32rpx;
border: 2rpx solid rgb(207, 206, 206);
}
.anniu {
width: 90%;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(86, 76, 218);
color: white;
font-size: 32rpx;
font-weight: 700;
border-radius: 32rpx;
margin-top: 45rpx;
}
主要部分就在JS代码部分,先获取输入的值,再判断数据是否正确或者是否注册过。
const db = wx.cloud.database()
Page({
data: {
zhanghao: '',
mima: '',
},
GetZhanghao: function(e) {
this.setData({
zhanghao: e.detail.value
})
},
GetMima: function(e) {
this.setData({
mima: e.detail.value
})
},
// 登录按钮
// 1,判断输入框是否为空
// 2,用输入的帐号来查询数据,判断账号是否注册过
// 3,查询成功获取数据,比较输入的密码和注册时输入的密码是否一致
// 4,密码一致进入系统,密码不一致提示密码有误的提示框
GoDenglu: function(e) {
if(this.data.zhanghao == '') {
wx.showToast({
title: '请输入账号!',
icon: 'none'
})
return
}
if(this.data.mima == '') {
wx.showToast({
title: '请输入密码!',
icon: 'none'
})
return
}
// 开始使用云开发数据库
db.collection('user').where({
zhanghao: this.data.zhanghao
}).get().then(res => {
if(res.data.length != 0) {
if(res.data[0].mima == this.data.mima) {
wx.navigateTo({
url: '/pages/index/index',
})
}else {
wx.showToast({
title: '密码有误!',
icon: 'none'
})
}
}else {
wx.showToast({
title: '账号未注册!',
icon: 'none'
})
}
})
}
})