零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统

Posted 2022-11-27 lwx2233

书接上文，我们已经“画”好了一个登录页面，接下来我们来分析一下按钮需要进行什么操作

登录：获取账号与密码，上传到云数据库进行判断，如果存在用户，则跳转到下一页面，不存在则出现提示框“不存在用户”，存在用户密码错误则判断“密码错误”

清除：清空所有输入框

退出：退出该小程序

理清楚相对的功能模块之后，我们先给数据库中添加一个用户表，表中存一条记录方便我们判断

id是可以使用系统默认的这个无所谓，name与password代表着账号和密码，admin则是判断是否为管理员，true代表是，false代表不是。

之后写入代码获取输入的值，在wxml中加一个value字段方便我们获取输入的值

//wxml
<view class="view-contain-ti">
    <text class="user">账号</text>
    <input bindinput="user" class="inputName" value='user'></input>
</view>
<view class="view-contain-ti2">
    <text class="password">密码</text>
    <input bindinput="password" class="inputPassWord" value='password'></input>
</view>

//js
  user(event) 
    username= event.detail.value;
  ,
  //获取密码
  password:function(event) 
    password = event.detail.value;
  ,

登录按钮如下

//登录按钮
  login()                                                             //bindtap=“login”
    let that = this;
    //登陆获取用户信息
    db.collection('user').get(                                        //user是数据库名
      success:(res)=>
        let user = res.data;
        console.log(res.data);
        for(let i = 0 ; i < user.length ; i++)
          if(username == user[i].name && password == user[i].password)
            wx.showToast(
              title: '登陆成功！',
              duration: 2500
            )
            wx.navigateTo(
              url: '../index/index',
            )
          
          else if(username == user[i].name && password != user[i].password)
            wx.showToast(
              title: '密码错误！',
              duration: 2500,
              icon : 'error'
            )
          
          else if(username != user[i].name)
            wx.showToast(
              title: '用户名不存在！',
              duration: 2500,
              icon : 'error'
            )
          
        
      
    )
  ,

这个样子就实现了登录，效果如图

接下来做清除按钮，代码如下：

clear()
    this.setData(
      user:'',
    password:'' )   
  ,

 效果挺好（要录制过程我嫌麻烦就不录了）

退出按钮

暂时无法实现，查阅了官方文档后发现，只有navigator这个方法能实现exit，不过他的target参数必须是miniprogram，也就是其他的小程序。

所以，还是建议大家手动退出吧，或者写一个左上角退出也是可以的。

那么今天我们就完成了登录页面的书写，明天开始进入借还仪器的页面的书写，如果你觉得这篇文章有帮到你的话，不妨点个赞点个收藏！