微信小程序云开发 注册信息导入云数据库

编写一个微信小程序将注册信息导入到云数据库中。

开发平台：微信开发者工具

在云开发的数据库添加数据库userinfo：

添加调用数据库的字段：

const db = wx.cloud.database()
const usf=db.collection('userinfo')

1. 在rg.js页面进行添加"
   

2. 添加用户信息到"userinfo"数据库

usf.add({
        data:{
          "user":ac,
          "password":ps
        }
      })

3. 控制台显示注册成功，数据库中已经添加了相关记录

数据库权限要设置为第一个

####完整代码：

rg.js

const db = wx.cloud.database()
const usf=db.collection('userinfo')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    warning:'',
    key:false,
    account:'',
    password:'',
    repassword:''
  },
  getaccount(e){
    console.log("输入的用户名",e.detail.value)
    this.setData({
      account:e.detail.value
    })
  },
  getpsw(e){
    console.log("输入的密码",e.detail.value)
    this.setData({
      password:e.detail.value
    })
  },
  getrepsw(e){
    console.log("输入的确认密码",e.detail.value)
    this.setData({
      repassword:e.detail.value
    })
  },
  submit(e) {
    let ac = this.data.account
    let ps = this.data.password
    let rps = this.data.repassword
    if(ac.length<1){
      wx.showToast({
        title: '用户名不能为空',
        mask:true,
        icon:'none',
        duration:1000
      })
    }
    else if (ps.length < 6 || ps.length > 12) {
      wx.showToast({
        title: '密码为6位至12位',
        mask:true,
        icon:'none',
        duration:1000
      })
      console.log("密码为6位至12位")
    }
    else if(rps!=ps){
      wx.showToast({
        title: '确认密码输入错误',
        mask:true,
        icon:'none',
        duration:1000
      })
    }
    else{
      console.log("信息正确,可以注册")
      usf.add({
        data:{
          "user":ac,
          "password":ps
        }
      })
      console.log("用户注册成功")
    }
  }
})

rg.json

{
  "usingComponents": {}
}

rg.wxml

<image class="pic" src="../../images/register.png" mode="widthFix"></image>
<view>
  <view class="title">用户名：</view>
  <input class="input" name="stuno" placeholder="请输入您的用户名" type="number" bindinput="getaccount" maxlength="11"></input>
  <view class="title">密码：</view>
  <input class="input" name="password" placeholder="请设置您的密码" bindinput="getpsw" password></input>
  <input class="input" name="repassword" placeholder="请重复您的密码" bindinput="getrepsw" password></input>
</view>
<button class="btn" hover-class="anxia" bindtap="submit">注册</button>

rg.wxss

/* pages/rg/rg.wxss */
.pic{
  display:flex;
  width: 100%;
  justify-content: center;
  align-items:center;

}

.title{
  margin-left: 20rpx;
}
.input{
  border-bottom:solid;
  border-color: gainsboro;
  margin-top:10rpx;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10rpx;
  border-width: 4rpx;
}

.btn{
  font-size: 10pt;
  height: 55rpx;
  background: #ffcc01;
  color: black;
  text-align: center;
  border-radius: 50px;
  margin: 30% 20% 30% 20%;
}