小程序云开发用户登录页面

小程序云开发登录页面

先来看一下效果图

第一：思路

1. 获取用户输入的账号和密码
   在HTML构造页面时选择了利用表单（form）提交（将form组件绑定登录事件，将按钮的form-type属性设置为“submit”），所以在点击登录按钮后，会将数据提交到前端。

       var fromType = e.detail.value;
       var username = fromType.username;
       var password = fromType.password;

2. 判断输入账号和密码的合法性
   判断是否为空:利用获取的长度判断

        if (username.length == 0 || password.length == 0){
            wx.showToast({
              title: '账号或密码不能为空',
              icon:'none',
              duration:1500
            })
        }

判断是否匹配数据库
也就是去数据库中查找，是否存在这样的用户。如果不使用云开发，我们需要利用wx.request将数据传给服务器，然后接受服务器的状态码来判断下一步骤，验证部分将在服务器端完成。
在云开发中，数据库的操作十分简单。我们在验证前需要建立一个‘clients’的集合，并在集合中添加相应的数据即可。但同时也要注意数据库的设计，比如这里我的‘clients’。

名称	含义
_id	用户账号（唯一索引）
password	用户密码
facePATH	头像云存储路径
nickName	昵称

facePATH 和nickName 是我后面要使用的数据，提前设计好会省力一些。但就我使用感受而言，后续加入列的操作也不算麻烦，因为云开发的数据库并不是直接确定一个集合的格式，集合内记录的内容可以不同。
除开自己设置的列外，应该还有一项_openid是必须的。这个值是每个微信号特有的，不能自己写。我当时是在写好注册页面时才发现，如果利用程序添加记录，则会自动添加这一列；手动则不行。这个值在测试这个页面时无需添加，后面注册页面有需求时再说。
*这里特别说明要注意这个数据库的权限，可以自己在云开发控制台修改

在js中连接数据库只需要创建数据库实例就可以了（在此之前需要配置好自己的云环境，具体见云开发文档）

const db = wx.cloud.database();
const admid = db.collection('clients');

