记《高校考勤系统》小程序（2）

这是其他几篇的地址：

• 头部和左侧因为样式是一样的，可以将数据写入data中，再通过for循环渲染出来，这里就直接展示了.（偷个懒:blush::blush:）

<!-- 星期 -->
<view class="top">  
    <"top-text">
        <text>节日</text>
    </view>
    <text>一</text>二</text>三</text>四</text>五</text>六</text>日</view>
</view>
<!-- 课程 -->
<"cont">
    <"cont-left">
        <"left"> 1 </view>
        <"left"> 2 </"left"> 3 </"left"> 4 </"left"> 5 </"left"> 6 </"left"> 7 </"left"> 8 </view>
    </"cont-right">
    </view>
<"bottom">
    ————<text>读万卷书 行万里路</text>————
</view>
复制代码

page {
    width: 100%;
    height: position: relative;
}
.top {
    padding: 16rpx 0;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px dashed #d3d3d3;
    display: flex;
    justify-content: flex-start;
}
.top-text {
    12.5%;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    align-items: center;
}
.top border-left: #d3d3d3;
}
.top-text:nth-child(1) {
    24rpx;
    border-left: none;
    line-height: 46rpx;
}
.cont {
    justify-content: start;
}
.cont-left {
    display: inline-block;
}
.left {
    90rpx;
    120rpx;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: #666;
    28rpx;
    600;
}
.cont-right {
    width: calc(100% - 90rpx);
}
.bottom {
    position: absolute;
    bottom: 20rpx;
    #ddd;
    .bottom text {
    margin-left: margin-right: #9b9b9b;
}
复制代码

• 这里需要考虑到云开发中单次获取数据上限是20条，所以我将课程表数据分为两部分（上午和下午），当然你可以直接使用云函数来提高获取数据的上限，在后面会有介绍，这里就先不做过多的解释了，上代码.

单个数据结构

{
    //"_id": "296065c95da529b2055b57301b5afa75",云开发导入数据会直接生成_id,这里不用自己编写
    "data_name": "Java高级开发技术(JavaEE)",//课程名
    "address": "@康庄行知楼301",96);">//地点
    "weekNum": "10-15周",96);">//周数
    "pitchNum": "3-4",96);">//节数
    "teacher": "赵老师",96);">//任课老师
    "_openid": "oQnNa5NJfKqSZntKFLGZWnZuXNbo"  //修改者的openid,本来是想做判断，后面使用了云函数，发现可有可无
}
复制代码

• 下面是从云开发数据库中获取我们编写好的课程表数据,如果对操作不熟悉可以查看?官方文档.?
  1.打开云开发控制台.?
  2.创建两个集合对应上午下午课程表.?
  3.导入我们已经编写好的数据?(一个星期早上和下午的课程分别为14节，所以导入数据时需要注意，如果想要当前课程没有信息，也是需要导入空的字段数据来占一格)?.?
  4.打开权限管理.?
  5.选中第一个.
• 其中最后两个步骤一定不能忘记！

data: {
    colorArr: ["rgb(229,188,76,0.8)","rgb(104,172,0);">"rgb(183,135,242,0);">"rgb(149,226,48,0);">"#ff7070",0);">"#e54d42",0);">"#0081ff",0);">"#7DC67D",0);">"#E17572",0);">"#C35CFF",0);">"#33BCBA",0);">"#FF8533",0);">"#6E6E6E",0);">"#ebd4ef",0);">"#428BCA",0);">"#39b54a",0);">"#FF674F",0);">"#e03997",0);">"#00CED1",0);">"#9F79EE",0);">"#FFC125",0);">"#32CD32",0);">"#00BFFF",0);">"#8799a3",0);">"#FF69B4"
    ],// 存储随机颜色
    randomColorArr: [],randomColorArr2: [],i: 25,random: '',random2: this.data.randomColorArr = [] // 重置颜色数组1为空
    data.randomColorArr2 = [] // 重置颜色数组2为空
    const db = wx.cloud.database({
        env: '*****'  //你的云开发环境名
    })

    //获取课程表上午数据
    db.collection('数据集合中你的表名').get().then((res) => {
        this.kechengbiao = res.data
        for (let j = 0; j <= 13; j++) { //for循环判断课名和地名为空则不加颜色
            if (this.kechengbiao[j].data_name == '' && this.kechengbiao[j].address == '') {
                this.random = 'none'
                data.randomColorArr.push(this.random)
            } else {
                this.random = data.colorArr[Math.floor(Math.random() * data.i)] //随机颜色
                this.random)
            }
        }
        this.setData({
            loding: true,kechengbiao: this.kechengbiao,randomColorArr: data.randomColorArr
        })
    })
    //获取课程表下午
    db.collection(this.kechengbiao2 = res.this.kechengbiao2[j].data_name == this.kechengbiao2[j].address == this.random2 = data.randomColorArr2.push(this.random2)
            } this.random2 = this.random2)
            }
        }
        this.setData({
            kechengbiao2: this.kechengbiao2,randomColorArr2: data.randomColorArr2
        })
    })
},复制代码

