博客

完整的云开发登录注册，带简单的页面布局

先在云数据库表中建立user表，表中可以没有数据，后面直接注册插入信息

login.wxml

<view class="login">
  <input class="inputText" placeholder="请输入账号" name="account"  bindchange="getAccount" /> 
 <!--密码-->
  <input class="inputText" password="true" placeholder="请输入密码" name="password" bindchange="getPwd" /> 
</view>
<!--按钮-->
<view class="button">
  <button class="loginBtn" type="primary" bindtap="login" form-type="submit">登录</button> 
  <button class="regBtn" type="primary" bindtap="reg" form-type="submit">注册</button> 
</view>

login.wxss

.login{
    text-align: center;
    margin: 70rpx 0 0 50px;
}
.login .inputText{
    border: 2px solid #00b271;
    width: 500rpx;
    height: 100rpx;
    border-radius: 18px;
    outline: none;
    margin-top: 10rpx;
}
.button{
    margin-top: 30rpx;
}
.regBtn{
    margin-top: 10rpx;
}

login.js

const db = wx.cloud.database(
Page({
  data: {
    account:[],
    password:[],
  } , 
  getAccount:function(e)
  {
    //将账号数据存进data
    this.setData({
      account:e.detail.value
    });
  },
  getPwd:function(e)
  {
    //将密码数据存进data
    this.setData({
      password:e.detail.value
    });
  },
  /*登录函数*/
  login:function(e)
  {
    const userCollection = db.collection("user");
    let flag = false  //表示账户是否存在,false为初始值
    console.log(this.data.account)
    //账号密码为空时弹出提示
    if(this.data.account==''||this.data.password==''){
      wx.showToast({  //显示密码错误信息
        title: '账号或密码为空',
        icon: 'error',
        duration: 2500
      });
    }else{
    userCollection.get({
      success: (res) => {
        let user = res.data;
        console.log(user);
        for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
          if (this.data.account === user[i].account) { //账户已存在
            flag=true;
            if (this.data.password !== user[i].password) {  //判断密码正确与否
              wx.showToast({  //显示密码错误信息
                title: '密码错误！！',
                icon: 'error',
                duration: 2500
              });
             break;
            } else {
              wx.showToast({  //显示登录成功信息
                title: '登陆成功！！',
                icon: 'success',
                duration: 2500
              })
              flag=true;
              wx.navigateBack({  //登录成功后跳转页面
                delta:1
              }) 
              break;
            }
          }
        };
        if(flag==false)//遍历完数据后发现没有该账户
        {
          wx.showToast({
            title: '该用户不存在',
            icon: 'error',
            duration: 2500
          })
        }
      }
    })
  }
  },
  /*注册*/
  reg:function(e){
    //获取云数据库user表
    const userCollection = db.collection("user");
    let flag = false  //表示账户是否存在,false为初始值
    //账号密码为空时弹出提示
    if(this.data.account==''||this.data.password==''){
      wx.showToast({  //显示密码错误信息
        title: '账号或密码为空',
        icon: 'error',
        duration: 2500
      });
    }else{
    userCollection.get({
      success: (res) => {
        let user = res.data;  //获取到的对象数组数据
        console.log(user);
        for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
          if (this.data.account === user[i].account) { //账户已存在
            flag = true;
            break;
          }
        }
        if (flag === true) {  //账户已存在
          wx.showToast({
            title: '账号已注册！',
            icon: 'error',
            duration: 2500
          })
        }
        else {  //账户未注册
          userCollection.add({
            data:{
              account:this.data.account,
              password:this.data.password
            }
          })
          //如果要实现先弹窗提示再跳转页面，可以使用以下方法
          //wx.showToast({//显示注册成功信息
          //   title: '添加成功',
          //   icon:'注册成功！',
          //   duration:2000,
          //   success:function(){
          //     setTimeout(function(){
          //       wx.navigateBack({
          //         delta: 1
          //       });
          //   },2000);
          //   }
          // })
          wx.showToast({	//显示注册成功信息
            title: '注册成功！',
            icon: 'success',
            duration: 2500
          })
          wx.navigateBack({//注册成功后跳转页面
            delta:1
          }) 
        }
      }
    })
    }
  }
})
)

参考原创 https://blog.csdn.net/weixin_42077074/article/details/113528608