頁面效果圖
只有當(dāng)用戶將賬號(hào)和密碼都輸入正確的時(shí)候剩辟，才能進(jìn)行登錄。
但我們要如何判斷用戶在界面輸入的賬號(hào)和密碼跟我們?cè)跀?shù)據(jù)庫當(dāng)中存入的賬號(hào)和密碼相匹配溅话，匹配成功崇败，頁面跳轉(zhuǎn)盅称，讓用戶登錄進(jìn)去，如果賬號(hào)或密碼只對(duì)其一后室，都將匹配失敗缩膝，照樣要給出相關(guān)的報(bào)錯(cuò)信息。
頁面搭建的基本思路：
- 要有form表單是肯定的咧擂，但這次我沒有用form表單自帶的@submit方法,然后給提交按鈕綁定open-type，而是用了v-model雙向數(shù)據(jù)表定檀蹋，簡單明了松申。
- 使用了云函數(shù)，客戶端需要uniCloud.callFunction進(jìn)行調(diào)用
- 使用了uni.setStorageSync進(jìn)行頁面緩存俯逾，緩存一份用戶名贸桶，后續(xù)有用。
- 使用了uniapp提供的頁面跳轉(zhuǎn)API桌肴，uni.navigateTo()
- 使用了uniapp提供的界面視窗uni.showModal()
頁面整體代碼：
<template>
<view class="content">
<view class="title">
登錄
</view>
<form action="" @submit="">
<view class="group">
賬號(hào):<input type="text" value="" v-model="userInfo.account"/>
</view>
<view class="group">
密碼:<input type="text" value="" v-model="userInfo.password"/>
</view>
<view class="btnGroup">
<button style="color: #d6b46a;" type="default" @tap="Reg">注冊(cè)</button>
<button type="primary" @tap="login">登錄</button>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
userInfo:{
account:'',
password:''
}
}
},
onLoad() {
},
methods: {
Reg(){
uni.navigateTo({
url:"../registry/registry"
})
},
login(){
uniCloud.callFunction({
name:"loginMatch",
data:{
"UserAccount":this.userInfo.account,
"password":this.userInfo.password
}
}).then(res=>{
console.log(res)
if(res.result.affectedDocs ==1) { //用戶名和密碼輸入都正確
uni.navigateTo({
url:"../friendShow/friendShow"
})
uni.setStorageSync("userName",res.result.data[0].UserAccount)
// uni.setStorageSync("userImg",res.result.data[0].UserImg)
}else {
uni.showModal({
content:"用戶名或密碼輸入錯(cuò)誤皇筛！"
})
}
}).catch(err=>{
console.log(err.message)
})
}
}
}
</script>
<style lang="scss">
.content {
background: url(../../static/bgc.jpg);
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
background-size: 100% 100%;
.title{
color: #d94b59;
text-align: center;
font-size: 80upx;
}
.group {
line-height: 70upx;
display: flex;
justify-content: center;
margin: 40upx;
input {
border: 1upx solid #808080;
border-radius: 10upx;
padding: 10upx;
margin-left: 15upx;
}
}
.btnGroup {
display: flex;
}
}
</style>
云函數(shù)：關(guān)鍵是了解這個(gè) 查找數(shù)據(jù)庫的getCount:true參數(shù)選項(xiàng)，它可以讓我們快速判斷用戶輸入的賬號(hào)密碼是否在數(shù)據(jù)庫找到匹配坠七。
'use strict';
exports.main = async (event, context) => {
//event為客戶端上傳的參數(shù)
console.log('event : ', event)
//返回?cái)?shù)據(jù)給客戶端
return new Promise((resolve,reject) =>{
const db = uniCloud.database()
const collection = db.collection("UserInfo").where(event).get({
getCount:true
}).then(res => {
resolve(res)
})
})
return event
};
如果能在數(shù)據(jù)庫找到用戶輸入的賬號(hào)和密碼水醋，則證明用戶輸入的密碼和賬號(hào)信息都匹配成功，就在控制臺(tái)就會(huì)返回affectedDocs ：1彪置，
代表找到1條記錄拄踪，代表密碼和賬號(hào)信息都匹配成功，而我們要做的就是判斷一下即可拳魁，讓頁面跳轉(zhuǎn)惶桐。
