小程序毕设开发笔记功能模块开发

用户登录注册模块

登录的实质就是获取账号输入框中的字段，获取密码输入框中的字段，将查询的出来的字段在数据表user中进行查询，若查询成功，则弹出跳转成功并跳转到公告页面。
注册页面与登录界面是同一界面，一般登录的用户较多，所以一开始在js文件中可以设置个当前页面的全局变量hiddenmodalput:true，并使用模板变量传入到wxml文件的modal标签中:hidden="{{hiddenmodalput}}"，这样就可以使得注册界面隐藏起来，在”用户注册“文本标签中绑定一个adduser函数，当用户点击”用户注册“，触发adduser，adduser界面功能就是将hiddenmodalput的值设置为False。这样就可以实现点击”用户注册“文本，即可弹出注册页面的功能。(xxx可补充如何注册的，如何获取注册界面的值)

实验室预约模块

实时展现实验室预约状态

从用户需要实验室预约开始，每次用户进入该实验室预约模块需要重新加载实验室预约的状态，这样就达到实时的查看实验室状态的目的。为实现该目的，我们需要在页面初始化的时候获取实验室的状态，然后渲染显示在界面上。小程序自带的onLoad页面加载函数就很容易实现该功能，我们只需将获取实验室状态的代码写入到该onLoad函数中即可。

onLoad: function(options) { 
        let that=this
        var day_type=new Date().getDay()-1 
        this.setData({
          datePosition:day_type
        })
        //利用云函数获取实验室状态信息；
        wx.cloud.callFunction({
          name: "get_status",  // name是云函数的名称
          data :{
           floorIndex : 0, // 默认楼层号
            datePosition:0 // 默认日期展示 星期日
          },
          success(res){     // 一个值为result,一个为requestID. 
            that.setData({
               obj:res.result.data[0].position_status 
            })
           },
          fail(err){
            console.log("失败",err)
          }
        })}

获取用户预约的实验室

实现了每次加载页面就可以实时看到实验室预约的状态，我们还需自己进行实验室预约，这里采用点击的方式添加预约的实验室状态，点击不同的实验室教室，就可以看到方快的颜色变化，当颜色变换到灰色的时候，说明该教室可预约。
这里为了方便查看用户预约的实验室位置在哪，在最下方的确认预约按钮上增加个展示用户点击的预约实验室状态的一排列表。其实二维数组展现的实验室预约状态在数据表中展现的就是个坐标，我们点击二维数组，颜色发生变化，我们需要个后台函数来获取这些坐标，然后展示我们选中的数据。下方是代码展示

list: [], // list列表获取点击的坐标

choose: function(e) {
    let that=this
    var p = e.currentTarget.id.split(",")
    //i行号（从0开始）
    //j列号（从0开始）   
    var i = parseInt(p[0])
    var j = parseInt(p[1])
    var id = i + ',' + j // 1,2 
    this.setData({
      position_id:id
    })
    var item = this.data.obj[i][j]
      
    var status = item

    /**
     * 可预订
     */
    if (status == 1) {
      this.data.click1++
      that.data.obj[i][j]=3 // 写入状态3
      /**
       * 生成框里的数据
       */
      this.data.list.push({        //向字段为list的数据插入一个字典
        floorIndex:this.data.floorIndex,
        datePosition:this.data.datePosition,
        time_id:i,
        area:this.data.area[j],
        id: id,       
      })
      /**
       * 更新全局数据
       */
      this.setData({
        obj: this.data.obj, // obj是初始化自定义列表
        list: this.data.list
      })
    } else if (status == 3) {
      /**
       * 已选择 取消选择
       */   
      item = 1 //将其状态恢复
      that.data.obj[i][j]=1
      this.data.click1++
      for (var m = 0; m < this.data.list.length; m++) {
        if (this.data.list[m].id == id) {
          this.data.list.splice(m, 1)//从列表中删除
          break;
        }
      }
      /**
       * 全局赋值
       */
      this.setData({
        obj: this.data.obj,
        list: this.data.list
      })
    }else if (status == 2) {
      wx.showToast({
        title: '已被预定',
        icon: 'none',
        duration: 2000
      })
    } 
  }

更新个人实验室预约表

