小程序云服务简单的登陆注册找回密码功能

云服务的数据库不能像其他数据库那些写多条件的查询或者更新语句。所以我这里的找回密码功能，非常简陋，不建议这么操作。

• 登陆

• login.wxml

<view class=\'container\'>
  <form bindsubmit=\'formSubmit\'>
    <view class=\'section\'>
      <text>用户名:</text>
      <input  placeholder=\'请输入您的账号\' name=\'user\' />
    </view>
    <view class=\'section\'>
      <text>密码:</text>
      <input password=\'true\' placeholder=\'请输入您的密码\' name=\'pwd\'/>
    </view>
    <view class=\'button\'>
    <button type=\'primary\' form-type=\'submit\'>登录</button>
    <button type=\'primary\' bindtap="go_to_register">注册</button>
  </view>
    <view class=\'fpwd\' bindtap=\'findpwd\'>
    <text>忘记密码了,怎么办</text>
  </view>
  </form>
</view>

• login.wxss

.button  button {
  margin-top: 20rpx;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

• login.js

// pages/login/login.js
const DB = wx.cloud.database().collection("user")
let username = ""
let password = ""
Page({
  //跳转到注册页
  findpwd:function(e){
    wx.navigateTo({
      url: \'../findpwd/findpwd\',
    })
  },
  go_to_register: function() {
    wx.navigateTo({
      url: \'../register/register\',
    })
  },
  formSubmit: function(e) {
    let that = this
    //获取用户名
    username = e.detail.value.user
    //获取密码
    password = e.detail.value.pwd
    //读取云数据库的user表
    DB.get({
      success(res) {
        let user = res.data
        //遍历数据库
        for (let i = 0; i < user.length; i++) {
          if (username === user[i].username) { //判断是否存在该用户
            if (password === user[i].password) { //判断该用户密码是否正确
                console.log(\'登陆成功\')
                wx.switchTab({
                  url: \'../../pages/index/index\',
                })
            } else {
              wx.showToast({
                title: \'账户或密码错误!!!\'
              })
            }
          } else {
            wx.showToast({
              title: \'账户或密码错误!!!\'
            })
          }
        }
      }
    })
  }
})

• login.json

{"navigationBarTitleText": "登陆"
}

• 注册

• register.wxml

<view class="container">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section">
      <view>账号</view>
      <input name="username" bindblur="userCheck" placeholder="请输入账号"/>
    </view>
    <view class="section">
      <view>密码</view>
      <input name="passwd" bindblur="passCheck" placeholder="请输入密码" password/>
    </view>
    <view>
      <view>号码</view>
      <input name="phoneNumber" bindblur="phoneCheck" placeholder="请输入手机号"/>
    </view>
    <view>
      <view>性别</view>
      <radio-group name="sex">
        <label>
          <radio value="男" checked/>男</label>
        <label>
          <radio value="女" />女</label>
      </radio-group>
    </view>
    <view class="btn-area">
      <button formType="submit" type="primary">提交</button>
      <button formType="reset" type="primary">重置</button>
    </view>
  </form>
</view>

• register.wxss

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}
button{
  margin-top:20rpx;
}

• register.js

//连接到云数据库的user数据表
const DB=wx.cloud.database().collection("user")
Page({
  //检查用户名
  userCheck:function(e){
    this.checkUser(e.detail.value)
  },
  checkUser:function(data){
    var reg = /^[\u4E00-\u9FA5A-Za-z]+$/;
    if (!reg.test(data)) {
      wx.showToast({
        title: \'名字输入有误！\',
        icon: \'none\',
        duration: 1500
      })
      return false
    }
    return true
  },
  //检查密码
  passCheck:function(e){
    this.checkPass(e.detail.value)
  },
  checkPass:function(data){
    if(!data){
      wx.showToast({
        title: \'密码不能为空\',
        icon: \'none\',
        duration: 1500
      })
    }
  },
  //检查手机号
  phoneCheck:function(e){
    this.checkPhone(e.detail.value)
  },
  checkPhone:function(data){
    var reg = /^(((13)|(17)|(15)|(18))\d{9})$/;
    if (!reg.test(data)) {
      wx.showToast({
        title: \'手机号码输入有误！\',
        icon: \'none\',
        duration: 1500
      })
      return false
    }
    return true
  },
  formSubmit:function(e){
    let username = e.detail.value.username; //用户名
    let password = e.detail.value.passwd; //密码
    let phone = e.detail.value.phoneNumber; //电话号
    let sex = e.detail.value.sex; //性别

    let that=this;
    let flag=false //判断是否存在，存在时为true
    //查询用户是否注册
    DB.get({
      success:(res)=>{
        let admins = res.data;
        for(let i=0;i<admins.length;i++){
          if(username===admins[i].username){//用户存在
            flag=true;
            console.log(\'账户已经注册\');
          }
        }
        if(flag===true){
          wx.showToast({
            title: \'账户已经注册！\',
          })
        }else{
          DB.add({
            data: {
              username: username,
              password: password,
              _id: phone,
              phone:phone,
              sex: sex
            },
            success(res) {
              console.log("添加成功", res)
            },
            fail(res) {
              console.log("添加失败", res)
            }
          })
        }
      }
    })
  }
})

• register.json

{
  "navigationBarTitleText": "注册"
}

• 找回密码

• findpwd.wxml

<view class="container">
  <view>
    <text>用户名</text>
    <input name="username" placeholder="输入找回的账户" bindtap="findname" />
  </view>
  <view>
    <text>输入密码</text>
    <input name="passwd1" placeholder="输入密码" bindblur="firstPasswd" />
  </view>
   <view>
    <text>再次输入密码</text>
    <input name="passwd2" placeholder="再次输入密码" bindblur="secondPasswd" />
  </view>
  <view>
    <button bindtap="updPwd" type="primary">重置密码</button>
  </view>
</view>

• findpwd.wxss

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

• findpwd.js

// pages/findpwd/findpwd.js
const DB = wx.cloud.database().collection("user")
let username = ""
let phone = ""
let first=""
let second=""
Page({
  findname:function(e){
    username=e.detail.value
  },
  findphone:function(e){
    phone = e.detail.value
  },
  firstPasswd:function(e){
    first = e.detail.value
  },
  secondPasswd:function(e){
    second = e.detail.value
    console.log(second)
  },
  updPwd(){
    if(first===second){
      DB.where({
        username:username
        //_id:phone
      }).update({
        data:{
          password:second
        },
        success(res){
          console.log("更新成功",res.password)
        },
        fail(res){
          console.log("更新失败",res)
        }
      })
    }else{
      console.log("两次输入密码不一样")
    }
  }
})

• findpwd.json

{
  "navigationBarTitleText": "找回密码"
}