記《高校考勤系統》小程式（2）

我是一個小菜雞發表於2019-11-28

這是其他幾篇的地址：
記《高校考勤系統》小程式（1）
記《高校考勤系統》小程式（2）
記《高校考勤系統》小程式（3）

前面講了使用者註冊和首頁天氣功能，下面講講課程表頁的實現.

五.課程表頁

這裡參考了簡書上面軒轅夜空位作者的案例,以及其參考極樂叔的課程表的思路.

同樣製作課程表需要用到雲開發來儲存資料，以及結合雲函式對資料的修改，後面會講到為什麼要用到雲函式.

先來看看完成後的效果圖

1.先搭建整體結構

頭部和左側因為樣式是一樣的，可以將資料寫入data中，再通過for迴圈渲染出來，這裡就直接展示了.（偷個懶??）

<!-- 星期 -->
<view class="top">  
    <view class="top-text">
        <text>節\日</text>
    </view>
    <view class="top-text">
        <text>一</text>
    </view>
    <view class="top-text">
        <text>二</text>
    </view>
    <view class="top-text">
        <text>三</text>
    </view>
    <view class="top-text">
        <text>四</text>
    </view>
    <view class="top-text">
        <text>五</text>
    </view>
    <view class="top-text">
        <text>六</text>
    </view>
    <view class="top-text">
        <text>日</text>
    </view>
</view>
<!-- 課程 -->
<view class="cont">
    <view class="cont-left">
        <view class="left"> 1 </view>
        <view class="left"> 2 </view>
        <view class="left"> 3 </view>
        <view class="left"> 4 </view>
        <view class="left"> 5 </view>
        <view class="left"> 6 </view>
        <view class="left"> 7 </view>
        <view class="left"> 8 </view>
    </view>
    <view class="cont-right">
    </view>
</view>
<view class="bottom">
    ————<text>讀萬卷書 行萬里路</text>————
</view>
複製程式碼

點選檢視wxss程式碼

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

2.結合雲開發編寫課程表.

這裡需要考慮到雲開發中單次獲取資料上限是20條，所以我將課程表資料分為兩部分（上午和下午），當然你可以直接使用雲函式來提高獲取資料的上限，在後面會有介紹，這裡就先不做過多的解釋了，上程式碼.

單個資料結構

{
    //"_id": "296065c95da529b2055b57301b5afa75",  雲開發匯入資料會直接生成_id,這裡不用自己編寫
    "data_name": "Java高階開發技術(JavaEE)",  //課程名
    "address": "@康莊行知樓301",              //地點
    "weekNum": "10-15周",                     //週數
    "pitchNum": "3-4",                        //節數
    "teacher": "趙老師",                      //任課老師
    "_openid": "oQnNa5NJfKqSZntKFLGZWnZuXNbo"  //修改者的openid,本來是想做判斷，後面使用了雲函式，發現可有可無
}
複製程式碼

下面是從雲開發資料庫中獲取我們編寫好的課程表資料,如果對操作不熟悉可以檢視官方文件 .
1.開啟雲開發控制檯.
2.建立兩個集合對應上午下午課程表.
3.匯入我們已經編寫好的資料 (一個星期早上和下午的課程分別為14節，所以匯入資料時需要注意，如果想要當前課程沒有資訊，也是需要匯入空的欄位資料來佔一格).
4.開啟許可權管理.
5.選中第一個.

其中最後兩個步驟一定不能忘記！

點選檢視js程式碼

