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

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

云数据库配置：

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

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

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

登录界面如下：

login.wxml页面：

  1. <view class='username_item'>
  2. <input class='bussiness_input' name="username"
  3. bindinput='userNameInput' placeholder='输入账号' />
  4. </view>
  5. <view class='password_item'>
  6. <input class='bussiness_input' password type="text" name="password"
  7. bindinput='passWordInput' placeholder='输入密码' '/>
  8. </view>
  9. <button form-type='submit' class='login_submit' bindtap="loginBtnClick" >
  10. 登录
  11. </button>

 login.js页面:

   

  1. wx.cloud.init({
  2. env: 'abss' //数据库ID
  3. })
  4. const db = wx.cloud.database({
  5. env: 'abss'
  6. })
  7. Page({
  8. data: {
  9. userInfo: {},
  10. userN: '',
  11. passW: ''
  12. },
  13. userNameInput: function (e) {
  14. this.setData({
  15. userN: e.detail.value
  16. })
  17. },
  18. passWordInput: function (e) {
  19. this.setData({
  20. passW: e.detail.value
  21. })
  22. },
  23. loginBtnClick: function (a) {
  24. var that = this
  25. if (that.data.userN.length == 0 || that.data.passW.length == 0) {
  26. wx.showModal({
  27. title: '温馨提示：',
  28. content:'用户名或密码不能为空！',
  29. showCancel:false
  30. })
  31. } else {
  32. db.collection('abc').where({username:that.data.userN}).get({//这里的abc就是数据库名
  33. success:function(res){
  34. if (that.data.passW == res.data[0].password){
  35. wx.redirectTo({
  36. url: '/pages/index/index'//[主页面]
  37. })
  38. }
  39. else{
  40. wx.showModal({
  41. title: '密码错误',
  42. content: '密码错误'//session中用户名和密码不为空触发
  43. });
  44. }
  45. }
  46. })
  47. }
  48. }
  49. })

login.wxss页面

  1. .username_item{
  2. position: absolute;
  3. left: 48px;
  4. top: 168px;
  5. width: 240px;
  6. height: 50px;
  7. line-height: 26px;
  8. border-radius: 8px;
  9. color: rgba(16, 16, 16, 1);
  10. font-size: 18px;
  11. text-align: center;
  12. font-family: Arial;
  13. border: 1px solid rgba(187, 187, 187, 1);
  14. background-color: rgba(255, 255, 255, 1);
  15. }
  16. .password_item{
  17. position: absolute;
  18. left: 46px;
  19. top: 248px;
  20. width: 243px;
  21. height: 50px;
  22. line-height: 26px;
  23. border-radius: 8px;
  24. color: rgba(16, 16, 16, 1);
  25. font-size: 18px;
  26. text-align: center;
  27. font-family: Arial;
  28. border: 1px solid rgba(187, 187, 187, 1);
  29. background-color: rgba(255, 255, 255, 1);
  30. }
  31. .bussiness_input {
  32. left: 143px;
  33. top: 221px;
  34. width: 80px;
  35. height: 28px;
  36. opacity: 0.3;
  37. color: rgba(16, 16, 16, 1);
  38. font-size: 20px;
  39. text-align: left;
  40. font-family: PingFangSC-regular;
  41. }
  42. .login_submit {
  43. position: absolute;
  44. left: 80px;
  45. top: 350px;
  46. width: 175px;
  47. height: 50px;
  48. line-height: 20px;
  49. border-radius: 16px;
  50. background-color: rgba(62, 68, 105, 1);
  51. color: rgba(255, 255, 255, 1);
  52. border: 1px solid rgba(187, 187, 187, 1);
  53. font-size: 28px;
  54. text-align: center;
  55. font-family: PingFangSC-regular;
  56. }

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

赞 (0)

相关推荐