<"cont-right">
    <'appointent-date'>  //上午
            <"appointent-date-div" bindtap="select_date" wx:for="{{kechengbiao}}" wx:key={{index}}" data-key='}' style="background-color:{{randomColorArr[index]}}">
                <"flex-item" >
                    <text class='data_name'>{{item.data_name}}</text>
                    <'address'>{{item.address}}</text>
                </view>
            </view>
        </'appointent-date'>  //下午
            <"select_date2" wx:for={{kechengbiao2}{{randomColorArr2[index]}"flex-item">
                    <text>
            </view>
复制代码

.appointent-date {
    justify-content: space-around;
    flex-wrap: wrap;
}
.appointent-date-div {
    236rpx;
    border-radius: 10rpx;
    margin-bottom: 6rpx;
    color: white;
}
.flex-item {
    justify-content: flex-start;
    flex-direction: column;
    76rpx;
    212rpx;
    border: 1rpx solid transparent;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.data_name {
    .address {
    display: inline-block;
}
复制代码

• 首先来做最简单的?查?吧，我们需要在for循环中加入 data-='{{index}}' ，如上代码所示:point_up_2:我加了data-key='{{index}}'，其中key可以自定义，目的是为了在点击课程时，可以获取相循环中对应的下标，这样我就可以在数据库中搜索到当前点击的数据并渲染出来.

查

  })
  db.collection('***').get().then(res => {
    console.log(res.data[this.id])   //获取点击时课程表数据
  })
},复制代码

• 获取到数据后我们可以根据自己的需求渲染在页面上，这里我结合了vant的tab组件，左上角为返回，右上角为删除课程表信息，下面就讲?删?除课程信息.
• 这里的删除不是说真的将数据从我们的数据库中删除，而是将数据赋值为“”也就是空值，这样就做到了删除的功能，在此结合?云函数?来实现，因为云开发中的操作权限无法满足我们对数据操作的要求.

删

首先我们在云函数中创建一个新的?云函数?，修改index.js文件

• 这里会有一个问题也就是为什么我们要使用云函数，而不直接用云开发对数据进行处理，是因为云开发中的操作权限只能对自己提交到数据库中的数据进行修改，如果是别人那么就无法修改.正常情况下，管理员肯定不止一位，所以对数据操作不能只限定一个人.

)
cloud.init({
    env: '***',136);">//你的开发环境
    traceUser: true
})
const db = cloud.database();
exports.main = async (event,context) => { // 云函数入口函数
    try {
        return await db.collection('***').doc(event.id).update({  //需要修改的数据库
            data: {
                data_name: event.data_name,address: event.address,weekNum: event.weekNum,pitchNum: event.pitchNum,teacher: event.teacher
          },})
    } catch (e) {
        console.error(e)
    }
    return {
        然后在js文件中编写对应的代码

tapDialogButton(e) { //从课表删除课程
    wx.cloud.callFunction({
        name: // 你的云函数名称
        data: {
          id: this._id,136);">//将数据进行空值赋值
          data_name: "",address: ""
        },success: res => {
          // 关闭当前点击课程详情
        }
    })
},复制代码
改，增

做完了删其实对改和增的实现应该也变得相对简单，这里也是需要用到云函数，道理和上面讲的一致.
在获取当前点击的数据时先将此条数据存储在data中，需要修改时，可以将数据赋值给input的value,在通过云函数来修改数据库中对应的数据.增也是同样的道理.这里就拿改为例.

wxml
<!-- 编辑页 -->
<"edit" hidden={{ editShow }}">
    <van-nav-bar title="编辑课程" right-text="完成" left-arrow bind:click-left="editLeft" bind:click-right="editRight" />
    <"label className">
        <text>课名</text>
        <input  value={{ nowClass.data_name }}" bindinput="bindKeyInput1"></input>
    </"label">
        <text>教室</{{ nowClass.address }"bindKeyInput2"></text>周数</{{ nowClass.weekNum }"bindKeyInput3"></text>节数</{{ nowClass.pitchNum }"bindKeyInput4"></text>老师</{{ nowClass.teacher }"bindKeyInput5"></view>
复制代码
新建修改课程表数据的云函数
//  1.首先获取输入框的值，存在data中
bindKeyInput1(e) { //课名
    this.editClassName = e.detail.value
},bindKeyInput2(e) { //教室
    this.editAddress = e.detail.value
},bindKeyInput3(e) { //周数
    this.editWeekNum = e.detail.value
},bindKeyInput4(e) { //节数
    this.editPitchNum = e.detail.value
},bindKeyInput5(e) { //老师
    this.editTeacher = e.detail.value
},editRight() { //  2.编辑完成，点击提交按钮时将输入框的值赋值给对应的字段名
  wx.cloud.callFunction({
    name: // 修改课程表数据的云函数名称
    data: {
      id: this.editClassName,51); font-weight: 700;">this.editAddress,51); font-weight: 700;">this.editWeekNum,51); font-weight: 700;">this.editPitchNum,51); font-weight: 700;">this.editTeacher
    },success: res => {
    },fail: console.error
  })

},复制代码