data: {
    colorArr: ["rgb(229,188,76, 0.8)", "rgb(104,172,246, 0.8)", "rgb(183,135,242, 0.8)", "rgb(149,226,48, 0.8)", "#ff7070",
        "#e54d42", "#0081ff", "#7DC67D", "#E17572", "#C35CFF", "#33BCBA", "#FF8533", "#6E6E6E", "#ebd4ef",
        "#428BCA", "#39b54a", "#FF674F", "#e03997", "#00CED1", "#9F79EE", "#FFC125", "#32CD32", "#00BFFF", "#8799a3","#FF69B4"
    ],
    // 儲存隨機顏色
    randomColorArr: [],
    randomColorArr2: [],
    i: 25,
    random: '',
    random2: '',
},
onLoad: function(options) {
    this.data.randomColorArr = [] // 重置顏色陣列1為空
    this.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'
                this.data.randomColorArr.push(this.random)
            } else {
                this.random = this.data.colorArr[Math.floor(Math.random() * this.data.i)] //隨機顏色
                this.data.randomColorArr.push(this.random)
            }
        }
        this.setData({
            loding: true,
            kechengbiao: this.kechengbiao,
            randomColorArr: this.data.randomColorArr
        })
    })
    //獲取課程表下午
    db.collection('資料集合中你的表名').get().then((res) => {
        this.kechengbiao2 = res.data
        for (let j = 0; j <= 13; j++) { //for迴圈判斷課名和地名為空則不加顏色
            if (this.kechengbiao2[j].data_name == '' && this.kechengbiao2[j].address == '') {
                this.random2 = 'none'
                this.data.randomColorArr2.push(this.random2)
            } else {
                this.random2 = this.data.colorArr[Math.floor(Math.random() * this.data.i)] //隨機顏色
                this.data.randomColorArr2.push(this.random2)
            }
        }
        this.setData({
            kechengbiao2: this.kechengbiao2,
            randomColorArr2: this.data.randomColorArr2
        })
    })
},
複製程式碼

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

點選檢視wxss程式碼

.appointent-date {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.appointent-date-div {
    height: 236rpx;
    border-radius: 10rpx;
    margin-bottom: 6rpx;
    color: white;
}
.flex-item {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 76rpx;
    height: 212rpx;
    font-size: 24rpx;
    padding: 6rpx;
    border: 1rpx solid transparent;
    text-align: left;
    border-radius: 10rpx;
    cursor: pointer;
    overflow: hidden;
}
.data_name {
    display: inline-block;
}
.address {
    display: inline-block;
}
複製程式碼

3.對課程實現增刪改查

首先來做最簡單的查吧，我們需要在for迴圈中加入 data-='{{index}}' ，如上程式碼所示?我加了data-key='{{index}}'，其中key可以自定義，目的是為了在點選課程時，可以獲取相迴圈中對應的下標，這樣我就可以在資料庫中搜尋到當前點選的資料並渲染出來.

查

//點選課程內容彈出詳細框
select_date: function(e) {
  this.id = e.currentTarget.dataset.key //獲取當前點選課程的下標
  const db = wx.cloud.database({
    env: '****'
  })
  db.collection('***').get().then(res => {
    console.log(res.data[this.id])   //獲取點選時課程表資料
  })
},
複製程式碼

獲取到資料後我們可以根據自己的需求渲染在頁面上，這裡我結合了vant的tab元件，左上角為返回，右上角為刪除課程表資訊，下面就講刪除課程資訊.

這裡的刪除不是說真的將資料從我們的資料庫中刪除，而是將資料賦值為“”也就是空值，這樣就做到了刪除的功能，在此結合 雲函式 來實現，因為雲開發中的操作許可權無法滿足我們對資料操作的要求.

刪

首先我們在雲函式中建立一個新的雲函式，修改index.js檔案

這裡會有一個問題也就是為什麼我們要使用雲函式，而不直接用雲開發對資料進行處理，是因為雲開發中的操作許可權只能對自己提交到資料庫中的資料進行修改，如果是別人那麼就無法修改.正常情況下，管理員肯定不止一位，所以對資料操作不能只限定一個人.

//修改課程表
const cloud = require('wx-server-sdk')
cloud.init({
    env: '***',//你的開發環境
    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 {
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
    }
}
複製程式碼

然後在js檔案中編寫對應的程式碼

tapDialogButton(e) { //從課表刪除課程
    wx.cloud.callFunction({
        name: '***',// 你的雲函式名稱
        data: {
          id: this._id,  //將資料進行空值賦值
          data_name: "",
          address: "",
          weekNum: "",
          pitchNum: "",
          teacher: ""
        },
        success: res => {
          // 關閉當前點選課程詳情
        }
    })
},
複製程式碼

改，增

做完了刪其實對改和增的實現應該也變得相對簡單，這裡也是需要用到雲函式，道理和上面講的一致.

在獲取當前點選的資料時先將此條資料儲存在 data 中，需要修改時，可以將資料賦值給 input 的 value ,在通過雲函式來修改資料庫中對應的資料.增也是同樣的道理.這裡就拿改為例.

wxml

<!-- 編輯頁 -->
<view class="edit" hidden="{{ editShow }}">
    <van-nav-bar title="編輯課程" right-text="完成" left-arrow bind:click-left="editLeft" bind:click-right="editRight" />
    <view class="label className">
        <text>課名</text>
        <input  value="{{ nowClass.data_name }}" bindinput="bindKeyInput1"></input>
    </view>
    <view class="label">
        <text>教室</text>
        <input  value="{{ nowClass.address }}" bindinput="bindKeyInput2"></input>
    </view>
    <view class="label">
        <text>週數</text>
        <input  value="{{ nowClass.weekNum }}" bindinput="bindKeyInput3"></input>
    </view>
    <view class="label">
        <text>節數</text>
        <input  value="{{ nowClass.pitchNum }}" bindinput="bindKeyInput4"></input>
    </view>
    <view class="label">
        <text>老師</text>
        <input  value="{{ nowClass.teacher }}" bindinput="bindKeyInput5"></input>
    </view>
</view>
複製程式碼

新建修改課程表資料的雲函式

//修改課程表
const cloud = require('wx-server-sdk')
cloud.init({
    env: '***',//你的開發環境
    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 {
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
    }
}
複製程式碼

//  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._id,
      data_name: this.editClassName,
      address: this.editAddress,
      weekNum: this.editWeekNum,
      pitchNum: this.editPitchNum,
      teacher: this.editTeacher
    },
    success: res => {
    },
    fail: console.error
  })

},
複製程式碼

