页面效果图

只有当用户将账号和密码都输入正确的时候，才能进行登录。

但我们要如何判断用户在界面输入的账号和密码跟我们在数据库当中存入的账号和密码相匹配，匹配成功，页面跳转，让用户登录进去，如果账号或密码只对其一，都将匹配失败，照样要给出相关的报错信息。

页面搭建的基本思路：

• 要有form表单是肯定的，但这次我没有用form表单自带的@submit方法,然后给提交按钮绑定open-type，而是用了v-model双向数据表定，简单明了。
• 使用了云函数，客户端需要uniCloud.callFunction进行调用
• 使用了uni.setStorageSync进行页面缓存，缓存一份用户名，后续有用。
• 使用了uniapp提供的页面跳转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>

云函数：关键是了解这个 查找数据库的getCount:true参数选项，它可以让我们快速判断用户输入的账号密码是否在数据库找到匹配。

'use strict';
exports.main = async (event, context) => {
    //event为客户端上传的参数
    console.log('event : ', event)
    
    //返回数据给客户端
    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
};

如果能在数据库找到用户输入的账号和密码，则证明用户输入的密码和账号信息都匹配成功，就在控制台就会返回affectedDocs ：1，

代表找到1条记录，代表密码和账号信息都匹配成功，而我们要做的就是判断一下即可，让页面跳转。