【微信小程序】利用云开发控制对数据库进行用户注册的写入

╰+攻爆jí腚メ 2024-04-18 13:38 29阅读 0赞

# 效果预览 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]

登录页面的制作在我的这一片文章里面，点击这里直达[链接][Link 1]：https://blog.csdn.net/qq\_43576028/article/details/98462916

<view>
    <view class="title">注册</view>
    <input class="input" placeholder="请输入账号" bindinput="inputUserName"></input>
    <view class="border1"></view>
    <input bindinput="inputPassword" class="input" placeholder="请输入密码" password="true"></input>
    <view class="border1"></view>
    <input  bindinput="inputPasswordAgain" class="input" placeholder="请再次输入密码" password="true"></input>
    <button class="button" type="primary" bindtap="register">注册</button>
    <view class="login" bindtap="login">点此返回登录</view>
    </view>

page{
        
      background-color:white;
    }
    
    .title{
        
      margin-top: 100rpx;
      text-align: center;
      font-size: 50rpx;
    }
    .input{
        
      margin-left: 60rpx;
      margin-top: 20rpx;
      width: 270px;
    }
    .border1{
        
      background-color:#E0E3DA;
      height: 5rpx;
      width: 80%;
      margin-top: 20rpx;
      margin-left: 50rpx;
    }
    .button{
        
      margin-top: 30rpx;
      width: 90%;
    }
    
    .login{
        
      margin-top: 20rpx;
    }

// pages/register/register.js
    
    let app = getApp();
    const db = wx.cloud.database();
    const admin = db.collection('user');
    let userName = null;
    let password = null;
    let passwordAgain = null;
    
    
    Page({
        
    
      data: {
        
    
      },
      onLoad: function (options) {
        
    
      },
      onReady: function () {
        
    
      },
      onShow: function () {
        
    
      },
      onHide: function () {
        
    
      },
      onUnload: function () {
        
    
      },
      onPullDownRefresh: function () {
        
    
      },
      onReachBottom: function () {
        
    
      },
      onShareAppMessage: function () {
        
    
      },
      login: function () {
        
        wx.redirectTo({
        
          url: '/pages/login/login'
        })
      },
      inputUserName: function (event) {
        
        userName = event.detail.value;
      },
      inputPassword: function (event) {
        
        password = event.detail.value;
      },
      inputPasswordAgain: function (event) {
        
        passwordAgain = event.detail.value;
      },
      register: function () {
        
        console.log(password+" "+passwordAgain);
        if (password != passwordAgain) {
        
          wx.showToast({
        
            title: '两次密码输入不一致',
            icon: 'none',
            duration: 1500,
          })
        }
        else {
        
          let that = this;
          admin.get({
        
            success: function (res) {
        
              let user = res.data;
              for (var i = 0; i < user.length; i++) {
        
                if (user[i].account == userName) {
        
                  wx.showToast({
        
                    title: '账号已存在',
                    icon: 'none'
                  })
                  break;
                }
    
              }
              if (i == user.length) {
        
                admin.add({
        
                  data: {
        
                    account: userName,
                    password: password,
                  },
                  success: function (res) {
        
    
                    wx.showToast({
        
                      title: '注册成功',
                      icon: 'success',
                      duration: 2500,
                    }),
                      wx.switchTab({
        
                        url: '/pages/index/index',
                      })
                  }
                })
              }
            }
          })
        }
    
      }
    })

向云开发控制台的数据库写入数据的方法是admin.add，实际上是db.collection(‘user’).add。因为数据库的写入只需要放入数据就可以，没有判断的流程，所以需要在add方法外面包上一层判断，以防止数据的混乱。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/71dfbc0e6ccf4ed5b3814b9a5d8c269f.png
[Link 1]: https://blog.csdn.net/qq_43576028/article/details/98462916