从上面的chose()函数我们已经获取了用户点击的实验室教室的数据，然后我们点击最下方的确认预约按钮，即可实现预约成功。这里考虑的逻辑就是将用户预约的数据更新到的实验室个人数据预约表。这样就可以实现用户的预约了。

  confirm: function(e) { // 调用函数查询数据然后更新到页面上
    if (this.data.list.length==0) {
      wx.showToast({
        title: '还没有选择哦！',
        icon: 'none',
        duration: 2000
      })
      return
    }
    var day_type=new Date().getDay()-1  
    if(this.data.datePosition<day_type){
      wx.showToast({
        title: '改之前的没有意义哦！',
        icon:"none",
        duration:2000
      })
      return
    }
    let that=this
    //给预约表中写入数据或者更新yuyue表
    if((this.data.click1%2)!=0){// 列表没变换不进行云函数调用

          //将obj[i][j]中选定的值由3改为2(有人状态)；选择的实验室状态由status为2则代表选中
          for(var a=0;a<this.data.list.length;a++){
            var temp = this.data.list[a].id.split(",");
            var x = parseInt(temp[0])
            var y = parseInt(temp[1])
            if(this.data.obj[x][y]==3){
              this.data.obj[x][y]=2;
            }  
          }
          wx.cloud.callFunction({
            name: "updata_position", 
            data :{
              floorIndex : parseInt(that.data.floorIndex),
              datePosition:parseInt(that.data.datePosition),
              obj:that.data.obj
            },
            success(res){   
              console.log("更新position_info成功",res.result)
            },
            fail(err){
              console.log("失败",err)
            }
          })
          this.setData({
            obj: this.data.obj,
            click1:0
          })
          wx.showToast({
            title: '设定成功！',
            icon:"none",
            duration:2000
          })
    }     
  },
})

仪器设备管理模块

从需求入手，仪器设备管理需要个仪器入库的功能，修改仪器信息功能，仪器删除，仪器申请借用，仪器归还，仪器上报维修，仪器搜索功能。

仪器入库

仪器入库的操作就是个将数据写入数据的操作，这里使用表单来让用户输入数据,所以我们需考虑如何从表单中获取数据

// 该函数是表单触发的函数，可获取全部的表单数据
formSubmit: function (e) {
    const { formData, fileId } = this.data;
    const { value } = e.detail; //定义表单字段的全部数据为value
    // 获取数据库
    const db = wx.cloud.database();
    // 判断填写必要信息是否为空
    if (value.name === '' || value.age === '') {
      wx.showToast({
        title: '仪器名仪器编号为空',
      });
      return;
    };
// 新增数据
db.collection('appInfo').add({
        data: { ...value, fileId }, // 是从云存储中获取的图片的FileId,在下方然后写入这个fileId中
        success: res => {
          wx.showToast({
            title: '新增记录成功',
          });
          setTimeout(() => {
            const pages = getCurrentPages();
            if (pages.length > 1) {
              const beforePage = pages[pages.length - 2];
              beforePage.onLoadData();
            }
            wx.navigateTo({ //switchTab可跳转tabbar页面
              url: '../tabs_home/home',
            });
          }, 2000);
          console.log('添加成功,跳转页面成功')
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '新增记录失败'
          })
        }
      })
    }
  }

图片的下载需要个单独的函数,因为上传图片已经把图片上传到了云存储空间,所以再入库完成之后跳转到仪器列表界面可以加载出图片，这里需要再仪器列表界面初始化中

doUpload() { 
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log('res', res);
        wx.showLoading({
          title: '上传中',
        });
        //上传图片的路径
        const filePath = res.tempFilePaths[0];
        console.log('打印的文件路径:',filePath)
        this.setData({
          fileSrc: filePath
        });

        const cloudPath = "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000);
        console.log('打印的云路径:',cloudPath)
        // 更新上传的图片文件
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log(res); // 更新图片的fileId
            this.setData({ fileId: res.fileID }); 
          },
          fail: e => {
            console.error('[上传文件] 失败：', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          // 上传文件不管成功与否都关闭该页面
          complete: () => {
            wx.hideLoading()
          }
        });
      },
      fail: e => {
        console.error(e)
      }
    })
  }

修改仪器信息

考虑到管理员录入信息有可能会出错，或者仪器本身信息有误的情况下，可以进行仪器的修改。仪器的修改是跳转到添加该仪器id的界面，然后修改错误的添加信息，重新录入。

