云开发学习9--用户注册，登录，退出的整体功能流程介绍

业务流程

• 1.进入小程序到登录/注册界面
  
• 2.用户未注册时进入注册界面进行用户注册，注册完成后自动跳转至登录界面（符合常见业务流程）
  
• 3.用户成功登录后进入个人中心页（此部分涉及用户信息的本地缓存与获取）
  

一，用户信息数据库结构

别忘记更改数据集合权限

二，整体代码

1.登录/注册、个人中心页

• me.wxml

<!-- 未登录 -->
<view wx:if="{{!loginOK}}">
  <button type="primary" class="zuche" bindtap="denglu">登陆</button>
  <button type="primary" class="zuche" bindtap="zhuce">注册</button>
</view>
<!-- 登陆成功 -->
<view wx:else class="login-ok">
  <text>登陆成功</text>
  <view>
    <text>{{name}}</text>
  </view>
  <button bindtap="tuichu">退出</button>
</view>

• me.wxss

/* pages/me/me.wxss */
.zuche{
  margin-top: 50rpx;
}
.login-ok{
  text-align: center;
}

• me.js

Page({
  data: {
    loginOK: false
  },
  //去登陆页
  denglu() {
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
  //去注册页
  zhuce() {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
  //每次返回到个人中心页面，都进行获取缓存的操作来获取用户信息，从而更新前端的用户信息
  onShow() {
    let user = wx.getStorageSync('user')
    if (user && user.name) {
      this.setData({
        loginOK: true,
        name: user.name
      })
    } else {
      this.setData({
        loginOK: false
      })
    }
  },

  //退出登陆
  tuichu() {
    wx.setStorageSync('user', null)
    let user = wx.getStorageSync('user')
    if (user && user.name) {
      this.setData({
        loginOK: true,
        name: user.name
      })
    } else {
      this.setData({
        loginOK: false
      })
    }
  }

})

2.用户注册页

• index.wxml

输入用户名
<input class="input" bindinput="getName"></input>
输入用户账号
<input class="input" bindinput="getZhangHao"></input>
输入您的密码
<input class="input" bindinput="getMiMa"></input>
<button bindtap="zhuce" type="primary">注册</button>

• index.wxss

.input{
  border: 1px solid gainsboro;
  margin: 15rpx;
}

• index.js

Page({
  data: {
    name: '',
    zhanghao: '',
    mima: ''
  },
  //获取用户名
  getName(event) {
    console.log('获取输入的用户名', event.detail.value)
    this.setData({
      name: event.detail.value
    })
  },
  //获取用户账号
  getZhangHao(event) {
    console.log('获取输入的账号', event.detail.value)
    this.setData({
      zhanghao: event.detail.value
    })
  },
  // 获取密码
  getMiMa(event) {
    console.log('获取输入的密码', event.detail.value)
    this.setData({
      mima: event.detail.value
    })
  },

  //注册
  zhuce() {
    let name = this.data.name
    let zhanghao = this.data.zhanghao
    let mima = this.data.mima
    console.log("点击了注册")
    console.log("name", name)
    console.log("zhanghao", zhanghao)
    console.log("mima", mima)
    //校验用户名
    if (name.length < 2) {
      wx.showToast({
        icon: 'none',
        title: '用户名至少2位',
      })
      return
    }
    if (name.length > 10) {
      wx.showToast({
        icon: 'none',
        title: '用户名最多10位',
      })
      return
    }
    //校验账号
    if (zhanghao.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    //校验密码
    if (mima.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '密码至少4位',
      })
      return
    }
    //注册功能的实现
    wx.cloud.database().collection('yunkaifa_user').add({
      data: {
        name: name,
        zhanghao: zhanghao,
        mima: mima
      },
      success(res) {
        console.log('注册成功', res)
        wx.showToast({
          title: '注册成功',
        })
        //注册成功后立即跳转至登录界面，符合常用app的业务逻辑
        wx.navigateTo({
          url: '../login/login',
        })
      },
      fail(res) {
        console.log('注册失败', res)
      }
    })
  }
})

3.用户登录界面

• login.wxml

输入账号：
<input class="input" bindinput="getZhanghao"></input>
输入密码：
<input class="input" bindinput="getMima"></input>
<button type="primary" bindtap="login">登陆</button>

• login.wxss

/* pages/login/login.wxss */
.input{
  border: 1px solid gainsboro;
  margin: 20rpx;
}

• login.js

Page({
  data: {
    zhanghao: '',
    mima: ''
  },
  //获取输入的账号
  getZhanghao(event) {
    //console.log('账号', event.detail.value)
    this.setData({
      zhanghao: event.detail.value
    })

  },
  //获取输入的密码
  getMima(event) {
    // console.log('密码', event.detail.value)
    this.setData({
      mima: event.detail.value
    })
  },
  //点击登陆
  login() {
    let zhanghao = this.data.zhanghao
    let mima = this.data.mima
    console.log('账号', zhanghao, '密码', mima)
    if (zhanghao.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '账号至少4位',
      })
      return
    }
    if (mima.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '密码至少4位',
      })
      return
    }


    //登陆
    wx.cloud.database().collection('yunkaifa_user').where({
      zhanghao: zhanghao
    }).get()
      .then(res => {
        console.log("获取数据成功", res)
        let user = res.data[0]
        console.log("登录user信息", user)
        if (mima == user.mima) {
          console.log('登陆成功')
          wx.showToast({
            title: '登陆成功',
          })
          wx.navigateTo({
            url: '/pages/me/me',
          })
          //保存用户登陆状态，固定下保存的关键字，符合只保存本机用户信息的业务逻辑
          wx.setStorageSync('user', user)
        } else {
          console.log('登陆失败')
          wx.showToast({
            icon: 'none',
            title: '账号或密码不正确',
          })
        }
      })
      .catch(err => {
        console.log("获取数据失败", err)
        wx.showToast({
          icon: 'none',
          title: '账号或密码不正确',
        })
      })


  }
})