【微信小程序】如何利用云开发控制台的数据库实现用户登录操作。

亦凉 2021-11-11 05:01 849阅读 0赞

微信小程序可以使用授权登录来获取用户的信息，免打扰的操作让用户省了不少心，但是开发者在设计登录和注册的页面时，总是避免不了使用数据库，而且后续还需要从云开发控制台的数据库中获取用户信息，因此登录和云开发控制台数据库相结合的操作十分适合初入门微信小程序接触后台的开发者。

## 1.登陆界面的设计 ##

**login.wxml**  
代码如下：

**login.wxss**  
代码如下：

.content{
      margin-top: 40px;
    }
    .account{
       display: flex;
       flex-direction: row;
       padding-left: 20px;
       padding-top: 20px;
       padding-bottom: 10px;
       width: 90%;
    }
    .title{
       margin-right: 30px;
       font-weight: bold;
    }
    .hr{
      border: 1px solid #cccccc;
      opacity: 0.2;
      width: 90%;
      margin: 0 auto;
      background-color: red;
    }
    .btn{
      width: 90%;
      margin-top:40px;
      color: #999999;
    }

**示例界面图如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]

## 2.云开发控制台内预先设定好账号与密码 ##

1.打开云开发控制台（**还没有注册过云开发控制台的开发者，可以百度如何注册云开发控制台获取环境ID**）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 1]

2.设置好账号和密码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 2]

选择数据库，点击添加集合的“+”号，给自己的集合取一个名字,我这里的名字叫做**user**。点击添加记录，数据库会自动生成一个id，点击添加字段，设置好自己的账号和密码就行了。

## 3.登陆界面的JS ##

在上面的login.xml里，当用户按下绿色按钮进行登录时，后台就会把数据发送到数据库进行校验，而负责传送数据的JS函数就是——login()

**代码如下：**  
login.js

// pages/login/login.js
    let app = getApp();
    // 获取云数据库引用
    const db = wx.cloud.database();
    const admin = db.collection('user');//注意，这里就是刚才的集合的名字——user
    let name = null;//变量，用于存放用户输入的账号
    let password = null;//变量，用于存放用户输入的密码
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
      //输入用户名
      inputName: function (event) {
        name = event.detail.value//将用户输入的账号放到变量里面
      },
      //输入密码
      inputPassword(event) {
        password = event.detail.value//将用户输入的密码放到变量里面
      },
      //登陆函数
      login() {
        let that = this;
        //登陆获取用户信息
        admin.get({
          success: (res) => {
            let user = res.data;
             console.log(res.data);
            for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
              if (name === user[i].account) { //用户名存在
                if (password !== user[i].password) {  //判断密码是否正确
                  wx.showToast({
                    title: '密码错误！！',
                    icon: 'none',
                    duration: 2500
                  })
                } else {
                  console.log('登陆成功！')
                  wx.showToast({
                    title: '登陆成功！！',
                    icon: 'success',
                    duration: 2500
                  })
    
                  wx.switchTab({
                    url: '/pages/index/index',//这里是成功登录后跳转的页面
                  })
                }
              } else {   //不存在
                wx.showToast({
                  title: '无此用户名！！',
                  icon: 'none',
                  duration: 2500
                })
              }
            }
          }
        })
      }
    })

最后实际效果就是这样啦。![在这里插入图片描述][20190804141843314.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70]: /images/20211109/316a93318bea4f16848ea84eea9304f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 1]: /images/20211109/37330eadace74c0d8e5dff968fda17f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTc2MDI4_size_16_color_FFFFFF_t_70 2]: /images/20211109/e3b7d4a68a894483853e98291756efb1.png
[20190804141843314.gif]: /images/20211109/048241e44f7349c9a4aebbd93d41e134.png