頁面效果圖

只有當(dāng)用戶將賬號和密碼都輸入正確的時候，才能進(jìn)行登錄。

但我們要如何判斷用戶在界面輸入的賬號和密碼跟我們在數(shù)據(jù)庫當(dāng)中存入的賬號和密碼相匹配，匹配成功，頁面跳轉(zhuǎn)，讓用戶登錄進(jìn)去，如果賬號或密碼只對其一，都將匹配失敗，照樣要給出相關(guān)的報錯信息。

頁面搭建的基本思路：

• 要有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">
                賬號:<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">注冊</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:"用戶名或密碼輸入錯誤！"
                        })
                    }
                }).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)鍵是了解這個 查找數(shù)據(jù)庫的getCount:true參數(shù)選項，它可以讓我們快速判斷用戶輸入的賬號密碼是否在數(shù)據(jù)庫找到匹配。

'use strict';
exports.main = async (event, context) => {
    //event為客戶端上傳的參數(shù)
    console.log('event : ', event)
    
    //返回數(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ù)庫找到用戶輸入的賬號和密碼，則證明用戶輸入的密碼和賬號信息都匹配成功，就在控制臺就會返回affectedDocs ：1，

代表找到1條記錄，代表密碼和賬號信息都匹配成功，而我們要做的就是判斷一下即可，讓頁面跳轉(zhuǎn)。