// 跳转到修改页面
onUpdateUser: options => {
    const {
      item
    } = options.currentTarget.dataset;
    wx.navigateTo({
      // 这个跳转界面集结了集合中的所有字段啊，要是更改的话是否也要这样做
      url: `../user/addForm?_id=${item._id}&name=${item.name}&age=${item.age}&fileUrl=${item.fileUrl}`,
    });
  },
// 更新数据表修改的信息
db.collection('userInfo').doc(formData._id).update({
        //...value是input表单中的值
        data: { ...value, fileId },
        success: res => {
          wx.showToast({
            title: '修改记录成功',
          });

仪器申请借用

仪器申请借用涉及到两张表，一张是个人仪器表，一张是总的仪器表，这里涉及两个操作，当我们申请借用的时候，总的仪器表数据减少1，个人仪器表的数据增加1。
代码如下：

仪器归还

仪器归还和仪器申请刚好相反，仪器归还作用在数据表上是个人仪器数据表数据减少1，总的仪器数据表数据增加1.

仪器上报维修

仪器上报维修功能是考虑到学生在实验时发现仪器被损坏了，影响到实验，这时候可以记录下该仪器编号，进行上报维修。所以这里就考虑到是个表单,根据该仪器的id我们就可以跳转到修改维修上报界面

// 跳转到修改维修上报界面
onUpdateUser: options => {
    const {
      item
    } = options.currentTarget.dataset;
    wx.navigateTo({
      // 这个跳转界面集结了集合中的所有字段啊，要是更改的话是否也要这样做
      url: `../user/addForm?_id=${item._id}&name=${item.name}&age=${item.age}&fileUrl=${item.fileUrl}`,
    });
  },

仪器删除

仪器删除是考虑到仪器在实验时候已经严重损坏，或者遗失了等使得该仪器再使用得缘由，线上就必须要删除该仪器，这样才方便进行仪器的管理。

  onRemoveUser: function (options) {

    // 删除记录获取集合方式不保险啊
    const {
      item
    } = options.currentTarget.dataset;
    wx.showModal({
      title: '提示',
      content: `确认删除${item.name}?`,
      success(res) {
        if (res.confirm) {
          remove(); // 执行下方的删除函数
        } else if (res.cancel) {
          return;
        }
      }
    });
    const remove = () => {
      const db = wx.cloud.database();
      db.collection('userInfo').doc(item._id).remove({
        success: res => {
          this.onLoadData();
          wx.showToast({
            title: '删除成功',
          });
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '删除失败',
          })
        }
      })
    };
  },

仪器搜索功能

考虑到随着仪器设备的逐年增加，仪器设备会变得很多，通过翻列表查找太浪费时间了，所以采用根据仪器名称或仪器编号进行搜索仪器，提高查找仪器的效率。

  btnSbmit: function (e) { // 表单传入可以通过e这个关键字传入
    let that = this;
    const db = wx.cloud.database()
    // 加个标识位i
    db.collection('userInfo').where({
      name:/e.detail.value.inputName/i 
    })
    db.collection('userInfo').where({
      name:db.RegExp({
        regexp:e.detail.value.inputName,
        options:'i',
      })
    }).get({
      success: res => {
        console.log('看下查询出来的数据是：',res.data)
        that.setData({ // 把查询的数据添加到userPart中
          userPart: res.data
        })
        console.log('that.setData是什么 ', that.setData) //还是that.data
        console.log('userPart是什么 ', userPart) 
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
  },
})

仪器设备展示模块

仪器设备展示模块是为了方便用户预览仪器，这里就是需要从数据表中读取出所有的仪器

db.collection('userInfo').get({ // 获取指定集合的数据
      success: res => {
        this.setData({
          list: res.data
        }, this.onGetFile); 
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
      }
    });
    setTimeout(function () { 
      wx.hideLoading()
    }, 1000)
  }

课程表模块

课程表模块是采用二维数组进行渲染的;所以我们只需要获取课程表数据表数据，然后将课程表数据表写入到指定的list列表中，然后通过{list}模板变量在wxml页面进行数据的传递。

db.collection('Class_Schedule').get({ // 获取指定集合的数据
      success: res => {
        this.setData({
          list: res.data
        }); 
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
      }
    });
    setTimeout(function () { 
      wx.hideLoading()
    }, 1000)
  }