到這裡課程表功能就做完了，如果有什麼不懂得地方歡迎留言，或者寫的不好的地方，請大家指出一起探討，之後會繼續分享後面的內容。大家也可以提前掃碼檢視小程式，歡迎指出不足，謝謝 ????

記《高校考勤系統》小程式（1）
2019-11-27
考勤系統+（小專案）
2019-05-13
JadeClass 考勤管理系統
2019-06-20
資訊系統考勤員
2010-11-09
人臉識別智慧考勤系統開發_人臉識別考勤管理系統開發
2020-05-12
基於SSM的職員考勤系統
2020-12-26
SSM
一個簡單的考勤系統 (轉)
2007-08-17
織信OA考勤管理系統是如何解放企業內部考勤的？
2021-10-15
高校工資管理系統
2018-06-19
記一次對某高校微信小程式的漏洞挖掘
2024-04-15
微信小程式
高校教材管理系統設計
2009-07-04
高校郵件系統配置相關
2018-07-02
java jsp企業員工考勤系統ssm框架
2020-12-03
JavaJSSSM框架
SSM小demo——記賬系統
2020-10-31
SSM
分散式系統小筆記
2017-07-31
分散式筆記
圖書管理系統（小程式）
2018-08-18
食堂訂餐系統小程式
2023-04-27
xp系統筆記本如何替換程式字型的小技巧
2016-08-10
筆記
微信小程式開發學習筆記[2]
2019-01-04
微信小程式筆記
Android系統開發小記：DreamService
2019-02-27
Android
陪診系統小程式開發
2023-04-19
醫療問診小程式系統
2023-04-24
LaraCMS 後臺管理系統 - 小程式
2018-03-23
ACM
智慧考勤管理工具，讓HR擺脫考勤統計麻煩的困擾
2023-05-03
DB2常用系統檢視小結
2012-09-14
DB2
Java高校教務教學管理系統原始碼
2022-05-31
Java原始碼
JAVA商城 B2B2C商城系統小程式電子商務 springcloud商城
2021-12-09
JavaSpringGCCloud
盲盒商城系統小程式app功能
2023-05-10
APP
跑腿小程式系統開發的功能
2023-04-17
貨拉拉小程式開發（系統部署）
2023-04-26
紅外人臉考勤點選考勤軟體簡介
2014-01-23
順通高校學生網上選課管理系統
2022-09-25
作業系統實驗2 程式控制和系統呼叫
2017-12-13
作業系統
考勤系統的應用實踐 - 靜態活體檢測 API 技術
2023-04-18
API
程式生涯小記
2012-05-02
編輯小記之《推薦系統實踐》
2012-04-05
對公司嚴抓考勤的重新深度認知分享-考勤對傳統型公司的重要性
2024-03-14
小程式電商系統後臺功能詳解
2020-07-16

記《高校考勤系統》小程式（2）

前面講了使用者註冊和首頁天氣功能，下面講講課程表頁的實現.

五.課程表頁

先來看看完成後的效果圖

查

刪

改，增

到這裡課程表功能就做完了，如果有什麼不懂得地方歡迎留言，或者寫的不好的地方，請大家指出一起探討，之後會繼續分享後面的內容。大家也可以提前掃碼檢視小程式，歡迎指出不足，謝謝 ????

相關文章