db就是数据库实例，admid就是我们操作集合的实例，接下来就可以对集合clients进行增删查改的操作。
*手动添加的密码是明文的不要紧，只要在input组件type的值为safe-password，真机调试程序上传到数据库时是密文的形式。而且手动添加的明文密码在真机调试的时候是无法匹配的，会显示密码错误
这里验证用户只需要用到查操作，也就是get。先判断用户名是否存在，再判断密码是否正确，这里由于没有设定条件，返回了整个集合。其实可以用where直接写入用户名和密码再让get去查询，如果返回空，则登录失败。如果返回集合，就登录成功（admit.where({}).get({}）。详见微信开放文档。

            admid.get({
              success:(res) => {
                let user = res.data;
                //console.log(res.data);
                for (let i = 0; i < user.length; i++){
                  if (username === user[i]._id){//判断用户名是否存在
                    if (password !== user[i].password) {  //判断密码是否正确
                      wx.showToast({
                        title: '密码错误！',
                        icon: 'error',
                        duration: 2500
                      })
                    } else {
                      console.log('登陆成功！')
                      wx.showToast({
                        title: '登陆成功！！',
                        icon: 'success',
                        duration: 2500
                      })
                      wx.switchTab({   //跳转首页
                        url: '../home/home',  //这里的URL是你登录完成后跳转的界面
                      })
                    }
                  }else{
                    wx.showToast({
                      title: '无此用户名！',
                      icon: 'error',
                      duration: 2500
                    })
                  }
                }
              },
              fail:(res) =>{
                console.log("查询失败");
              }
            })

3. 没有账号，注册
   绑定事件跳转即可，跳转页面也要注意是不是tabbar页面，如果是，则要使用wx.switchTab.

   goToRegist: function(e){
        wx.navigateTo({
          url: '../userRegist/userRegist',
        })
    },

二、代码部分

HTML

<!--pages/userLogin/userLogin.wxml-->
<view >
    <image src="/images/yinghua.jpg" class="img"></image>    
</view>

<view>
    <form bindsubmit="doLogin">
        <!-- 账号-->
        <view class="inputView">
            <image class="imgLo" src="/images/userName.png"></image>
            <label class="labelLo">账号</label>
            <input class="inputText" type="nickname" name="username" placeholder="请输入账号"/>
        </view>
        <view class="line"></view>
        <!--密码-->
        <view class="inputView">
            <image class="imgLo" src="/images/password.png"></image>
            <label class="labelLo">密码</label>
            <input class="inputText" type="safe-password" name="password" placeholder="请输入密码" password="true"/>
        </view>
        <!--登录按钮-->
        <view>
            <button class="loginBtn" form-type="submit">登录</button>
        </view>
        <!--跳转注册按钮-->
        <view>
            <button class="goToRegist" bindtap="goToRegist">没有账号？注册</button>
        </view>
    </form>

</view>

CSS

/* pages/userLogin/userLogin.wxss */
page{
    background-color: whitesmoke;
}
.img {
    width: 100%;
}
.inputView{
    background-color: white;
    line-height: 45px;
}
.imgLo{
    margin-left: 22px;
    width: 20px;
    height: 20px;
}
.labelLo{
    margin: 15px 15px 15px 10px;
    color: gray;
    font-size: 15px;
}
.inputText{
    float: right;
    text-align: right;
    margin-right: 22px;
    margin-top: 11px;
    font-size: 15px;
}
.line{
    width: 100%;
    height: 1px;
    background-color: gainsboro;
    margin-top: 1px;
}
.loginBtn {
    width: 80%;
    margin-top: 35px;
    background-color: rgb(240,176,183);
    color: white;
    border-radius: 98rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
.goToRegist{
    width: 80%;
    margin-top: 15px;
    color: rgb(240,176,183);
    border-radius: 98rpx;
}

JavaScript

// pages/userLogin/userLogin.js
const app = getApp();
const db = wx.cloud.database();
const admid = db.collection('clients');
Page({

    /**
     * 页面的初始数据
     */
    data: {
        // realUrl: '',
        openid: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    //options接受别的页面传来的数据
    onLoad: function (options) {
    },
    //登录函数
    doLogin: function(e){
        app.globalData._OPENID = wx.getStorageSync(this.data.openid);
        //获取用户输入的用户名和密码
        var me = this;
        var fromType = e.detail.value;
        var username = fromType.username;
        var password = fromType.password;
        //判断密码和账号是否为空
        if (username.length == 0 || password.length == 0){
            wx.showToast({
              title: '账号或密码不能为空',
              icon:'none',
              duration:1500
            })
        }else{
            wx.showToast({
              title: '登录中...',
            })
            //轮询数据库，查找是否匹配记录
            let that = this;
            admid.get({
              success:(res) => {
                let user = res.data;
                //console.log(res.data);
                for (let i = 0; i < user.length; i++){
                  if (username === user[i]._id){//判断用户名是否存在
                    if (password !== user[i].password) {  //判断密码是否正确
                      wx.showToast({
                        title: '密码错误！',
                        icon: 'error',
                        duration: 2500
                      })
                    } else {
                      console.log('登陆成功！')
                      wx.showToast({
                        title: '登陆成功！！',
                        icon: 'success',
                        duration: 2500
                      })
                      wx.switchTab({   //跳转首页
                        url: '../home/home',  //这里的URL是你登录完成后跳转的界面
                      })
                    }
                  }else{
                    wx.showToast({
                      title: '无此用户名！',
                      icon: 'error',
                      duration: 2500
                    })
                  }
                }
              },
              fail:(res) =>{
                console.log("查询失败");
              }
            })
            // wx.request({
            //   url: 'url',  //请求服务器的网址
            //   method: "POST",
            //   data: {//请求的参数
            //       username: username,
            //       password: password,
            //   },
            //   header: {
            //       'content-type': 'application/joson',//默认值
            //   },
            //   success: function(res){
            //       var statusNow = res.data.statusCode;
            //       var realUrl = me.data.realUrl;
            //     if (statusNow == 200){//HTTP请求成功状态码
            //         wx.showToast({
            //           title: '登录成功！',
            //           icon: 'none',
            //           //成功登录后跳转到tabbar页面，使用功能
            //           success: function(){
            //                 setTimeout(function() {
            //                     if (realUrl != null && realUrl != undefined && realUrl != ''){
            //                         wx.redirectTo({
            //                           url: 'realUrl',//如果指定跳转到其他页面
            //                         })
            //                     }else{
            //                         wx.switchTab({
            //                           url: 'url',//跳转到主页
            //                         })
            //                     }
            //                 })
            //           }
            //         },500)
            //         app.setGlobalUserInfo(res.data);//缓存到本地
            //     }else if(statusNow == 500){//服务器内部错误
            //         wx.showToast({
            //           title: res.data.msg,
            //           icon: 'none',
            //           duration: 3000,
            //         })

            //     } 
            //   }
            // })
        }
        // console.log(username);
    },
    //跳转注册页面函数
    goToRegist: function(e){
        wx.navigateTo({
          url: '../userRegist/userRegist',
        })
    }

})