基于微信小程序的课堂考勤系统设计与实现
本系統(tǒng)服務(wù)端使用java開發(fā)，版本為jdk1.8
小程序使用的是wxml、wxss、javascript
數(shù)據(jù)庫采用mysql5.7
使用到的技術(shù)有springboot，mybatis，gradle，poi，微信開發(fā)者工具
摘 ??要
????????在日趨信息化的互聯(lián)網(wǎng)時(shí)代，我們通過互聯(lián)網(wǎng)的技術(shù)和思維，信息化的方法進(jìn)行設(shè)計(jì)并實(shí)現(xiàn)一套考勤系統(tǒng)的需求顯得格外重要。目前國內(nèi)高校的考勤方式中，以傳統(tǒng)的到場點(diǎn)名方式為主，這種方式的考勤占用了大量的課堂時(shí)間，同時(shí)存在代答到的現(xiàn)象，隨著課堂人數(shù)的增加，這種低效率的考勤方式將不再適合高校課堂。
????????本系統(tǒng)基于微信小程序平臺，前端使用了WXML、JavaScript語言編寫，邏輯層使用了Java編寫，借助于微信開發(fā)平臺提供的微信開發(fā)者工具和 JetBrains公司提供的IntelliJ IDEA進(jìn)行開發(fā)和調(diào)試，通過地理位置信息以及驗(yàn)證碼的校驗(yàn)來實(shí)現(xiàn)課堂考勤。
????????本系統(tǒng)在課堂考勤中準(zhǔn)確率和效率相對于傳統(tǒng)的點(diǎn)名方式更高，操作簡單，實(shí)用性強(qiáng)，適應(yīng)于多平臺，開發(fā)成本低，系統(tǒng)可靠性高，且能滿足高校課堂中考勤的需求。
關(guān)鍵詞：微信小程序；高效課堂；考勤效率；定位
Abstract
? In the general developing information internet age, the demand for designing and attaining a series of checking system by Internet technology and logical mind is extremely matter. Currently, the domestic colleges and universities mainly rely on traditional name-checking-way to check on students' attendance, which occupies plenty of class time in vain. Meanwhile, also existing the phenomenon of replacing the calls. As the class size increases, such the low efficient checking way will no longer suitable for college-teaching model any more.?
? The system based on platform of WeChat Mini Program, and use WXML, JavaScript to compile. With Java compile in the logic layer. Drawing support on WeChat development platform and IntelliJ IDEA provided by JetBrains company to develop and debug. Meanwhile, using geography site information and identifying code to achieve class-checking.
? The accuracy rate and efficiency of system is much better than traditional way, besides, it's feasible to develop and practice. It's suitable for most platforms with low development costs, will be able to satisfy the checking demand.
Key Words: WeChat Mini Program; university classroom; attendance; geography site information
目錄
1 緒 ??論
1.1 課題背景
1.2 國內(nèi)外現(xiàn)狀分析
1.3 主要研究內(nèi)容及組織結(jié)構(gòu)
1.3.1 本文主要研究內(nèi)容
1.3.2 論文整體框架
2 相關(guān)技術(shù)介紹
2.1 微信小程序介紹
2.1.1 微信小程序發(fā)展史
2.1.2 小程序的特點(diǎn)
2.2 系統(tǒng)開發(fā)環(huán)境
3 系統(tǒng)需求分析
3.1 系統(tǒng)可行性分析
3.1.1 技術(shù)可行性
3.1.2 經(jīng)濟(jì)可行性
3.1.3 操作可行性
3.2 系統(tǒng)需求分析
3.2.1 功能需求分析
3.2.2 非功能需求分析
4 系統(tǒng)設(shè)計(jì)
4.1 系統(tǒng)設(shè)計(jì)
4.1.1 系統(tǒng)功能設(shè)計(jì)
4.1.2 系統(tǒng)流程
4.2 數(shù)據(jù)庫設(shè)計(jì)
4.2.1 概念設(shè)計(jì)
4.2.2 邏輯設(shè)計(jì)
5 系統(tǒng)實(shí)現(xiàn)
5.1 系統(tǒng)前端的實(shí)現(xiàn)
5.1.1 總體頁面的實(shí)現(xiàn)
5.1.2 “我”頁面的實(shí)現(xiàn)
5.1.3 “首頁”頁面的實(shí)現(xiàn)
5.1.4 “簽到”頁面的實(shí)現(xiàn)
5.2 系統(tǒng)邏輯層的實(shí)現(xiàn)
5.2.1 系統(tǒng)登錄功能的實(shí)現(xiàn)
5.2.2 簽到功能的實(shí)現(xiàn)
5.2.3 導(dǎo)出功能的實(shí)現(xiàn)
5.3 系統(tǒng)測試
5.3.1 系統(tǒng)功能測試
5.3.2 系統(tǒng)界面及窗體測試
6 結(jié) ??論
? 參考文獻(xiàn)
1 緒 ??論
1.1 課題背景
????????作為監(jiān)督學(xué)生出勤、提高教學(xué)質(zhì)量的重要環(huán)節(jié)，課堂考勤在高校日常教學(xué)生活中起著十分顯著的作用。當(dāng)前多數(shù)高校會采取的相同專業(yè)合班教學(xué)，教室內(nèi)學(xué)生很多，如果依舊使用傳統(tǒng)的紙質(zhì)名單簽到點(diǎn)名、以學(xué)生答到的傳統(tǒng)考勤方式，難以避免學(xué)生代答到的情況，而且要浪費(fèi)很多課堂時(shí)間在點(diǎn)名上。對于學(xué)生們來說，這樣并不能起到很好的監(jiān)督作用，對于學(xué)校和老師們來說，這種考勤方式需要浪費(fèi)很多不必要的時(shí)間，而且還不能保證考勤結(jié)果的準(zhǔn)確性。隨著課堂中人數(shù)的增多，依賴點(diǎn)名的考勤方式缺點(diǎn)逐漸凸顯出來。所以，將信息技術(shù)與互聯(lián)網(wǎng)+的思維相結(jié)合，開發(fā)一套基于微信小程序的課堂考勤系統(tǒng)，用于簡化大學(xué)課堂考勤變得越來越有必要。一個(gè)操作簡單、效率高的考勤系統(tǒng)不但可以監(jiān)督學(xué)生按時(shí)上課，提高學(xué)校的教學(xué)質(zhì)量，還可以幫助學(xué)校了解學(xué)生的出勤情況[1]。
????????微信作為一個(gè)即時(shí)通訊類手機(jī)APP，它擁有非常高的使用率和裝機(jī)率，微信發(fā)布的微信小程序功能，以其優(yōu)秀的體驗(yàn)，倍受開發(fā)人員喜愛。微信小程序平臺為開發(fā)人員提供了非常多的應(yīng)用程序API，許多原本只能夠以手機(jī)APP形式使用的功能，現(xiàn)在開發(fā)人員都能夠通過微信開發(fā)者工具設(shè)計(jì)并開發(fā)。
????????隨著科技的進(jìn)步，人工智能和深度學(xué)習(xí)在各個(gè)領(lǐng)域的廣泛使用，越來越多的公司和工廠使用人臉識別打卡考勤，但是在高校環(huán)境中人臉識別考勤并不能很好的發(fā)揮作用[2]。通過互聯(lián)網(wǎng)+的思維，將小程序的提供的地理定位與小程序進(jìn)行結(jié)合可以很大程度的解決高校以往考勤方式效率低下的問題，并且可以很大程度提高課堂考勤的可信度。
1.2 國內(nèi)外現(xiàn)狀分析
????????現(xiàn)在我國很多大、中、小型單位已經(jīng)不再繼續(xù)使用紙質(zhì)簽到或點(diǎn)名的方式考勤，隨著智能辦公硬件與軟件的逐漸完善，很多新的員工考勤的解決方案得到了推廣。但是，先在還沒有一種可以在大多數(shù)高校中使用的、成本比較低的考勤方式，來達(dá)到高校課堂考勤的需求。調(diào)查發(fā)現(xiàn)，目前大學(xué)課堂考勤的實(shí)現(xiàn)方法主要有以下幾種方式。
????????(1) 以智能手機(jī)為主的考勤：比如使用微信公眾號、GPS、無線網(wǎng)、實(shí)時(shí)更新的二維碼等。一些開發(fā)者基于微信企業(yè)號研究出了微信考勤系統(tǒng)并在大學(xué)課堂進(jìn)行應(yīng)用[2]，從該系統(tǒng)的使用狀況分析，該系統(tǒng)依舊存在同學(xué)代替考勤的問題，而且該系統(tǒng)對上課地方也有要求。有的開發(fā)者開發(fā)出使用無線網(wǎng)絡(luò)的課堂考勤系統(tǒng)[3]，這種考勤系統(tǒng)必須提前鋪設(shè)局域網(wǎng)才能進(jìn)行考勤[3]。
????????(2) 以NFC為主的考勤：一些開發(fā)者基于NFC技術(shù)開發(fā)了基于校園一卡通的考勤系統(tǒng)。這種考勤方式適用于不能攜帶手機(jī)的場合，且需要專用讀卡設(shè)備進(jìn)行驗(yàn)證。
????????(3) 以藍(lán)牙設(shè)備為主的考勤：如物聯(lián)網(wǎng)、射頻識別(RFID)技術(shù)、藍(lán)牙、iBeacon(蘋果公司研發(fā)的低功耗藍(lán)牙技術(shù))等。有開發(fā)者提出使用iBeacon技術(shù)的課堂考勤系統(tǒng)，使用藍(lán)牙的考勤方式可以通過支持iBeacon的設(shè)備進(jìn)行簽到[4]，但是需要提前鋪設(shè)iBeacon設(shè)備，維護(hù)成本比較高，而且在通信過程也存在安全隱患。有開發(fā)者在Android平臺開發(fā)了一套基于藍(lán)牙的考勤系統(tǒng)，但然而這個(gè)系統(tǒng)只支持Android平臺，如果學(xué)生使用蘋果設(shè)備則不能使用，不具備普適性。上述三種考勤方式都是通過移動設(shè)備或便攜設(shè)備作為識別的主體[5]，對學(xué)生身份的識別不準(zhǔn)確，與傳統(tǒng)點(diǎn)名方式相同，不能有效解決學(xué)生之間代替考勤的問題。
????????(4) 基于生物特征識別考勤：這種考勤方式主要通過識別人類本身的生物特征，比如指紋和人臉，可以唯一識別一個(gè)人。一些開發(fā)者將指紋識別技術(shù)用于高校課堂考勤[6]，但這種考勤方式必須使用專門設(shè)計(jì)的指紋識別機(jī)器。除此之外，還有開發(fā)者提出使用虹膜識別技術(shù)進(jìn)行課堂考勤，雖然這樣準(zhǔn)確率非常高，但是準(zhǔn)備這樣的虹膜識別設(shè)備不僅會耗費(fèi)很高的成本，而且實(shí)施起來也比較困難 [7]。
????????綜合比較以上四種課堂考勤方式的優(yōu)缺點(diǎn)，要想實(shí)現(xiàn)成本低、準(zhǔn)確率高的考勤方式，就要軟件與現(xiàn)有的硬件相結(jié)合，結(jié)合互聯(lián)網(wǎng)+的思想，使用網(wǎng)絡(luò)的優(yōu)勢，摒棄指紋和虹膜識別現(xiàn)實(shí)中操作的困難，因此，本文選用基于微信小程序的課堂考勤，使用微信小程序獲取用戶位置信息，來實(shí)現(xiàn)大學(xué)課堂的考勤。
1.3 主要研究內(nèi)容及組織結(jié)構(gòu)
1.3.1 本文主要研究內(nèi)容
????????本文結(jié)合當(dāng)前高效課堂的考勤需求，以及微信小程序的便捷性、普適性和較高的使用率，與移動設(shè)備的定位模塊相結(jié)合，為高校提供了一種低成本、高效率的課堂考勤方法，解決了目前大學(xué)課堂點(diǎn)名效率低下、準(zhǔn)確率低的問題。開發(fā)出了一套基于微信小程序的課堂考勤系統(tǒng)。
本文主要的研究內(nèi)容如下：
????????(1) 對于基于手機(jī)APP的課堂考勤方案，其必須至少開發(fā)出兩套手機(jī)系統(tǒng)，才能適用于目前的移動端市場，本文使用微信小程序平臺，借助微信的高度裝機(jī)率來規(guī)避手機(jī)APP對于手機(jī)不同操作系統(tǒng)適配的尷尬問題。
????????(2) 對于考勤定位系統(tǒng)有一定的環(huán)境限制，比如如何控制定位的精度，在考慮國內(nèi)的大部分高校教室大小后，得出60米考勤精度范圍，在考勤成本與考勤準(zhǔn)確性之間形成契合點(diǎn)。
1.3.2 論文整體框架
本文將從以下五個(gè)方面介紹，以下是每個(gè)章節(jié)的具體內(nèi)容。
????????第一章為緒論。本章以分析課題背景的方式，列出當(dāng)前已有的課堂考勤存在的一些不足，同時(shí)客觀分析了在課堂考勤方向上國內(nèi)對此的相關(guān)技術(shù)的研究，緊接著深入探討了本課題的研究必要，然后是對本文的主要探討內(nèi)容以及對本文的整體框架的介紹。
????????第二章為本系統(tǒng)使用的相關(guān)技術(shù)以及開發(fā)平臺的介紹。本系統(tǒng)使用了騰訊提供的微信小程序進(jìn)行開發(fā)，結(jié)合了智能手機(jī)的地理定位技術(shù)，并且使用了多種API進(jìn)行開發(fā)，為了方便更好地理解全文，本章節(jié)主要闡述了本系統(tǒng)開發(fā)過程中涉及的相關(guān)技術(shù)。
????????第三章為系統(tǒng)分析。本章使用軟件開發(fā)過程中常用的需求分析法，剖析了該系統(tǒng)的功能需求和非功能需求，從多個(gè)角度對系統(tǒng)進(jìn)行了可行性分析，并且介紹了系統(tǒng)結(jié)構(gòu)，繪制了系統(tǒng)運(yùn)行的流程圖[8]。
????????第四章為系統(tǒng)設(shè)計(jì)。本章通過圖表的方式介紹了該系統(tǒng)數(shù)據(jù)庫的概念設(shè)計(jì)和邏輯設(shè)計(jì)，對系統(tǒng)的相關(guān)功能進(jìn)行了介紹。
????????第五章為系統(tǒng)實(shí)現(xiàn)。本章按照系統(tǒng)開發(fā)流程對系統(tǒng)的各個(gè)功能具體的實(shí)現(xiàn)方法作了簡要介紹，給出了核心功能的主要實(shí)現(xiàn)代碼，并對系統(tǒng)的各項(xiàng)功能進(jìn)行了測試，本章系統(tǒng)測試部分給出了測試方法以及測試數(shù)據(jù)。
2 相關(guān)技術(shù)介紹
????????本系統(tǒng)是依據(jù)騰訊的小程序開發(fā)文檔，前端開發(fā)使用了騰訊提供給開發(fā)者的的微信開發(fā)者工具。前端視圖使用了微信特有的WXML和WXSS語言進(jìn)行開發(fā)，邏輯層則是使用了JavaScript和Java語言進(jìn)行開發(fā)，數(shù)據(jù)庫使用了比較流行的關(guān)系型數(shù)據(jù)庫MySQL。調(diào)用了微信小程序的位置獲取API，用來判斷簽到者是否符合簽到條件，本章分別介紹了微信小程序及開發(fā)環(huán)境。
2.1 微信小程序介紹
????????如今，微信以其優(yōu)異的性能和便捷性已經(jīng)變成了人們?nèi)粘Ｉ畋夭豢缮俚募磿r(shí)通訊軟件。在2018年，微信的使用超過了120億人次[9]，微信中的小程序功能提供的技術(shù)與平臺，使我們的生活逐漸變得便捷。
2.1.1 微信小程序發(fā)展史
????????微信最初發(fā)布的JS API（JavaScript Application Programming Interface，JavaScript 應(yīng)用程序編程接口），是微信小程序的前身，依賴于微信強(qiáng)大的社交平臺，使得微信內(nèi)置的瀏覽器成為移動互聯(lián)網(wǎng)的一個(gè)非常重要的入口[10]。到了2015年初，微信公布了一套叫做JS-JDK的網(wǎng)頁開發(fā)工具包，開發(fā)者可以利用微信本身的功能，使得微信應(yīng)用開發(fā)者可以輕松調(diào)用更多的接口，從而給用戶帶來更多的驚喜。接著，為了讓所有開發(fā)人員都可以在微信的開發(fā)上獲得更好的體驗(yàn)，微信就推出了如今的微信小程序。
2.1.2 小程序的特點(diǎn)
????????(1) 微信小程序不需要下載，用戶首次可以直接通過掃描小程序碼或者微信頂部的搜索來進(jìn)入小程序，當(dāng)用戶需要再次使用時(shí)，只需打開微信，在微信的主頁下拉即可進(jìn)入小程序。不需要像傳統(tǒng)的手機(jī)APP那樣去下載安裝，更沒有甚至長達(dá)幾分鐘的下載與安裝過程，只需掃描二維碼，小程序就會像網(wǎng)頁一樣被加載出來，使用結(jié)束后退出即可，完全不必?fù)?dān)心應(yīng)用的內(nèi)存占用問題。如果用戶不在需要小程序，在小程序列表中長按小程序即可選擇刪除，不會像手機(jī)APP那樣產(chǎn)生卸載殘留。
????????(2) 小程序的開發(fā)更加簡單高效。小程序不需要像手機(jī)APP那樣要去適應(yīng)不同的手機(jī)系統(tǒng)，以往的APP開發(fā)需要至少適應(yīng)安卓與蘋果的iOS系統(tǒng)，而小程序不需要，因?yàn)樾〕绦蛞蕾囉谖⑿哦嬖?#xff0c;只需適應(yīng)微信的環(huán)境即可，相比較手機(jī)APP，小程序?qū)崿F(xiàn)了一次開發(fā)能夠在多個(gè)平臺上使用，只需所運(yùn)行的微信版本支持即可。這種開發(fā)方式極大程度的降低了開發(fā)所產(chǎn)生的成本[10]。除此之外，與傳統(tǒng)的APP相比，微信小程序更容易推廣，因?yàn)樗恍枰螺d，直接在小程序界面點(diǎn)擊即可分享給通訊錄的好友使用。而且每次的版本更新與維護(hù)，只需要將代碼提交與小程序平臺，審核通過后即可完成迭代，實(shí)現(xiàn)了“熱更新”，不需要像以往的手機(jī)應(yīng)用那樣向用戶推送更新。
????????(3) 在使用體驗(yàn)上，小程序相比較傳統(tǒng)的手機(jī)APP也不差。小程序比傳統(tǒng)的網(wǎng)頁使用體驗(yàn)更好，它使用了WebSocket雙向通信以及本地緩存技術(shù)[11]，這樣一來，微信小程序的使用感受更加接近了傳統(tǒng)的手機(jī)APP，小程序開發(fā)人員在寫代碼的過程中，可以直接調(diào)用各種API，不用考慮兼容的問題，這點(diǎn)與傳統(tǒng)的web開發(fā)相比，優(yōu)勢很明顯，可以讓開發(fā)者更加關(guān)注于如何將內(nèi)容更好地呈現(xiàn)給用戶。
????????(4) 微信小程序可以滿足更多的使用場景，可以實(shí)現(xiàn)更多的功能。相比較傳統(tǒng)的HTML5，得益于微信的支持，小程序可以使用更多的手機(jī)系統(tǒng)的API[12]，比如定位模塊、手機(jī)傳感器模塊、攝像機(jī)模塊和藍(lán)牙。
????????(5) 微信小程序比傳統(tǒng)的網(wǎng)頁和手機(jī)APP更加安全，因?yàn)槊總€(gè)小程序在發(fā)布之前都需要通過騰訊官方審核方可首先使用，微信小程序通信采用的是HTTPS（超文本傳輸協(xié)議）訪問，與普通的HTTP協(xié)議相比，HTTPS具有安全套接層(SSL)加密 [13]。
2.2 系統(tǒng)開發(fā)環(huán)境
????????使用微信小程序平臺開發(fā)的小程序，有不止一種可以選擇的集成開發(fā)環(huán)境，本系統(tǒng)則是通過騰訊提供的微信開發(fā)者工具進(jìn)行前端視圖的開發(fā)，以及開發(fā)完成后的功能測試。邏輯層則是采用IntelliJ IDEA進(jìn)行Java代碼的編寫和各單元代碼的測試。一個(gè)良好的開發(fā)環(huán)境不但可以提高開發(fā)者的效率，在后期的功能測試過程中，也可以更好、更準(zhǔn)確的進(jìn)行功能的測試。表4-1為本系統(tǒng)的開發(fā)以及調(diào)試過程中使用的具體環(huán)境及其配置。
表4-1 開發(fā)環(huán)境
| 系統(tǒng) | 品牌 | 系統(tǒng)版本號 | 處理器 | RAM | 工具 | 版本號 |
| Windows | 惠普 | Win10 | i5-7200u | 8G | IDEA 微信開發(fā)者工具 | 2017.3 v2.13.1 |
| Android | 小米 | Android 10 | 驍龍855 | 8G | 微信 | 8.0.1 |
| iOS | Apple | iOS 14 | A12Z | 6G | 微信 | 8.0.1 |
3 系統(tǒng)需求分析
????????本章主要從技術(shù)、經(jīng)濟(jì)以及操作的角度上分析了該系統(tǒng)的可行性，以及本系統(tǒng)在開發(fā)過程中需要考慮的功能需求等。
3.1 系統(tǒng)可行性分析
????????本系統(tǒng)的開發(fā)主要使用用戶為大學(xué)教師與學(xué)生，使用場景為大學(xué)課堂，面向當(dāng)前大學(xué)課堂的日常考勤，結(jié)合全球定位技術(shù)、二維碼技術(shù)并給予微信小程序開發(fā)，解決了課堂考勤系統(tǒng)的空缺。本小節(jié)將從以下三個(gè)角度詳細(xì)分析本系統(tǒng)在高校課堂上的可行性問題。
3.1.1 技術(shù)可行性
????????軟件部分，視圖層使用了基于微信開發(fā)文檔的WXML、WXSS，邏輯層使用了ES6的JavaScript、和JDK1.8版本的Java。使用微信小程序開發(fā)工具進(jìn)行JavaScript和WXML代碼的編寫，使用IntelliJ IDEA進(jìn)行Java代碼的編寫，這樣可以更加高效的進(jìn)行代碼編寫和編譯調(diào)試。同時(shí)微信小程序還開放了功能齊全的各種API供開發(fā)者調(diào)用，其中包括位置獲取的API，可以判斷考勤者的考勤位置。
????????硬件部分，本系統(tǒng)只需要安裝有微信APP的手機(jī)（包括但不限于Android、iOS、WP系統(tǒng)）即可運(yùn)行，運(yùn)行過程中需要網(wǎng)絡(luò)連接，我國的通信網(wǎng)絡(luò)信號目前在高校已經(jīng)達(dá)到了全面覆蓋，為本系統(tǒng)的實(shí)現(xiàn)打下了基礎(chǔ)。
3.1.2 經(jīng)濟(jì)可行性
????????開發(fā)過程中無需使用任何收費(fèi)軟件，本系統(tǒng)只需一部普通智能手機(jī)，任何品牌、任何系統(tǒng)都可以，然后在手機(jī)上安裝微信即可，也不需要其他任何設(shè)備輔助。小程序在使用過程中產(chǎn)生的流量費(fèi)用，由運(yùn)營商收取，除此之外不會有其他成本產(chǎn)生。
3.1.3 操作可行性
????????使用該系統(tǒng)只需教師和學(xué)生打開微信小程序即可，并且授予小程序運(yùn)行過程中所需要的權(quán)限即可，填寫相應(yīng)的資料。教師端填寫課程及教室號，學(xué)生端搜索加入即可，下一次無需重復(fù)此步驟，教師端發(fā)起簽到，學(xué)生端進(jìn)入簽到，填寫由教師端告知的校驗(yàn)碼即可簽到，操作便捷，無冗余步驟。教師端可以查看出勤名單，同時(shí)也可以導(dǎo)出考勤名單，便于考核平時(shí)成績。
3.2 系統(tǒng)需求分析
????????需求分析環(huán)節(jié)是系統(tǒng)開發(fā)中的必要環(huán)節(jié)。在該環(huán)節(jié)，通過對本系統(tǒng)的功能需求與非功能需求進(jìn)行分析，來探討本系統(tǒng)需要實(shí)現(xiàn)哪些。
3.2.1 功能需求分析
????????本系統(tǒng)的各項(xiàng)功能，主要是面向當(dāng)前高校的教師和學(xué)生，目的是解決以往課堂中存在的考勤效率低、準(zhǔn)確率低等問題。在本系統(tǒng)中，老師可以使用微信小程序開啟或者關(guān)閉簽到，在簽到結(jié)束后，也可以查看簽到結(jié)果。
????????第一次進(jìn)入小程序后會獲取用戶信息，需要用戶選擇相應(yīng)的角色，選擇角色后由教師端添加教室信息，學(xué)生端可搜索加入教室，進(jìn)入教室后即可開始發(fā)起考勤，第二次進(jìn)入小程序無需重復(fù)加入。老師通過小程序查看和導(dǎo)出學(xué)生的考勤名單。
3.2.2 非功能需求分析
表3-1為本系統(tǒng)的性能需求分析。
表3-1 系統(tǒng)性能需求
| 需求名稱 | 詳細(xì)要求 |
| 可靠性 | 運(yùn)行流暢，處理時(shí)間在可接受范圍內(nèi) |
| 可維護(hù)性 | 易于修改調(diào)試 |
| 可擴(kuò)充性 | 可根據(jù)現(xiàn)實(shí)需求增刪功能模塊 |
| 易用性 | 系統(tǒng)界面友好，有相應(yīng)提示引導(dǎo)，人性化 |
4 系統(tǒng)設(shè)計(jì)
4.1 系統(tǒng)設(shè)計(jì)
本小節(jié)通過流程圖的方式闡述了本系統(tǒng)各項(xiàng)功能的具體設(shè)計(jì)及執(zhí)行流程。
4.1.1 系統(tǒng)功能設(shè)計(jì)
根據(jù)對系統(tǒng)功能的分析和流程設(shè)計(jì)，本系統(tǒng)主要實(shí)現(xiàn)四個(gè)功能，分別是：用戶信息維護(hù)、老師課程管理、學(xué)生課程管理和簽到管理。
????????(1) 用戶信息維護(hù)：主要是通過驗(yàn)證用戶信息來保證系統(tǒng)的安全性，同時(shí)提供查看和編輯用戶信息的功能。
圖4.1 用戶信息維護(hù)
????????(2) 老師課程管理：主要功能為查看課程中學(xué)生的名單以及簽到記錄，同時(shí)也可以對課程信息進(jìn)行增、刪、改、查（CRUD）操作，當(dāng)有學(xué)生申請加入課程時(shí)，老師進(jìn)行學(xué)生信息的審核，決定是否允許學(xué)生加入課程。
圖4.2 老師課程管理
????????(3) 學(xué)生的課程管理：可以查看課程中班級學(xué)生的名單以及簽到記錄，可以對自己的課程進(jìn)行增、刪、改、查。也可以通過搜索課程來申請加入課程。
圖4.3 學(xué)生課程管理
????????(4) 簽到管理：老師可以發(fā)起、查看、搜索、導(dǎo)出簽到的內(nèi)容，對考勤的情況可以有全面的掌握。學(xué)生可以通過口令進(jìn)行簽到、也可以掃描二維碼簽到，在簽到管理中可以查看與搜索簽到。
圖4.4 簽到管理
4.1.2 系統(tǒng)流程
????????系統(tǒng)流程圖如圖4.6所示，用戶可以通過掃描小程序的二維碼或者通過點(diǎn)擊課程群所分享的鏈接進(jìn)入本系統(tǒng)。首次打開會獲取用戶微信id，將用戶微信id發(fā)回?cái)?shù)據(jù)庫查詢，會判斷用戶是否有賬號，如果沒有則會在登陸之后進(jìn)行身份選擇（老師或者學(xué)生）。如果已有賬號會直接使用賬號登陸。在個(gè)人中心可以查看或修改個(gè)人信息，系統(tǒng)會將用戶信息存入后臺數(shù)據(jù)庫。同時(shí)向不同角色的用戶展示不同的界面。
????????進(jìn)入我的課程后，可以選擇導(dǎo)入、搜索和添加或加入課程，教師端可以添加課程信息，學(xué)生端可以搜索申請加入老師已經(jīng)添加的課程，同時(shí)教師端在“我的課程”中還可以修改或刪除課程信息，系統(tǒng)會將用戶修改后的信息存儲到數(shù)據(jù)庫，然后從數(shù)據(jù)庫中重新查詢并展示給相應(yīng)的用戶界面。
????????在“點(diǎn)名簽到”的模塊中，老師可以在當(dāng)前課程下選擇口令點(diǎn)名，后臺在收到請求時(shí)會隨機(jī)生成口令，也可以自行輸入口令，學(xué)生端進(jìn)入簽到后，后臺會獲取學(xué)生設(shè)備與教師設(shè)備之間的距離，判斷學(xué)生是否符合簽到條件，符合簽到的條件且輸入口令正確則簽到成功。同時(shí)教師端也可以將二維碼發(fā)給學(xué)生，學(xué)生端通過簽到頁的“掃一掃”掃碼后簽到成功，如有學(xué)生因網(wǎng)絡(luò)或其他個(gè)人原因漏簽，老師可以發(fā)起補(bǔ)簽，同時(shí)老師也可以查看點(diǎn)名記錄，可以導(dǎo)出簽到名單用于學(xué)生平時(shí)分的考察。學(xué)生端也可以查看自己的簽到記錄。
圖4.5 系統(tǒng)流程圖
4.2 數(shù)據(jù)庫設(shè)計(jì)
????????本系統(tǒng)的數(shù)據(jù)庫使用的是Oracle公司旗下的MySQL，MySQL是當(dāng)前比較流行的關(guān)系型數(shù)據(jù)庫之一。數(shù)據(jù)庫是存儲數(shù)據(jù)的重要部分，數(shù)據(jù)庫表的設(shè)計(jì)將直接影響本系統(tǒng)進(jìn)行數(shù)據(jù)庫中增、刪、改、查操作的速度。本小節(jié)將從概念和邏輯的角度分析本系統(tǒng)中數(shù)據(jù)庫表的設(shè)計(jì)。
4.2.1 概念設(shè)計(jì)
????????本系統(tǒng)中設(shè)計(jì)的數(shù)據(jù)庫主要分為以下九張表，圖4.1為本系統(tǒng)數(shù)據(jù)庫關(guān)系圖，包含了每張表所需的字段。
圖4.6 數(shù)據(jù)庫關(guān)系圖
(1) 用戶信息表
????????包括用戶編號、角色、姓名、學(xué)校、學(xué)/工號以及所屬學(xué)院等信息，用戶的編號用于唯一識別用戶，角色用來區(qū)分師生權(quán)限。
(2) 老師信息表
????????包括老師的賬號ID、創(chuàng)建時(shí)間與修改時(shí)間，賬號ID為主鍵，用于唯一識別老師，關(guān)聯(lián)用戶信息表中的老師ID。
(3) 學(xué)生信息表
????????包括學(xué)生的ID、專業(yè)、年級、班級等信息，ID為主鍵，關(guān)聯(lián)用戶信息表中的學(xué)生ID。
(4) 課程信息表
????????包括課程的編號、授課教師的編號、課程的名稱、課程代碼、上課的時(shí)間和上課的地點(diǎn)等，課程編號為主鍵，用于唯一識別課程。
(5) 考勤信息表
????????包含課程編號、簽到口令、簽到時(shí)的坐標(biāo)（經(jīng)緯度）以及簽到創(chuàng)建的時(shí)間。坐標(biāo)用于判斷考勤者所處位置，判斷是否允許考勤者簽到。
(6) 學(xué)生與課程的中間表
????????包含學(xué)生與課程的ID、創(chuàng)建時(shí)間和更新時(shí)間。
(7) 簽到表
????????包含課程的編號、簽到口令、簽到時(shí)地理位置的經(jīng)緯度以及簽到的創(chuàng)建時(shí)間和更新時(shí)間。
(8) 標(biāo)記表
????????主要用來記錄簽到的編號，以及簽到學(xué)生的ID。
(9) 反饋表
????????用來記錄用戶的反饋信息，包含用戶的ID、反饋的內(nèi)容，以及創(chuàng)建的時(shí)間與更新的時(shí)間。
4.2.2 邏輯設(shè)計(jì)
????????(1) 用戶信息表，用于存儲用戶信息，表名user，如表4-1所示。
表4-1 用戶信息表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| open_id | varchar | 40 | Yes | 微信編號 | |
| role | varchar | 20 | 角色 | ||
| name | varchar | 40 | 姓名 | ||
| school | varchar | 40 | 學(xué)校 | ||
| campus_id | varchar | 40 | 校園賬號 | ||
| department | varchar | 40 | 學(xué)院 | ||
| phone_num | char | 11 | 手機(jī)號 | ||
| | varchar | 40 | | ||
| teacher_id | int | 10 | 老師編號 | ||
| student_id | int | 10 | 學(xué)生編號 | ||
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
????????(2) 課程信息表，用于存儲課程信息，表名course，如表4-2所示。
表4-2 課程信息表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| teacher_id | int | 10 | Yes | 老師編號 | |
| name | varchar | 40 | 課程名稱 | ||
| code | varchar | 20 | 課程代碼 | ||
| time | varchar | 40 | 上課時(shí)間 | ||
| place | varchar | 40 | 上課地點(diǎn) | ||
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
?????????(3) 考勤信息表，表名call，如表4-3所示。
表4-3 考勤信息表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| course_id | int | 10 | 課程編號 | ||
| password | varchar | 20 | Yes | 口令 | |
| latitude | float | Yes | 坐標(biāo)經(jīng)度 | ||
| longitude | float | Yes | 坐標(biāo)緯度 | ||
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
????????(4) 老師表，表名teacher，如表4-4所示。
表4-4 老師表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
????????(5) 學(xué)生表，表名student，如表4-5所示。
表4-5 學(xué)生表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| major | varchar | 40 | 專業(yè) | ||
| grade | varchar | 40 | 年級 | ||
| clazz | varchar | 40 | 班級 | ||
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
????????(6) 標(biāo)記表，表名sign，如表4-6所示。
表4-6 標(biāo)記表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| call_id | int | 10 | 點(diǎn)名編號 | ||
| student_id | int | 10 | 學(xué)生編號 | ||
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
????????(7) 反饋表，表名feedback，如表4-7所示。
表4-7 反饋表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| user_id | int | 10 | 用戶編號 | ||
| content | varchar | 600 | 內(nèi)容 | ||
| create_id | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_id | datetime | 更新時(shí)間 |
????????(8) 學(xué)生與課程的中間表，用于存儲學(xué)生與課程之間的聯(lián)系，表名student_course，如表4-8所示。
表4-8 中間表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| student_id | int | 10 | Yes | 學(xué)生編號 | |
| course_id | int | 10 | Yes | 課程編號 | |
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
????????(9) 課程信息在小程序中應(yīng)用的表，表名course_application，如表4-9所示。
表4-9 課程應(yīng)用表
| Name | Type | Length | Not Null | Key | Comment |
| id | int | 10 | Yes | Yes | 編號 |
| student_id | int | 10 | Yes | 學(xué)生編號 | |
| course_id | int | 10 | Yes | 課程編號 | |
| status | varchar | 20 | Yes | 狀態(tài) | |
| create_time | datetime | Yes | 創(chuàng)建時(shí)間 | ||
| update_time | datetime | 更新時(shí)間 |
5 系統(tǒng)實(shí)現(xiàn)
????????本章在上一章節(jié)的基礎(chǔ)上，對上述功能的實(shí)現(xiàn)方法進(jìn)行了闡述，并以代碼的方式演示了小程序主要功能的邏輯。
5.1 系統(tǒng)前端的實(shí)現(xiàn)
????????微信小程序使用的主要開發(fā)語言是JavaScript，小程序的開發(fā)與普通的WEB開發(fā)非常相似。對于前端的程序員來說，從網(wǎng)頁開發(fā)轉(zhuǎn)移到微信小程序的開發(fā)所需投入的學(xué)習(xí)成本并不高，但是兩者之間還是存在很多區(qū)別的。
????????WEB開發(fā)中渲染線程和腳本線程是相互排斥的，這也是為什么長時(shí)間運(yùn)行腳本可能會導(dǎo)致頁面無響應(yīng)的原因，但是在小程序中，兩者是分開的，渲染線程和腳本線程分別在不同的線程中運(yùn)行[14]。WEB開發(fā)人員可以使用到各種瀏覽器展現(xiàn)出來的DOM(文檔對象模型)API，來選擇和操作DOM。綜上所述，小程序的邏輯層和視圖層是分開的，邏輯層運(yùn)行在 JSCore 中，沒有完整的瀏覽器對象，因此缺少相關(guān)的DOM API和BOM（瀏覽器對象模型）API。這一區(qū)別直接導(dǎo)致了前端的開發(fā)人員需要對一些庫非常了解。前端使用的JQuery、Zepto等在微信小程序中無法使用。同時(shí)JSCore的運(yùn)行環(huán)境同NodeJS的運(yùn)行環(huán)境也不相同，因此部分NPM的包在微信小程序中無法運(yùn)行。
????????WEB開發(fā)人員需要面對多種不同的瀏覽器環(huán)境，PC端需要兼容微軟的IE瀏覽器、谷歌的Chrome、以及Fire Fox、Opera等瀏覽器，在移動端則要兼容蘋果的Safari、谷歌的Chrome以及iOS、安卓系統(tǒng)中五花八門的瀏覽器[15]。但是在小程序的開發(fā)過程中，我們只需面對的兩大操作系統(tǒng)iOS和Android的微信客戶端，除了在用于提高開發(fā)的效率的開發(fā)者工具中，小程序的三種運(yùn)行環(huán)境也是不同的
5.1.1 總體頁面的實(shí)現(xiàn)
????????在開發(fā)微信小程序時(shí)，我們只需要在app.json文件中的pages對象下寫入小程序所需頁面代碼的路徑。系統(tǒng)會自動在pages文件夾中生成我們開發(fā)所需的頁面文件夾。本系統(tǒng)共計(jì)24個(gè)頁面。如圖5.1所示。
首頁：
表5-1 首頁頁面路徑表
| 路徑 | 對應(yīng)頁 |
| pages/index/index | 首頁 |
| pages/index/add/add | 添加頁 |
| pages/index/details/details | 詳情頁 |
| pages/index/chat/chat | 群聊頁 |
| pages/index/apply/apply | 申請頁 |
| pages/index/search/search | 搜索頁 |
| pages/index/import/import | 導(dǎo)入頁 |
| pages/index/students/students | 學(xué)生頁 |
| pages/index/update/update | 修改頁 |
| pages/index/applydetails/applydetails | 申請?jiān)斍轫?/span> |
簽到頁：
表5-2 簽到頁頁面路徑表
| 路徑 | 對應(yīng)頁 |
| pages/sign/sign | 簽到頁主頁 |
| pages/sign/search/search | 搜索頁 |
| pages/sign/record/record | 簽到記錄頁 |
| pages/sign/details/details | 簽到詳情頁 |
| pages/sign/qrcode/qrcode | 二維碼頁 |
| pages/sign/call/call | 點(diǎn)名頁 |
| pages/sign/export/export | 導(dǎo)出頁 |
| pages/sign/list/list | 簽到列表頁 |
“我”：
表5-3 “我”頁面路徑表
| 路徑 | 對應(yīng)頁 |
| pages/me/me | 首頁 |
| pages/me/info/info | 信息頁 |
| pages/me/about/about | 關(guān)于頁 |
| pages/me/settings/settings | 設(shè)置頁 |
| pages/me/bind/bind | 綁定頁 |
| pages/me/feedback/feedback | 反饋頁 |
圖5.1 總體頁面
5.1.2 “我”頁面的實(shí)現(xiàn)
????????如果用戶是第一次使用本系統(tǒng)，則會提示是否允許微信授權(quán)登錄。微信開發(fā)者工具提供了該接口，免去了用戶注冊等流程，使用戶使用更加便捷。其前端核心代碼如下：
<view class="user-info"><view class="user-info-hd"><button wx:if="{{!authorize_wx_user_info}}" open-type="getUserInfo" bindgetuserinfo="getWxUser" class="user-info-authorize">獲取頭像昵稱</button><block wx:else><image class="user-avatar" src="{{user.wx.avatarUrl}}" /><view class="user-title"><text wx:if="{{user.ck.name}}" class="user-name">{{user.ck.name}}</text><text wx:else class="user-name">{{user.wx.nickName}}</text><text wx:if="{{user.ck.campus_id && user.ck.role == 'TEACHER'}}" class="user-id">工號：{{user.ck.campus_id}}</text><text wx:if="{{user.ck.campus_id && user.ck.role == 'STUDENT'}}" class="user-id">學(xué)號：{{user.ck.campus_id}}</text></view><text wx:if="{{user.ck.role == 'TEACHER'}}" class="user-role">老師</text><text wx:if="{{user.ck.role == 'STUDENT'}}" class="user-role">學(xué)生</text></block></view>????????在button被點(diǎn)擊后，系統(tǒng)會執(zhí)行g(shù)etWxUser()函數(shù)來獲取用戶授權(quán)信息，在獲取微信數(shù)據(jù)后會將獲取到的數(shù)據(jù)（微信頭像、昵稱等）顯示到頁面。以下為getWxUser()函數(shù)代碼：
getWxUser: function () {app.getWxUser({callback: res => {this.setData({user: app.user,authorize_wx_user_info: app.authorize_wx_user_info})}})}????????getWxUser()方法調(diào)用了setData方法，setData方法為微信開發(fā)工具提供，用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對應(yīng)的 this.data 的值（同步）。同時(shí)小程序還會查找該微信id在數(shù)據(jù)庫中的數(shù)據(jù)，并將查詢到的數(shù)據(jù)回顯到用戶界面。
效果圖如圖5.2所示：
圖5.2 登錄效果展示
5.1.3 “首頁”頁面的實(shí)現(xiàn)
????????“首頁”的頁面分為上下兩部分，上面部分主要用于顯示“搜索”、“添加”、“申請”和“導(dǎo)入”四個(gè)主要的功能按鈕，點(diǎn)擊按鈕后會通過<navigator></navigator>標(biāo)簽中的url參數(shù)跳轉(zhuǎn)到對應(yīng)的頁面，之后可在跳轉(zhuǎn)后的頁面進(jìn)行需要的操作，通過點(diǎn)擊按鈕來獲取對應(yīng)的功能，按鈕簡潔，界面友好，用戶能夠快速找到相應(yīng)的功能，符合課堂上的使用場景。“首頁”的上部分前端核心代碼如下：
<view class="container"><view class="operations-bar"><view class="operations"><navigator class="oper-item" url="/pages/index/search/search" hover-class="navigator-hover"><image class="oper-icon" src="/images/icon/search.png"></image><text class="oper-text">搜索</text></navigator><navigator class="oper-item" url="/pages/index/add/add" hover-class="navigator-hover"><image class="oper-icon" src="/images/icon/add.png"></image><text class="oper-text">添加</text></navigator><navigator class="oper-item" url="/pages/index/apply/apply" hover-class="navigator-hover"><image class="oper-icon" src="/images/icon/apply.png"></image><text class="oper-text">申請</text></navigator><navigator class="oper-item" url="/pages/index/import/import" hover-class="navigator-hover"><image class="oper-icon" src="/images/icon/import.png"></image><text class="oper-text">導(dǎo)入</text></navigator></view></view>????????“首頁”下面的部分則顯示當(dāng)前用戶已添加的課程，頁面占據(jù)當(dāng)前頁面的60%，使用戶一目了然，更直觀的看到當(dāng)前已添加的課程及對應(yīng)的課程信息。其中如果用戶沒有設(shè)置自己的角色信息，就會引導(dǎo)用戶在設(shè)置中選擇身份。
<view wx:if="{{!user.ck.role}}" class="notice"><navigator class="oper-item" url="/pages/me/settings/settings" hover-class="navigator-hover"><text class="notice-text">請點(diǎn)擊此處選擇您的身份</text></navigator></view>????????如果用戶已經(jīng)設(shè)置身份，則會在本頁面顯示數(shù)據(jù)庫中查詢到的用戶對應(yīng)的課程信息。
<view wx:elif="{{courses.length > 0}}" class="courses"><block wx:for="{{courses}}" wx:key="id"><navigator class="courses-item" url="/pages/index/details/details?id={{item.id}}" hover-class="navigator-hover"><view class="courses-major"><text class="courses-name">{{item.name}}</text><text class="courses-odd">{{user.ck.role == 'TEACHER'? item.code: '授課老師：'+item.teacher.name}}</text></view><view class="courses-minor"><text class="course-room">{{item.place}}</text><text class="course-time">{{item.time}}</text></view></navigator></block></view>????????如果用戶尚未添加課程，則顯示暫無課程的字樣。
<view wx:else class="notice"><text class="notice-text">暫無課程，快去添加吧</text></view>????????以下為“首頁”頁面顯示的效果圖：
圖5.3 首頁效果圖
5.1.4 “簽到”頁面的實(shí)現(xiàn)
????????“簽到”頁面同樣分為上下部分，上面部分為三個(gè)按鈕，根據(jù)當(dāng)前賬號的角色不同，顯示的按鈕不同，如果當(dāng)前賬號的角色是老師，則分別顯示為“搜索”、“點(diǎn)名”和“導(dǎo)出”，如果當(dāng)前賬號的角色為學(xué)生，則分別顯示為“搜索”、“簽到”和“掃一掃”，點(diǎn)擊按鈕即可進(jìn)入對應(yīng)的功能。下面部分則顯示為當(dāng)前賬號課程簽到信息，簽到功能為本系統(tǒng)的主要功能。以下為“簽到”功能主頁面的實(shí)現(xiàn)代碼：
<view class="operations-bar"><view class="operations"><navigator class="oper-item" url="/pages/sign/search/search" hover-class="navigator-hover"><image class="oper-icon" src="/images/icon/search.png"></image><text class="oper-text">搜索</text></navigator><block wx:if="{{user.ck.role == 'TEACHER'}}"><navigator class="oper-item" url="/pages/sign/call/call" hover-class="navigator-hover"><image class="oper-icon" src="/images/icon/check.png"></image><text class="oper-text">點(diǎn)名</text></navigator><view class="oper-item" url="/pages/sign/export/export" hover-class="navigator-hover" bindtap="exportToExcel"><image class="oper-icon" src="/images/icon/export.png"></image><text class="oper-text">導(dǎo)出</text></view></block><block wx:else><navigator class="oper-item" url="/pages/sign/call/call" hover-class="navigator-hover"><image class="oper-icon" src="/images/icon/check.png"></image><text class="oper-text">簽到</text></navigator><view class="oper-item" hover-class="navigator-hover" bindtap="scanCode"><image class="oper-icon" src="/images/icon/scan.png"></image><text class="oper-text">掃一掃</text></view></block></view></view>????????當(dāng)老師的角色進(jìn)入“點(diǎn)名”功能后，系統(tǒng)會發(fā)起獲取地理位置，在得到用戶授權(quán)后，將地理位置信息存入數(shù)據(jù)庫，以便當(dāng)學(xué)生進(jìn)入“簽到”后與學(xué)生端的位置進(jìn)行比對。隨后進(jìn)入“簽到”發(fā)起頁面，老師可以根據(jù)自己已有的課程選擇課程，簽到口令為隨機(jī)生成，也可手動輸入。以下為該頁面獲取地理位置的核心代碼：
getLocation: function (content) {for (var i = 0; i < 3; i++) {wx.getLocation({success: res => {if (res.latitude != 0 || res.longitude != 0) {this.setData({latitude: res.latitude,longitude: res.longitude})return}}})}}????????如過獲取用戶位置信息失敗，則執(zhí)行以下代碼：
if (this.data.latitude == 0 && this.data.longitude == 0) {wx.getLocation({success: res => {if (res.latitude != 0 || res.longitude != 0) {this.setData({latitude: res.latitude,longitude: res.longitude})this.submitCall()} else {wx.showToast({title: "獲取位置信息失敗，請稍后再試",icon: "none"})}},fail: function () {wx.showToast({title: "獲取位置信息失敗，請稍后再試",icon: "none"})}})} else {this.submitCall()}????????在簽到成功后，系統(tǒng)會將學(xué)生的簽到結(jié)果存入數(shù)據(jù)庫，教師端可以在“簽到”頁面點(diǎn)擊簽到課程查看考勤結(jié)果，也可以通過“導(dǎo)出”功能來導(dǎo)出簽到數(shù)據(jù)，以便記錄學(xué)生的平時(shí)分。以下為簽到頁效果展示圖。
圖5.4 簽到頁效果圖
5.2 系統(tǒng)邏輯層的實(shí)現(xiàn)
????????小程序的邏輯層開發(fā)與WEB的邏輯層開發(fā)基本相同，均可使用主流的Spring框架進(jìn)行開發(fā)，簡化開發(fā)過程。Spring框架是Java企業(yè)級開發(fā)的輕量級開源免費(fèi)的框架。它是以IOC（Inversion Of Control? 控制反轉(zhuǎn)）、和AOP（Aspect Oriented Programming? 面向切面編程）為核心；提供了表現(xiàn)層Spring MVC和持久層Spring JDBC(JDBC Template)，以及業(yè)務(wù)層的事務(wù)管理等企業(yè)級應(yīng)用解決方法[16]；除此之外，Spring還可以集成開源框架中許多優(yōu)秀的第三方框架，它已經(jīng)越來越成為流行的J2EE企業(yè)級應(yīng)用框架。
本系統(tǒng)的邏輯層即采用Spring框架進(jìn)行開發(fā)，以下為本系統(tǒng)邏輯層代碼結(jié)構(gòu)目錄：
圖5.5 代碼結(jié)構(gòu)圖
5.2.1 系統(tǒng)登錄功能的實(shí)現(xiàn)
????????邏輯層在收到前端發(fā)來的登錄請求后，會收到含有用戶登錄校驗(yàn)憑證（code）、小程序編號（AppId）和小程序密鑰（AppSecret），系統(tǒng)會將信息發(fā)到微信官方提供的校驗(yàn)鏈接（LoginUrl），微信會響應(yīng)回openid，在進(jìn)行校驗(yàn)之后會返回響應(yīng)口令（Token）。以下為登錄功能主要邏輯代碼：
@Overridepublic Token login(String code) {String url = StringUtil.formatString(wxProperties.getLoginUrl(),wxProperties.getAppId(),wxProperties.getAppSecret(),code);JsonNode respBody = restUtil.get(url);JsonNode openIdNode = respBody.get("openid");if (openIdNode == null) {log.info("登錄失敗：" + respBody.toString());throw new ParamValidException("code", "code校驗(yàn)失敗");}String openId = openIdNode.asText();User user = userMapper.getByOpenId(openId);if (user == null) {user = new User();user.setOpenId(openId);DaoUtil.checkSingleRecordAccess(userMapper.insert(user));}return new Token(jwtUtil.generateToken(user));}5.2.2 簽到功能的實(shí)現(xiàn)
????????簽到功能分為兩部分，一是老師發(fā)起簽到，二是學(xué)生進(jìn)行簽到，系統(tǒng)會根據(jù)發(fā)起請求的角色來獲取對應(yīng)的簽到視圖。在老師發(fā)起簽到后，系統(tǒng)會記錄老師的課程信息（course）、簽到口令（password）、以及老師所在的地理位置的經(jīng)緯度（longitude & latitud），用于判斷學(xué)生端的簽到狀態(tài)。如果是學(xué)生則無權(quán)發(fā)起簽到，直接記錄以上四條信息用于簽到。在考勤結(jié)束之后，系統(tǒng)會將考勤信息存儲到數(shù)據(jù)庫。以下為簽到功能實(shí)現(xiàn)代碼：
@Overridepublic Call create(CallRequest request, User user) {checkTeacherRole(user);Course course = courseMapper.getById(request.getCourseId());if (course == null) {throw new ParamValidException("courseId", "課程不存在或被刪除");} else if (!course.getTeacher().getId().equals(user.getTeacher().getId())) {throw new ParamValidException("courseId", "無權(quán)限為該課程發(fā)起點(diǎn)名");}Call call = new Call();call.setCourse(course);call.setPassword(request.getPassword());call.setLatitude(request.getLatitude());call.setLongitude(request.getLongitude());DaoUtil.checkSingleRecordAccess(callMapper.insert(call));return call;}5.2.3 導(dǎo)出功能的實(shí)現(xiàn)
????????老師可以導(dǎo)出簽到信息為Excel表格，在收到前端發(fā)來的導(dǎo)出請求之后，系統(tǒng)會執(zhí)行exportToExcel()方法，方法中會判斷當(dāng)前課程是否有簽到數(shù)據(jù)，如果沒有簽到數(shù)據(jù)（if(courses.size()==0)）則無法導(dǎo)出數(shù)據(jù)，如果有則調(diào)用PoiUtil中的generateExcel(courses)方法，傳入?yún)?shù)courses。generateExcel(courses)方法中調(diào)用了Apache軟件基金會開發(fā)的Apache POI，其中提供了XSSFWorkbook()方法，使得我們可以對office文檔進(jìn)行操作。只需對Excel中的行列進(jìn)行操作即可實(shí)現(xiàn)，最后通過ByteArrayOutputStream()將準(zhǔn)備好的數(shù)據(jù)輸出為Excel。
5.3 系統(tǒng)測試
????????系統(tǒng)測試是以軟件開發(fā)各個(gè)階段的功能及其內(nèi)部的代碼結(jié)構(gòu)設(shè)計(jì)的測試，會使用一些測試賬號輸入一些測試數(shù)據(jù)，查看是否能夠達(dá)到預(yù)期的目的，還會使用這些測試賬號在程序運(yùn)行的過程中輸入一些非法數(shù)據(jù)，來及時(shí)發(fā)現(xiàn)程序運(yùn)行過程中可能會產(chǎn)生的錯(cuò)誤，通過軟件測試這一環(huán)節(jié)，找出預(yù)期效果和實(shí)際效果的差異，以及系統(tǒng)存在的bug，以此來評估軟件是否滿足設(shè)計(jì)的需求。
5.3.1 系統(tǒng)功能測試
(1) 登錄模塊測試
表5-4 注冊登錄模塊測試表
| 序號 | 測試內(nèi)容 | 用例數(shù)量 | 測試結(jié)果 |
| 1 | 能否成功拉起微信授權(quán)登陸 | 15 | 通過 |
| 2 | 選擇學(xué)生或教師身份，查看能否正確進(jìn)入對應(yīng)身份流程 | 15 | 通過 |
| 3 | 能否成功進(jìn)入角色對應(yīng)的界面 | 15 | 通過 |
(2) 前后端交互請求測試
表5-5 前后端交互請求測試
| 序號 | 測試內(nèi)容 | 用例數(shù)量 | 測試結(jié)果 |
| 1 | 系統(tǒng)頁面加載時(shí)能否獲取交互token并在控制窗口輸出 | 15 | 通過 |
| 2 | 從交互窗口中獲取輸入的數(shù)據(jù)，查看數(shù)據(jù)能否存儲入后臺數(shù)據(jù)庫 | 15 | 通過 |
| 3 | 能否能從后臺數(shù)據(jù)庫正確獲取數(shù)據(jù) | 15 | 通過 |
(3) 地理位置測試
表5-6 地理位置測試
| 序號 | 測試內(nèi)容 | 用例數(shù)量 | 測試結(jié)果 |
| 1 | 地理位置獲取能否正常被拉起 | 15 | 通過 |
| 2 | 地理位置信息精確度是否足夠 | 15 | 通過 |
| 3 | 學(xué)生端與教師端地理位置判斷是否準(zhǔn)確 | 15 | 通過 |
(4) 首頁功能測試
表5-7 首頁功能測試
| 序號 | 測試內(nèi)容 | 用例數(shù)量 | 測試結(jié)果 |
| 1 | 教師端能否創(chuàng)建課程信息 | 10 | 通過 |
| 2 | 學(xué)生端能否成功搜索課程 | 10 | 通過 |
| 3 | 學(xué)生端能否順利進(jìn)行申請加入課程操作 | 10 | 通過 |
| 4 | 教師端是否能夠收到學(xué)生的申請 | 10 | 通過 |
(5) 課程信息測試
表5-8課程信息測試
| 序號 | 測試內(nèi)容 | 用例數(shù)量 | 測試結(jié)果 |
| 1 | 教師端能否創(chuàng)建課程信息 | 10 | 通過 |
| 2 | 學(xué)生端能否創(chuàng)建課程信息 | 10 | 通過 |
| 3 | 學(xué)生端能否查看課程信息 | 10 | 通過 |
| 4 | 教師端是否能修改課程信息 | 10 | 通過 |
| 5 | 課程信息能否正常進(jìn)行數(shù)據(jù)庫操作 | 10 | 通過 |
(6) 簽到功能測試
表5-9 簽到功能測試
| 序號 | 測試內(nèi)容 | 用例數(shù)量 | 測試結(jié)果 |
| 1 | 未設(shè)置角色信息是否拒絕考勤操作 | 10 | 通過 |
| 2 | 點(diǎn)擊簽到按鈕能否在數(shù)據(jù)庫建立數(shù)據(jù) | 10 | 通過 |
| 3 | 能否隨機(jī)生成簽到口令 | 10 | 通過 |
| 4 | 口令用時(shí)能否進(jìn)行簽到 | 10 | 通過 |
| 5 | 是否可以成功顯示簽到信息 | 10 | 通過 |
| 6 | 能否查看簽到歷史信息 | 10 | 通過 |
| 7 | 能否成功導(dǎo)出考勤表為Excel | 10 | 通過 |
5.3.2 系統(tǒng)界面及窗體測試
系統(tǒng)界面及窗體測試
表5-10 系統(tǒng)界面測試
| 序號 | 測試內(nèi)容 | 測試方法 | 用例數(shù)量 | 測試結(jié)果 |
| 1 | 界面中是否存在錯(cuò)別字 | 手動測試 | 5 | 通過 |
| 2 | 界面中是否有多余控件 | 手動測試 | 5 | 通過 |
| 3 | 界面字體、大小、顏色是否一致 | 手動測試 | 5 | 通過 |
| 4 | 各種提示是否正確、明了 | 手動測試 | 5 | 通過 |
6 結(jié) ??論
????????本文完成了對該系統(tǒng)的開發(fā)，通過基于微信小程序并結(jié)合地理位置信息的方式，實(shí)現(xiàn)了課堂考勤系統(tǒng)。與傳統(tǒng)的課堂點(diǎn)名的方式相比，本系統(tǒng)可以帶來更加準(zhǔn)確的課堂考勤，而且比傳統(tǒng)的考勤當(dāng)時(shí)效率高出許多。在未來的課堂考勤系統(tǒng)開發(fā)中，可以在本系統(tǒng)的基礎(chǔ)上進(jìn)行優(yōu)化、拓展，從而解決未來可能出現(xiàn)的高校日常考勤中產(chǎn)生的其他問題。
本文涉及的工作主要包括以下幾個(gè)方面。
????????(1) 系統(tǒng)注冊與登錄模塊?
????????本系統(tǒng)需要獲取用戶授權(quán)，可以直接使用微信賬戶登錄，根據(jù)學(xué)生和教師的身份不同分別設(shè)置了不同的權(quán)限，必須選擇身份才可以進(jìn)行后續(xù)使用。在選擇身份之后不可更改。
????????(2) 首頁模塊
????????該模塊展示了用戶的課程信息，在本模塊可以進(jìn)行一些考勤所需的準(zhǔn)備操作，比如添加或搜索課程等。
????????(3) 地理位置定位簽到模塊
????????該模塊主要是當(dāng)老師發(fā)起簽到后，根據(jù)老師發(fā)起簽到的地理位置信息與學(xué)生簽到的位置信息的比對，從而確定是否允許學(xué)生簽到成功。學(xué)生也可以通過掃描老師提供的簽到二維碼來簽到，該功能不允許學(xué)生從本地相冊選擇二維碼，一定程度上保證了簽到數(shù)據(jù)的安全性。
????????(4) 考勤管理模塊
????????本模塊是面向教師進(jìn)行考勤管理的各項(xiàng)功能的實(shí)現(xiàn)。教師端可以查看簽到數(shù)據(jù)，也可以使用導(dǎo)出功能導(dǎo)出學(xué)生的簽到數(shù)據(jù)，以便進(jìn)行后期的教學(xué)管理。
????????本系統(tǒng)的主要特點(diǎn)是將地理位置信息與考勤相結(jié)合，利用了互聯(lián)網(wǎng)+的思維方式，充分使用智能手機(jī)硬件和微信的小程序功能，保證學(xué)生在教室且是本人簽到，既節(jié)省了考勤的時(shí)間，又提高了課堂考勤的準(zhǔn)確性。并且基于微信的小程序平臺，使用用戶的微信id作為識別更加高效，無需考慮不同手機(jī)操作系統(tǒng)的適配問題，可以方便地被打開使用，并且無需安裝操作，用完即走，節(jié)省系統(tǒng)空間，網(wǎng)絡(luò)則使用HTTPS和SSL加密傳輸，系統(tǒng)擁有更高的安全性。
? 參考文獻(xiàn)
[1] 李鐘石，蔡珉官．“互聯(lián)網(wǎng)+”環(huán)境下高校課堂的快速簽到應(yīng)用研究[J]．延邊大學(xué)學(xué)報(bào)(社會科學(xué)版)，2019，5(02)：83-90．
[2] 李湘勤，黃晨華，門戈陽．微信考勤管理系統(tǒng)在高校課堂中的應(yīng)用——以韶關(guān)學(xué)院為例[J]．教育教學(xué)論壇，2018，37(17)：8-11．
[3] 楊永平，曾藝，劉世興．基于WIFI的高校課堂考勤系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)[J]．信息技術(shù)與信息化，2017，11(Z1)：102-10．
[4] 彭毅弘．基于iBeacon定位技術(shù)的高校考勤系統(tǒng)設(shè)計(jì)[J]．福建電腦，2018，34(11)：36-37．
[5] CSDN，課堂考勤系統(tǒng)的實(shí)現(xiàn)[EB/OL]．https://blog.csdn.net/m0_37786859/article/details/105163008，2020-03-25．
[6] 吳海龍，柏正堯，武文強(qiáng)．基于STM32和C#的學(xué)生考勤系統(tǒng)設(shè)計(jì)[J]．國外電子測量技術(shù)，2017，36(12)：113-116．
[7] 方冠男．基于視頻流人臉識別的課堂考勤系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]．湖北：華中師范大學(xué)，2018．
[8] 葛偲涵，劉毅，陳健．BLE技術(shù)在智能公寓門鎖微信小程序中的開發(fā)與實(shí)現(xiàn)[J]．工業(yè)控制計(jì)算機(jī)，2018，31(06)：112-113．
[9] 騰訊公司．2018微信數(shù)據(jù)報(bào)告[EB/OL]．https://support.weixin.qq.com/cgi-bin/mmsupport-bin/getopendays，2019-01-10．
[10] 莊鵬．課堂考勤技術(shù)的發(fā)展歷史與未來趨勢研究[J]．福建電腦，2019，35(2)：98-100．
[11] 張小龍．微信小程序入口在哪？有什么用？[J]．計(jì)算機(jī)與網(wǎng)絡(luò)，2017，1(4)：50-51．
[12] 蔡海群．微信小程序界面生成的方法及裝置[P]．中國專利：CN109710258A，2019-05-03．
[13] 錢康．對HTTPS加密通信技術(shù)的信息安全監(jiān)管研究[J]．電信技術(shù)，2018，19(7)：25-27．
[14] 騰訊公司．微信開發(fā)文檔[EB/OL]．https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart，2018-04-12．
[15] W3SCHOOL．微信小程序開發(fā)教程手冊文檔[EB/OL]．https://www.w3cschool.cn/weixinapp/weixinapp-ft5738rb.html，2020-10-20．
[16] 薛云蘭，鄭海鋒，黃嘉浩．基于Spring Boot框架的網(wǎng)絡(luò)教學(xué)管理系統(tǒng)[J]．軟件導(dǎo)刊，2020，19(9)：146-151．
總結(jié)
以上是生活随笔為你收集整理的基于微信小程序的课堂考勤系统设计与实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 智能电动汽车充电桩去除安全隐患提高充电效
- 下一篇： windows7安装ffmpeg教程