微信小程序云数据库实现登录

微信小程序 专栏收录该内容
21 篇文章 1 订阅

微信小程序自带的云数据库的优势在于,不用搭建服务器和后端就可以直接调用数据库

云数据库配置:

例如上图,环境名称为:ksyueying 环境ID为: ksyueying-xxxxxxxxx(输入环境ID)

假设环境ID:abss    数据库名为:abc

 

微信小程序自带的云数据库可以生成登录注册系统,以下是简单实现功能的示例代码:

         登录界面如下:

login.wxml页面:

         

    <view class='username_item'>
      <input class='bussiness_input' name="username"  
      bindinput='userNameInput' placeholder='输入帐号' />
    </view>
    <view class='password_item'>
      <input class='bussiness_input' password type="text" name="password" 
       bindinput='passWordInput' placeholder='输入密码' '/>
    </view>
    <button form-type='submit' class='login_submit' bindtap="loginBtnClick" >
      登录
    </button> 

 login.js页面:

   

wx.cloud.init({
  env: 'abss'  //数据库ID
})

const db = wx.cloud.database({
  env: 'abss'
})
Page({
  data: {
    userInfo: {},
    userN: '',
    passW: ''
  },
  userNameInput: function (e) {
    this.setData({
      userN: e.detail.value
    })
  },
  passWordInput: function (e) {
    this.setData({
      passW: e.detail.value
    })
  },
 loginBtnClick: function (a) {
    var that = this
    if (that.data.userN.length == 0 || that.data.passW.length == 0) {
      wx.showModal({
        title: '温馨提示:',
        content:'用户名或密码不能为空!',
        showCancel:false
      })
    } else {
      db.collection('abc').where({username:that.data.userN}).get({//这里的abc就是数据库名
        success:function(res){

          if (that.data.passW == res.data[0].password){
            wx.redirectTo({
               url: '/pages/index/index'//[主页面]
            }) 
          }
          else{
            wx.showModal({
              title: '密码错误',
              content: '密码错误'//session中用户名和密码不为空触发
            });
          }
         }
      })
    }
  }
})

login.wxss页面

.username_item{
  position: absolute;
  left: 48px;
  top: 168px;
  width: 240px;
  height: 50px;
  line-height: 26px;
  border-radius: 8px;
  color: rgba(16, 16, 16, 1);
  font-size: 18px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(255, 255, 255, 1);
}

.password_item{
  position: absolute;
  left: 46px;
  top: 248px;
  width: 243px;
  height: 50px;
  line-height: 26px;
  border-radius: 8px;
  color: rgba(16, 16, 16, 1);
  font-size: 18px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(255, 255, 255, 1);
}

.bussiness_input {
  left: 143px;
  top: 221px;
  width: 80px;
  height: 28px;
  opacity: 0.3;
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.login_submit {
  position: absolute;
  left: 80px;
  top: 350px;
  width: 175px;
  height: 50px;
  line-height: 20px;
  border-radius: 16px;
  background-color: rgba(62, 68, 105, 1);
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(187, 187, 187, 1);
  font-size: 28px;
  text-align: center;
  font-family: PingFangSC-regular;
}

最近,数据库要进行调试可能要,详情—本地设置—调试数据库要用最高版本

  • 9
    点赞
  • 13
    评论
  • 81
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值