課堂考勤系統(tǒng)設(shè)計(jì)

PAGE20第1章緒論課題開發(fā)背景研究表明國(guó)內(nèi)大部分學(xué)校還是停留在人工課堂考勤方法中，這種方法繁瑣易錯(cuò)，不方便管理，后期統(tǒng)計(jì)費(fèi)時(shí)費(fèi)力，準(zhǔn)確度、透明度、實(shí)時(shí)性差，很大程度上會(huì)受到人為因素的影響，由于教師教學(xué)時(shí)間有限，不可能每節(jié)課都點(diǎn)名查驗(yàn)，大幅度的增加了學(xué)生代簽、代答以及僥幸的心理，導(dǎo)致信息統(tǒng)計(jì)不完全，和實(shí)際情況有偏差等問題，后期統(tǒng)計(jì)時(shí)更是繁瑣，費(fèi)時(shí)費(fèi)力。當(dāng)今技術(shù)信息化已經(jīng)是一種潮流，信息技術(shù)革命的發(fā)展已經(jīng)促使工業(yè)資本經(jīng)濟(jì)向信息經(jīng)濟(jì)和知識(shí)經(jīng)濟(jì)的轉(zhuǎn)變，而利用計(jì)算機(jī)技術(shù)，通訊技術(shù)等現(xiàn)代化的技術(shù)手段來促進(jìn)學(xué)校走進(jìn)現(xiàn)代化建設(shè)與新型時(shí)代化管理，已經(jīng)是學(xué)校當(dāng)下的緊急任務(wù)。隨著技術(shù)的發(fā)展，課堂考勤系統(tǒng)已經(jīng)是體現(xiàn)學(xué)術(shù)界發(fā)展性的重要一部分?，F(xiàn)在學(xué)校的考勤技術(shù)和方法難以保持?jǐn)?shù)據(jù)的準(zhǔn)確性和實(shí)時(shí)性。然而，在國(guó)內(nèi)出現(xiàn)和使用超過十年的考勤系統(tǒng)，不得不說是科技的進(jìn)步，技術(shù)的變化。例如從條形碼、接觸式IC卡、非接觸IC卡到指紋識(shí)別再到人臉識(shí)別等技術(shù)，這不得不說是科技的快速進(jìn)步。技術(shù)的開速發(fā)展，引起社會(huì)深刻的變化，信息時(shí)代的到來，我們學(xué)校管理改革的迫切要求，因此，在這種狀況下，考勤系統(tǒng)正在越來越受歡迎，這給教師帶來了更有效的方法，數(shù)據(jù)也更加實(shí)時(shí)?，F(xiàn)有高校已經(jīng)在使用考勤技術(shù)，IC卡、指紋打卡和人臉識(shí)別是現(xiàn)在應(yīng)用最廣泛的技術(shù)，也是現(xiàn)如今公司內(nèi)部對(duì)人員管理的有效措施，課堂考勤系統(tǒng)不得不說是很大程度上打擊了學(xué)生作弊的心理，更加有利于學(xué)校的管理，也促進(jìn)了學(xué)生學(xué)習(xí)的效率。如今網(wǎng)絡(luò)已經(jīng)成為信息傳播和交流的重要手段，網(wǎng)絡(luò)考勤與傳統(tǒng)考勤相比具有很大的優(yōu)點(diǎn)，每個(gè)開發(fā)者都有針對(duì)性的設(shè)計(jì)與開發(fā)，都有自己的目標(biāo)和實(shí)現(xiàn)，如何建立一個(gè)完善全面的考勤系統(tǒng)，是我們研究發(fā)展的方向。然而我認(rèn)為無(wú)論是IC卡、人臉識(shí)別還是指紋識(shí)別都需要借助硬件設(shè)備，都一定程度的增加了成本，而人臉識(shí)別和指紋打卡不僅需要硬件的支持，更是增加了信息錄入的工作量，當(dāng)然它們的也各有優(yōu)勢(shì)IC卡方便快捷不用采納信息，學(xué)校學(xué)生信息都有錄入按人制作就好，指紋技術(shù)和人臉識(shí)別更是徹底的防范了作弊的可能。但是綜合來看，我想用地理定位來實(shí)現(xiàn)打卡，這樣更加方便快捷，只要打開定位，點(diǎn)擊打卡，獲取的位置滿足距離的條件就可以成功，學(xué)生可以完成簽到、請(qǐng)假等功能，教師可以登錄管理、錄入信息等。計(jì)算機(jī)應(yīng)用在管理中逐漸普及，利用計(jì)算機(jī)實(shí)現(xiàn)同學(xué)的考勤狀況勢(shì)在必行。1.2課題研究意義和目的在21世紀(jì)這個(gè)信息化的時(shí)代，考勤管理系統(tǒng)也有了很大的發(fā)展。但是市面上大多數(shù)的考勤系統(tǒng)都是針對(duì)公司上下班打卡的，例如有些需要依靠硬件支持的系統(tǒng)，比如說一些指紋識(shí)別、臉部識(shí)別、IC卡等。沒有完善的系統(tǒng)來針對(duì)課堂。雖然各個(gè)高校也逐漸引進(jìn)網(wǎng)絡(luò)化管理，例如公眾號(hào)來查詢成績(jī)、在線考試、發(fā)布就業(yè)招聘信息等，但是校園課堂考勤還是保持著課堂點(diǎn)名，教師手動(dòng)記錄的方式，這樣既不環(huán)保又占用時(shí)間，又不能有效的防止學(xué)生代簽到、替答到等現(xiàn)象，到期末核實(shí)成績(jī)的時(shí)候耗時(shí)耗力，開發(fā)考勤系統(tǒng)可以有效的解決這些實(shí)際問題。它可以做到讓學(xué)校方便管理，教師可以實(shí)時(shí)有效的看到學(xué)生出勤、請(qǐng)假、曠課的情況，可以方便了解每個(gè)同學(xué)學(xué)習(xí)狀態(tài)的情況，做出有效的措施，對(duì)于同學(xué)來說，可以查看自己課程的打卡記錄，估算成績(jī)。在科技發(fā)展迅速的時(shí)代，計(jì)算機(jī)網(wǎng)絡(luò)考勤已經(jīng)是大勢(shì)所趨，計(jì)算機(jī)擁有檢索迅速、儲(chǔ)存空間大、方便管理、可靠性高、信息傳達(dá)方便、壽命長(zhǎng)、成本低等優(yōu)點(diǎn)，因此開放這樣一個(gè)考勤系統(tǒng)非常有必要。1.3課題開發(fā)環(huán)境操作系統(tǒng)：Windows10；開發(fā)環(huán)境：JDK1.8.0-31；開發(fā)工具：IntelliJIDEA；數(shù)據(jù)庫(kù)：MySQL5.7；發(fā)布程序：Tomcat8.0.39；1.4課題主要研究?jī)?nèi)容本次選題課堂考勤系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)，主要分為三大角色，分別是學(xué)生、教師和管理員。在技術(shù)上，前端使用VUE+Jquery框架，運(yùn)用百度地圖獲取用戶坐標(biāo)焦點(diǎn)，判斷用戶和目標(biāo)的距離。后端使用JFinal框架連接MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)數(shù)據(jù)的記錄。項(xiàng)目部署方面使用Tomcat部署項(xiàng)目。將用HBuilder+IDEA作為開發(fā)工具，來完成一個(gè)由登錄、打卡、統(tǒng)計(jì)、請(qǐng)假、審批五大模塊組成的課堂考勤系統(tǒng)，在這些模塊的實(shí)現(xiàn)中，力求系統(tǒng)的全面性、通用性。(1)登錄登錄模塊主要包括學(xué)生和教師根據(jù)學(xué)號(hào)和工號(hào)登錄，提供初始密碼，可以自行更改，管理員特有的賬號(hào)密碼。用戶名密碼必須填寫，否則會(huì)出現(xiàn)提示。(2)打卡打卡模塊主要利用百度地圖，來獲取用戶所在的位置來和目標(biāo)位置進(jìn)行對(duì)比，顯示打卡成功或者失敗。(3)統(tǒng)計(jì)統(tǒng)計(jì)模塊主要是統(tǒng)計(jì)學(xué)生每個(gè)課程出勤情況，給出具體數(shù)字，方便觀看，使數(shù)據(jù)一目了然。教師會(huì)看到自己的課，每個(gè)班級(jí)多少學(xué)生曠課，每個(gè)學(xué)生在本節(jié)課曠過多少次課。(4)請(qǐng)假請(qǐng)假模塊主要是為了同學(xué)們有緊急時(shí)間或者生病不能去上課需要請(qǐng)假而服務(wù)的，這樣有實(shí)際的數(shù)據(jù)記錄著方便以后查看。(5)審批審批模塊主要是教師對(duì)同學(xué)請(qǐng)假給予通過或者駁回。學(xué)生綜合自身情況可以向教師發(fā)送請(qǐng)假信息，說明情況。教師看到學(xué)生的請(qǐng)假請(qǐng)求綜合考量給予批準(zhǔn)或不通過。請(qǐng)假成功的同學(xué)會(huì)有特殊標(biāo)記。

第2章系統(tǒng)需求分析2.1系統(tǒng)目標(biāo)本系統(tǒng)產(chǎn)生的目的是為了解決課堂考勤繁瑣和不能有效防止學(xué)生替答到等問題，其主要使用場(chǎng)景可以簡(jiǎn)單的概括為：管理員在系統(tǒng)中錄入一天的上課時(shí)間，教師把自己的課程添加到自己的賬戶下，學(xué)生在上課時(shí)間內(nèi)通過程序進(jìn)行打卡，系統(tǒng)自動(dòng)保存學(xué)生打卡記錄，教師就可以查看學(xué)生的打卡情況。本系統(tǒng)要完成的目標(biāo)功能如下：(1)管理員可以對(duì)用戶、校區(qū)、系別、教師、課程時(shí)間進(jìn)行相關(guān)的操作。(2)教師可以對(duì)年級(jí)、專業(yè)、學(xué)生、課程的名稱、請(qǐng)假的審批、請(qǐng)假統(tǒng)計(jì)進(jìn)行相關(guān)的操作。(3)學(xué)生可以進(jìn)行上課打卡和查看自己打卡記錄等相關(guān)操作。2.2可行性分析和總體設(shè)計(jì)原則2.2.1可行性分析在進(jìn)行充分的調(diào)研后進(jìn)入可行性分析階段，在大背景（校園）的前提下從技術(shù)、管理、操作、監(jiān)控方面進(jìn)行分析。(1)技術(shù)可行性該系統(tǒng)是基于B/S架構(gòu)實(shí)現(xiàn)，使用JFinal+MySQl+VUE+JQuery+H5實(shí)現(xiàn)，所有用戶只需要使用瀏覽器訪問指定的網(wǎng)址即可訪問本系統(tǒng)。JFinal是近幾年比較火熱的國(guó)產(chǎn)輕量級(jí)急速開發(fā)框架，其摒棄了Spring復(fù)雜而繁瑣的XML配置，使用程序員更容易接受的“插件”方式配置自己的信息，JFinal作者提倡的“習(xí)慣優(yōu)于配置”與近幾年國(guó)際流行的SpringBoot的開發(fā)理念不謀而合，而JFinal似乎更注重急速開發(fā)，所以在很多技術(shù)設(shè)計(jì)上給出了更加簡(jiǎn)潔優(yōu)雅的做法，拿AOP來舉例，傳統(tǒng)AOP實(shí)現(xiàn)需要引入大量繁雜而多余的概念。傳統(tǒng)意義上的AOP不但學(xué)習(xí)成本是非常高的，開發(fā)的效率也很低，技術(shù)人員開發(fā)的體驗(yàn)也差，而且還影響系統(tǒng)性能，尤其是在開發(fā)階段造成項(xiàng)目啟動(dòng)緩慢，極大影響開發(fā)效率。JFinal采用極速化的AOP設(shè)計(jì)，專注AOP最核心的目標(biāo)，將概念減少到極致，僅有三個(gè)概念：Interceptor、Before、Clear，并且無(wú)需引入IOC也無(wú)需使用啰嗦的XML。不僅如此，在數(shù)據(jù)庫(kù)操作上，JFinal也提供了更加簡(jiǎn)潔切優(yōu)雅的做法，ActiveRecord是JFinal最核心的組成部分之一，通過ActiveRecord來操作數(shù)據(jù)庫(kù)，將極大地減少代碼量，極大地提升開發(fā)效率，其獨(dú)創(chuàng)的DB+Record也使得開發(fā)人員操作數(shù)據(jù)庫(kù)有了更加良好的體驗(yàn)，如其提供的Db.find（sql）、Db.findById(tableName,id)等也極大的縮短了程序編寫的時(shí)間。VUE是現(xiàn)在公司使用最多的一種前端技術(shù)，VUE屬于MVVM框架，是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。VUE技術(shù)我認(rèn)為最強(qiáng)大的地方在于數(shù)據(jù)的雙向綁定，還有用戶只需要關(guān)注視圖層不用在進(jìn)行繁瑣的DOM操作，這兩點(diǎn)大大的方便了技術(shù)人員的使用和理解，這也是越來越多前端技術(shù)人員選擇它的原因。在VUE技術(shù)之前，如果前端工程師需要操作頁(yè)面中的內(nèi)容，就不得不適用類似于JQuery之類的JS庫(kù)，需要頻繁的操作DOM,而VUE的出現(xiàn)使得前端工程師不關(guān)注前端頁(yè)面的顯示而只關(guān)心業(yè)務(wù)邏輯成為了可能。因此在技術(shù)方面，當(dāng)前系統(tǒng)的設(shè)想是可行的。(2)管理可行性本系統(tǒng)主要解決的是學(xué)生打卡的監(jiān)控問題，在當(dāng)前問題背景下最好有一套簡(jiǎn)單的或者成熟的管理辦法來讓我們參考以編寫適合的程序，而當(dāng)前需求的背景下就有一套簡(jiǎn)單的管理辦法來參考。因此在管理方面，當(dāng)前系統(tǒng)的設(shè)想是可行的。(3)操作可行性在當(dāng)前需求的背景下我們沒有發(fā)現(xiàn)比較復(fù)雜的操作，因此并不需要復(fù)雜的界面來支撐用戶操作，其主要的打卡界面在程序設(shè)計(jì)完善的前提下更是一個(gè)相對(duì)簡(jiǎn)單的頁(yè)面，任何人都可以輕松操作，對(duì)于管理平臺(tái)來說，后臺(tái)需要的功能也都是普通CRUD操作。因此在管理方面，當(dāng)前系統(tǒng)的設(shè)想是可行的。(4)監(jiān)控可行性監(jiān)控的主要目的是監(jiān)控學(xué)生的打卡情況，因此需要通過將學(xué)生打卡信息記錄到數(shù)據(jù)庫(kù)，然后通過網(wǎng)頁(yè)顯示在瀏覽器上就可以清晰的顯示出學(xué)生打卡信息，并且可以通過各種條件篩選想要查看的信息。因此在監(jiān)控方面，當(dāng)前系統(tǒng)的設(shè)想是可行的。2.2.2總體設(shè)計(jì)原則通過分析項(xiàng)目需求，在實(shí)現(xiàn)項(xiàng)目的基礎(chǔ)上要滿足以下幾點(diǎn)要：(1)規(guī)范網(wǎng)頁(yè)布局，使得功能明確，在有一套管理網(wǎng)頁(yè)的模板后直接使用模板開發(fā)之后的需求，這樣不僅可以提升開發(fā)效率，也便于用戶對(duì)系統(tǒng)的理解，減少用戶的誤操作。(2)設(shè)計(jì)數(shù)據(jù)庫(kù)時(shí)使用建模工具建模分析可行性，減少數(shù)據(jù)的冗余和耦合，避免重復(fù)數(shù)據(jù)，提高系統(tǒng)的使用效率。(3)系統(tǒng)穩(wěn)定性好，健壯。能夠很好的保存所存入的信息，統(tǒng)計(jì)時(shí)不會(huì)出錯(cuò)。(4)界面設(shè)計(jì)簡(jiǎn)單直接，大方美觀，充分考錄與用戶的交互，方便用戶理解和操作。2.3用例分析2.3.1管理員用例分析管理員的主要職責(zé)就是保證數(shù)據(jù)的正確性來讓系統(tǒng)正常運(yùn)行，其管理的內(nèi)容也相對(duì)比較宏觀，可以操作用戶、校區(qū)、系別、教師、課程時(shí)間的信息，以此保證系統(tǒng)數(shù)據(jù)的正常，讓系統(tǒng)正常運(yùn)行，可以執(zhí)行的功能的具體分析如下面3.1的用例圖分析所示。圖2.1管理員用例圖表2.1用戶管理描述用例名稱用戶管理參與者管理員描述管理員根據(jù)實(shí)際的需要添加用戶前置條件管理員成功登錄系統(tǒng)后置條件錄入的用戶能在對(duì)應(yīng)的權(quán)限下使用系統(tǒng)主要過程1、管理員輸入用戶名和密碼，成功的登錄系統(tǒng)。2、根據(jù)需要添加用戶名的賬號(hào)、姓名、手機(jī)號(hào)碼和權(quán)限。3、最終成功添加用戶。表2.2校區(qū)管理描述用例名稱校區(qū)管理參與者管理員描述管理員根據(jù)實(shí)際的需要錄入學(xué)校所有校區(qū)前置條件管理員成功登錄系統(tǒng)后置條件錄入的校區(qū)真實(shí)存在主要過程1、管理員填寫用戶名和密碼，成功登錄系統(tǒng)。2、根據(jù)需要添加該學(xué)校所有校區(qū)的名稱。3、最終成功添加校區(qū)。表2.3系別管理描述用例名稱系別管理參與者管理員描述管理員根據(jù)學(xué)校所有的校區(qū)來對(duì)應(yīng)錄入系別前置條件管理員成功登錄系統(tǒng)后置條件錄入的系別真實(shí)存在主要過程1、管理員輸入用戶名和密碼，然后成功登錄系統(tǒng)。2、根據(jù)原有的校區(qū)來為它添加所擁有的系別。3、最終成功添加系別。表2.4教師管理描述用例名稱教師管理參與者管理員描述管理員根據(jù)所對(duì)應(yīng)的校區(qū)系別錄入教師前置條件管理員成功登錄系統(tǒng)后置條件錄入的教師真實(shí)存在主要過程1、管理員輸入用戶名和密碼，成功登錄系統(tǒng)。2、根據(jù)每個(gè)校區(qū)系別來錄入教師的名字。3、最終成功錄入名字。表2.5課程時(shí)間描述用例名稱課程時(shí)間參與者管理員描述管理員根據(jù)學(xué)校情況錄入課程時(shí)間前置條件管理員成功登錄系統(tǒng)后置條件課程時(shí)間正確保存在數(shù)據(jù)庫(kù)中主要過程1、管理員輸入用戶名和密碼，成功登錄系統(tǒng)。2、點(diǎn)擊添加課程的數(shù)目、每節(jié)課的上下課時(shí)間和最晚打卡時(shí)間。3、最終成功錄入課程相應(yīng)的信息。2.3.2教師用例分析教師就是每個(gè)專業(yè)對(duì)應(yīng)的各個(gè)班級(jí)的教師，教師的主要工作就是維護(hù)自己所在年級(jí)、專業(yè)、學(xué)生的相關(guān)信息和查看學(xué)生打卡情況，可以執(zhí)行的功能的具體分析如下面3.2的用例圖分析所示。圖2.2教師用例圖表2.6年級(jí)管理描述用例名稱年級(jí)管理參與者教師描述教師錄入自己所教的年級(jí)前置條件教師成功登錄系統(tǒng)后置條件年級(jí)信息正確保存在數(shù)據(jù)庫(kù)中主要過程1、教師輸入工號(hào)和密碼，成功登錄系統(tǒng)。2、點(diǎn)擊添加自己所在校區(qū)對(duì)應(yīng)的年級(jí)名稱。3、最終成功錄入年紀(jì)名稱。表2.7專業(yè)管理描述用例名稱專業(yè)管理參與者教師描述教師錄入自己所教的專業(yè)前置條件教師成功登錄系統(tǒng)后置條件專業(yè)信息正確保存在數(shù)據(jù)庫(kù)中主要過程1、教師輸入工號(hào)和密碼，成功登錄系統(tǒng)。2、點(diǎn)擊添加自己所教年級(jí)的專業(yè)名稱。3、最終成功錄入專業(yè)名稱。表2.8學(xué)生管理描述用例名稱學(xué)生管理參與者教師描述教師錄入自己所教的學(xué)生信息前置條件教師成功登錄系統(tǒng)后置條件學(xué)生信息正確保存在數(shù)據(jù)庫(kù)中主要過程1、教師輸入工號(hào)和密碼，成功登錄系統(tǒng)。2、點(diǎn)擊添加自己所教學(xué)生的姓名、學(xué)號(hào)。3、最終成功錄入學(xué)生信息。表2.9課程管理描述用例名稱課程管理參與者教師描述教師錄入自己所教的課程名稱前置條件教師成功登錄系統(tǒng)后置條件課程名稱正確保存在數(shù)據(jù)庫(kù)中主要過程1、教師輸入工號(hào)和密碼，成功登錄系統(tǒng)。2、點(diǎn)擊添加自己所教的課程名稱。3、最終成功錄入課程名稱。表2.10打卡監(jiān)控描述用例名稱打卡監(jiān)控參與者教師描述教師查看學(xué)生打卡情況前置條件教師成功登錄系統(tǒng)后置條件打卡狀況正常顯示主要過程1、教師輸入工號(hào)和密碼，成功登錄系統(tǒng)。2、點(diǎn)擊打卡監(jiān)控查看自己學(xué)生打卡狀況。表2.11請(qǐng)假審批描述用例名稱請(qǐng)假審批參與者教師描述教師對(duì)所請(qǐng)假的同學(xué)給予意見前置條件教師成功登錄系統(tǒng)后置條件課程名稱正確保存在數(shù)據(jù)庫(kù)中主要過程1、教師輸入工號(hào)和密碼，成功登錄系統(tǒng)。2、教師核實(shí)學(xué)生實(shí)際情況，對(duì)請(qǐng)假同學(xué)進(jìn)行審批。3、給予學(xué)生請(qǐng)假同意或者駁回。2.3.3學(xué)生用例分析學(xué)生在本系統(tǒng)中主要使用的部分就是打卡、請(qǐng)假和查看自己的打卡及請(qǐng)假記錄，可以執(zhí)行的功能的具體分析如下面3.3的用例圖分析所示。圖2.3學(xué)生用例圖表2.12打卡描述用例名稱打卡參與者學(xué)生描述學(xué)生根據(jù)地理定位進(jìn)行上課打卡前置條件地理位置成功獲取后置條件打卡信息成功被數(shù)據(jù)庫(kù)保存主要過程1、學(xué)生輸入學(xué)號(hào)和密碼，成功登錄系統(tǒng)。2、學(xué)生到達(dá)上課地點(diǎn)，打開系統(tǒng)點(diǎn)擊打卡。3、系統(tǒng)顯示打卡成功。表2.13請(qǐng)假描述用例名稱請(qǐng)假參與者學(xué)生描述學(xué)生根據(jù)自己實(shí)際情況來請(qǐng)假前置條件學(xué)生不能去上課后置條件請(qǐng)假信息成功被數(shù)據(jù)庫(kù)保存主要過程1、學(xué)生輸入學(xué)號(hào)和密碼，成功登錄系統(tǒng)。2、學(xué)生點(diǎn)擊請(qǐng)假按鈕進(jìn)行請(qǐng)假。3、系統(tǒng)顯示請(qǐng)假成功。2.4系統(tǒng)活動(dòng)建模2.4.1管理員活動(dòng)建模管理員用戶管理活動(dòng)建模，管理員獨(dú)占用戶管理這一權(quán)限，擁有添加、修改、刪除用戶的權(quán)限。具體活動(dòng)圖如圖2.4所示。圖2.4管理員管理用戶活動(dòng)建模2.4.2教師活動(dòng)建模教師獨(dú)有的審批學(xué)生的請(qǐng)假，如果不同意請(qǐng)假，可以駁回學(xué)生的請(qǐng)求，如果同意則點(diǎn)擊同意，系統(tǒng)自動(dòng)刷新狀態(tài)，具體活動(dòng)圖如圖所示。圖2.5教師審批活動(dòng)建模2.4.3學(xué)生活動(dòng)建模 打卡活動(dòng)建模，打卡是學(xué)生專有的權(quán)限，學(xué)生要根據(jù)自己的課程進(jìn)行上課打卡，系統(tǒng)自動(dòng)獲取其地理位置，具體活動(dòng)圖如圖2.6所示。請(qǐng)假活動(dòng)建模，請(qǐng)假功能是方便學(xué)生請(qǐng)假，依據(jù)自己實(shí)際情況向自己班級(jí)的教師請(qǐng)假，需要選擇星期幾、課程名稱和書寫自己請(qǐng)假緣由，具體活動(dòng)圖如圖2.7所示。圖2.6打卡活動(dòng)建模圖2.7請(qǐng)假活動(dòng)建模

第3章系統(tǒng)設(shè)計(jì)3.1系統(tǒng)功能設(shè)計(jì)根據(jù)系統(tǒng)需求分析設(shè)計(jì)當(dāng)前系統(tǒng)的功能模塊，當(dāng)前系統(tǒng)要滿足不同的人擁有不同權(quán)限，但系統(tǒng)中有很多相同屬性的用戶，如老師、學(xué)生，這種情況下不適合為每一個(gè)用戶創(chuàng)建不同的權(quán)限，只需要?jiǎng)?chuàng)建不用的角色，角色擁有不同的權(quán)限，在用角色去綁定不同的用戶，這樣相同屬性的用戶就擁有了相同的權(quán)限，本系統(tǒng)共分為六大功能，分別為系統(tǒng)管理、校園管理、人員管理、課程管理。其主要的功能在以下列表中體現(xiàn)：(1)系統(tǒng)管理：用戶管理(2)校園管理：校區(qū)管理、系別管理、年級(jí)管理、專業(yè)管理(3)人員管理：教師管理、學(xué)生管理(4)課程管理：課程時(shí)間管理、數(shù)目管理、打卡監(jiān)控、請(qǐng)假審批(5)打卡管理：課堂打卡、查看打卡記錄(6)請(qǐng)假管理：課堂請(qǐng)假、查看請(qǐng)假記錄具體的功能結(jié)構(gòu)如圖3.1所示。圖3.1功能結(jié)構(gòu)圖3.2系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)3.2.1概念設(shè)計(jì)從數(shù)據(jù)需求分析中得出實(shí)體并對(duì)實(shí)體進(jìn)行了詳細(xì)的屬性設(shè)計(jì)，下面對(duì)每個(gè)實(shí)體及屬性做了總結(jié)，具體如下：管理員(管理員姓名手機(jī)號(hào)登錄密碼)教師(教師姓名工號(hào)登錄密碼創(chuàng)建時(shí)間)學(xué)生(學(xué)生姓名學(xué)號(hào)密碼性別創(chuàng)建時(shí)間)學(xué)校(校區(qū)系別專業(yè))課程(課程名稱周幾課程時(shí)間)課程時(shí)間(開始時(shí)間結(jié)束時(shí)間最晚打卡時(shí)間第幾節(jié)課)打卡(打卡時(shí)間打卡課程名稱)請(qǐng)假(請(qǐng)假原因請(qǐng)假科目請(qǐng)假時(shí)間)打卡監(jiān)控(學(xué)生姓名學(xué)生學(xué)號(hào)打卡時(shí)間課程名稱打卡狀態(tài))請(qǐng)假審批(學(xué)生姓名學(xué)生學(xué)號(hào)班級(jí)課程名稱請(qǐng)假狀態(tài))(1)管理員實(shí)體屬性圖，如圖3.2所示。圖3.2管理員實(shí)體屬性圖(2)教師實(shí)體屬性圖，如下圖3.3所示。圖3.3教師實(shí)體屬性圖(3)學(xué)生實(shí)體屬性圖，如圖3.4所示。圖3.4學(xué)生實(shí)體屬性圖(4)學(xué)校實(shí)體屬性圖，如圖3.5所示。圖3.5學(xué)校實(shí)體屬性圖(5)課程實(shí)體屬性圖，如圖3.6所示。圖3.6課程實(shí)體屬性圖(6)課程時(shí)間實(shí)體屬性圖，如下圖3.7所示。圖3.7課程時(shí)間實(shí)體屬性圖(7)打卡屬性圖，如圖3.8所示。圖3.8打卡屬性圖(8)請(qǐng)假屬性圖，如圖3.9所示。圖3.9請(qǐng)假屬性圖(9)打卡監(jiān)控實(shí)體屬性圖，如圖3.10所示。圖3.10打卡監(jiān)控實(shí)體屬性圖(10)請(qǐng)假審批實(shí)體屬性圖，如下圖3.11所示。圖3.11請(qǐng)假審批實(shí)體屬性圖從以上實(shí)體屬性圖，對(duì)屬性之間的依賴關(guān)系進(jìn)行總體總結(jié)和分析得到了如下的E-R圖，如圖3.12所示。圖3.12E-R圖3.2.2數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)(1)用戶登錄信息表base_user存儲(chǔ)所有用戶登錄相關(guān)信息，其中的ID和base_user_info的ID是相同的，rid關(guān)聯(lián)了角色表的ID,這樣知道了用戶ID就能知道他角色的ID。表3.1用戶登錄信息表名稱類型備注IdInt系統(tǒng)IDloginNamevarchar(20)登錄名loginPwdvarchar(50)登錄密碼ustatusInt用戶狀態(tài)classesInt級(jí)別ridInt角色表ID(2)用戶信息表base_user_info存儲(chǔ)所有用戶信息，其中classes存儲(chǔ)了Base_class表的當(dāng)前用戶最底層的ID。表3.2用戶信息表名稱類型備注IdInt系統(tǒng)IDnamevarchar(20)姓名nicknamevarchar(20)昵稱mobilevarchar(11)手機(jī)號(hào)emaiilVarchar(20)郵箱IDcardVarchar(18)身份證號(hào)addressVarchar(50)地址classesVarchar(20)Base_classID(3)角色表base_role存儲(chǔ)所有角色信息。表3.3角色表名稱類型備注IdInt系統(tǒng)IDnameVarchar(20)角色名稱(4)菜單表base_menu存儲(chǔ)所有菜單信息，其中的Fid代表當(dāng)前用戶的父用戶的ID（均在當(dāng)前表中）。表3.4用戶表名稱類型備注IdInt系統(tǒng)IDNameVarchar(20)名稱AddressVarchar(200)路徑Fidint父ID（系統(tǒng)ID）(5)ID記錄表base_id_gen存儲(chǔ)部分表的ID，通過當(dāng)前表判斷下一個(gè)ID。表3.5ID記錄表名稱類型備注Id_keyVarchar(20)哪張表Id_valueInt下一個(gè)ID(6)角色用戶表base_menu_role存儲(chǔ)所有用戶和角色的對(duì)應(yīng)關(guān)系，通過獲取用戶的rid（角色）就可以知道當(dāng)前用戶有哪些用戶的權(quán)限。表3.6角色用戶表名稱類型備注RidInt角色I(xiàn)DMidInt用戶IDStatusInt狀態(tài)(7)校園信息表base_class存儲(chǔ)所有校園信息（包括學(xué)校、校區(qū)、系別、年級(jí)、班級(jí)），其中的Pid是當(dāng)前校園對(duì)象的父級(jí)（均在當(dāng)前表中）。表3.7校園信息表名稱類型備注IdInt系統(tǒng)IDNameVarchar(20)名稱PidInt父級(jí)ID（系統(tǒng)ID）CreatetimeVarchar(20)創(chuàng)建時(shí)間ClassesInt級(jí)別（0:學(xué)校，1：校區(qū)，2：系；3：年級(jí)；4:專業(yè)）(8)學(xué)生表base_student存儲(chǔ)所有學(xué)生信息，其中的classes代表了學(xué)生所在班級(jí)，使用當(dāng)前學(xué)生的classes，結(jié)合Base_class既可以知道當(dāng)前學(xué)生的完整校園信息。表3.8學(xué)生表名稱類型備注IdInt系統(tǒng)IDnameVarchar(20)姓名sexVarchar(20)性別ageInt年齡IdcardVarchar(10)學(xué)號(hào)classesInt班級(jí)createtimeVarchar(20)創(chuàng)建時(shí)間(9)教師表base_teacher存儲(chǔ)所有教師信息,其中的campusid，departmentid，gradeid均對(duì)應(yīng)base_class表，以此得出當(dāng)前教師的所有校園信息。表3.9教師表名稱類型備注IdInt系統(tǒng)IDnameVarchar(20)姓名tcidVarchar(20)教師編號(hào)createtimeVarchar(20)創(chuàng)建時(shí)間campusidInt系別IDdepartmentidInt系idgradeidInt年級(jí)iduseridInt用戶表ID(10)課程表class存儲(chǔ)所有課程信息，其中的time_id代表了當(dāng)前信息與class_time的關(guān)系，以此得出課程的完整時(shí)間。表3.10課程表名稱類型備注IdInt系統(tǒng)IDclass_nameVarchar(20)名稱time_idVarchar(20)Class_time表idweekdayVarchar(20)周幾classidInt班級(jí)ID(11)課程時(shí)間表class_time存儲(chǔ)課程的開始時(shí)間、結(jié)束時(shí)間和最晚打卡時(shí)間等有關(guān)的信息。表3.11課程時(shí)間表名稱類型備注IdInt系統(tǒng)IDstart_timeVarchar(20)開始時(shí)間end_timeVarchar(20)結(jié)束時(shí)間last_timeVarchar(20)最晚打卡時(shí)間class_numVarchar(20)第幾節(jié)課(12)打卡記錄表clockin_log存儲(chǔ)所有學(xué)生的打卡記錄，其中的stuid和classid代表了學(xué)生和學(xué)生所在的班級(jí)，以此得出學(xué)生的完整的學(xué)校信息，其中的courseid代表了課程id，這養(yǎng)就可以得出完整的學(xué)校信息、學(xué)生信息和課程信息。表3.12打卡記錄表名稱類型備注IdInt系統(tǒng)IDstuidInt學(xué)生IDclassidInt班級(jí)IDstatusInt打卡狀態(tài)clock_timeVarchar(20)打卡時(shí)間weekdayInt周幾courseidInt課程ID(13)請(qǐng)假表：leave記錄所有學(xué)生請(qǐng)假的數(shù)據(jù)，其中的stuid、courseid、classes_id結(jié)合base_class表中的信息，可以得出學(xué)生的完整學(xué)校信息。表3.13請(qǐng)假表名稱類型備注IdInt系統(tǒng)IDstuidInt學(xué)生IDcourseidInt班級(jí)IDclasses_idInt課程IDcreatetimeVarchar(20)創(chuàng)建時(shí)間weekdayVarchar(20)周幾timeVarchar(20)請(qǐng)假時(shí)間statusInt狀態(tài)noteVarchar(200)備注3.3系統(tǒng)詳細(xì)設(shè)計(jì)3.3.1用戶登錄用戶打開系統(tǒng)，進(jìn)入首頁(yè)，輸入用戶名和密碼，點(diǎn)擊提交，后臺(tái)和數(shù)據(jù)庫(kù)比對(duì)信息，在對(duì)應(yīng)相應(yīng)的權(quán)限給出返回值，最后登陸成功進(jìn)入系統(tǒng)，或者提示用戶名密碼錯(cuò)誤，如圖3.2所示。圖3.2用戶登錄時(shí)序圖3.3.2學(xué)生打卡學(xué)生打開主頁(yè)，輸入自己的學(xué)號(hào)和密碼，進(jìn)入打卡主頁(yè)面，點(diǎn)擊打卡按鈕，利用百度地圖獲取定位，把獲取的地址傳到后臺(tái)與事先存儲(chǔ)的地理位置名稱做比對(duì)，去過比對(duì)正確則返給前臺(tái)SUCCESS，界面提示打卡成功，否則返給前臺(tái)ERROR，提示打卡失敗，如圖3.3所示。圖3.3學(xué)生打卡時(shí)序圖3.3.3學(xué)生請(qǐng)假學(xué)生打卡系統(tǒng)，輸入用戶信息點(diǎn)擊登錄，進(jìn)入主界面，點(diǎn)擊請(qǐng)假按鈕，選擇星期幾哪節(jié)課請(qǐng)假，填寫自己請(qǐng)假理由，點(diǎn)擊提交到，界面有成功提示，如圖3.4所示。圖3.4學(xué)生請(qǐng)假時(shí)序圖3.3.4添加用戶管理員輸入自己的賬戶名和密碼，成功登錄系統(tǒng)后，鼠標(biāo)點(diǎn)擊用戶管理，用戶點(diǎn)擊添加按鈕，添加管理員的時(shí)候需要輸入姓名和手機(jī)號(hào)和選擇校區(qū)管理角色，點(diǎn)擊保存，頁(yè)面自動(dòng)刷新信息增加一條，添加教師的時(shí)候需要另外在選擇一下哪個(gè)校區(qū)，其他和添加管理員操作一致，如圖3.5所示。圖3.5添加用戶時(shí)序圖3.3.5修改課程時(shí)間課程時(shí)間管理是管理員根據(jù)每個(gè)學(xué)校上課時(shí)間的情況，錄入這個(gè)校區(qū)每節(jié)課的實(shí)際時(shí)間，可以修改時(shí)間，操作如下，點(diǎn)擊修改按鈕，刪除原有數(shù)據(jù)，重新錄入開始時(shí)間、結(jié)束時(shí)間、最晚打卡時(shí)間和第幾節(jié)課，如圖3.6所示。圖3.6修改課程時(shí)間時(shí)序圖3.3.6刪除學(xué)生對(duì)學(xué)生的操作是教師的職責(zé)，每個(gè)教師負(fù)責(zé)自己所教的學(xué)生，教師輸入用戶名密碼成功登錄系統(tǒng)后，可以依據(jù)實(shí)際情況添加刪除學(xué)生，刪除學(xué)生時(shí)，只需點(diǎn)擊要?jiǎng)h除學(xué)生后邊的紅色按鈕即可，系統(tǒng)西東刷新界面，減少數(shù)據(jù)，如圖3.7所示。圖3.7刪除學(xué)生時(shí)序圖3.3.7打卡監(jiān)控打卡監(jiān)控功能，是為了讓教師一目了然的查看到學(xué)生的出勤狀況，教師可以看到所有學(xué)生打卡狀況，也可以根據(jù)自己的意愿查詢某一個(gè)學(xué)生某節(jié)課的狀態(tài)，只要輸入學(xué)生姓名，選擇某個(gè)專業(yè)某節(jié)課和周幾，還有打卡未打卡狀態(tài)就可以查詢，界面自動(dòng)刷新顯示結(jié)果，如圖3.8所示。圖3.8打卡監(jiān)控時(shí)序圖3.3.8請(qǐng)假審批請(qǐng)假審批顧名思義學(xué)生請(qǐng)假，教師審批，這里是為了教師審核申請(qǐng)請(qǐng)假的同學(xué)所創(chuàng)建的功能，教師根據(jù)瀏覽學(xué)生信息和學(xué)生所描述的請(qǐng)假理由，點(diǎn)擊藍(lán)色同意按鈕，這位同學(xué)的狀態(tài)就會(huì)自動(dòng)改成已同意狀態(tài)，同時(shí)會(huì)隱藏同意按鈕，如果教師認(rèn)為是不符合規(guī)矩的請(qǐng)假，則可以點(diǎn)擊紅色駁回按鈕，同學(xué)的狀態(tài)自然就會(huì)改成已駁回狀態(tài)，同樣也會(huì)隱藏駁回按鈕，如圖3.9所示。圖3.9請(qǐng)假審批時(shí)序圖

第4章系統(tǒng)的實(shí)現(xiàn)4.1系統(tǒng)登錄界面(1)用戶進(jìn)入頁(yè)面，填寫登錄名稱和登錄密碼，系統(tǒng)通過連接數(shù)據(jù)庫(kù)查詢是否存在當(dāng)前用戶名，如圖4.1。圖4.1登錄界面(2)如果不存在，直接將錯(cuò)誤狀態(tài)返回到前端，前端接到返回的錯(cuò)誤狀態(tài)，提示用戶輸入錯(cuò)誤。(3)如果存在則根據(jù)用戶名從數(shù)據(jù)庫(kù)中查詢出加密后的密碼A，使用MD5加密用戶當(dāng)前輸入的密碼B，如果密碼A和密碼B相等，則說明當(dāng)前用戶是合法的，這時(shí)將系統(tǒng)系需要的信息保存在SESSION中，并將狀態(tài)返回給前端，前端接受到返回的狀態(tài)，使用JS跳轉(zhuǎn)到歡迎頁(yè)面。(4)進(jìn)入歡迎頁(yè)面后使用Ajax發(fā)送查詢權(quán)限的請(qǐng)求，系統(tǒng)從SESSION中獲取用戶的相關(guān)信息，得到用戶的角色I(xiàn)D，通過角色I(xiàn)D查詢當(dāng)前角色擁有的用戶權(quán)限結(jié)合用戶表得到當(dāng)前用戶可以使用的所有用戶，將用戶數(shù)據(jù)整合后返回前端，前端使用JS拼接權(quán)限列表如圖4.2。圖4.2登陸成功界面4.2打卡界面打卡界面為學(xué)生操作的主界面，其功能包括打卡和跳轉(zhuǎn)到其他頁(yè)面中，當(dāng)前頁(yè)面使用百度地圖作為背景，使用BootStrap生成頁(yè)面UI，進(jìn)入頁(yè)面后程序?qū)⒆詣?dòng)定位學(xué)生當(dāng)前位置，并使用經(jīng)緯坐標(biāo)通過百度地圖的方法獲取位置詳細(xì)信息，學(xué)生點(diǎn)擊打卡按鈕后程序使用Ajax將當(dāng)前位置信息、學(xué)生信息和課程信息發(fā)送到服務(wù)器接口以完成打卡操作。如圖4.3。為了學(xué)生可以查看自己的打卡記錄，項(xiàng)目提供查看打卡記錄頁(yè)面，頁(yè)面使用BootStrap的表格系統(tǒng)生成頁(yè)面UI，在學(xué)生登錄后系統(tǒng)使用JS將學(xué)生ID保存在緩存中，進(jìn)入當(dāng)前頁(yè)面后學(xué)生無(wú)需任何操作就可以查看自己的打卡記錄，記錄中的信息包括打卡的星期、課程和打卡時(shí)間。如圖4.4。圖4.3打卡界面圖4.4打卡記錄界面4.3請(qǐng)假界面請(qǐng)假界面的功能相對(duì)簡(jiǎn)單，用于學(xué)生提交請(qǐng)假申請(qǐng)，使用BootStrap生成頁(yè)面UI，學(xué)生進(jìn)入頁(yè)面后選擇要請(qǐng)假的日期和課程并點(diǎn)擊按鈕，程序使用Ajax將學(xué)生信息和請(qǐng)假信息同意發(fā)送到后臺(tái)接口，以此完成請(qǐng)假申請(qǐng)。如圖4.5。請(qǐng)假記錄是為了方便學(xué)生查看自己的請(qǐng)假歷史，頁(yè)面同樣使用BootStrap的表格系統(tǒng)生成頁(yè)面UI，其實(shí)現(xiàn)原理與打卡記錄頁(yè)面相同，學(xué)生進(jìn)入點(diǎn)擊查看請(qǐng)假記錄信息按鈕頁(yè)面后無(wú)需任何操作就可以查看所有的請(qǐng)假記錄。如圖4.6。圖4.5請(qǐng)假界面圖4.6請(qǐng)假記錄界面4.4用戶管理界面添加用戶：用戶點(diǎn)擊添加按鈕調(diào)用JS，JS調(diào)用JQueryUI中的dialog將對(duì)應(yīng)的form表單顯示出來，用戶在表單中填寫相關(guān)信息，填寫完畢后點(diǎn)擊保存信息按鈕調(diào)，用JQuery.form.js將當(dāng)前表單的數(shù)據(jù)以Ajax的方式發(fā)送到后臺(tái)，后臺(tái)接到請(qǐng)求后將數(shù)據(jù)封裝成SQL語(yǔ)句發(fā)送到數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)執(zhí)行SQL語(yǔ)句后向后臺(tái)返回執(zhí)行的結(jié)果，后臺(tái)接到結(jié)果后判斷結(jié)果并返回相應(yīng)的數(shù)據(jù)給前端，前端接收到返回的數(shù)據(jù)后根據(jù)數(shù)據(jù)判斷是否刷新網(wǎng)頁(yè)或提示添加失敗，如圖4.7。圖4.7添加用戶界面4.5課程時(shí)間管理界面(1)課程時(shí)間列表：用戶點(diǎn)擊“課程時(shí)間管理”進(jìn)入相應(yīng)頁(yè)面，頁(yè)面中使用JQuery的Ajax向后臺(tái)發(fā)送請(qǐng)求，后臺(tái)接受到請(qǐng)求后連接數(shù)據(jù)庫(kù)查詢相應(yīng)數(shù)據(jù)表，獲取所有信息并封裝數(shù)據(jù)，返回到前端JS中，前端JS（VUE）接到結(jié)果后開始在內(nèi)存中渲染頁(yè)面，渲染完畢后將頁(yè)面掛載到網(wǎng)頁(yè)中，這時(shí)用戶就可以看到所有的相關(guān)信息，如圖4.8。圖4.8課程時(shí)間列表界面(2)修改課程時(shí)間：用戶點(diǎn)擊某一條信息的“修改”按鈕，VUE將當(dāng)前記錄的ID傳出到JS中，JS接受到調(diào)用請(qǐng)求，使用JQuery封裝的Ajax向后臺(tái)發(fā)送請(qǐng)求，后臺(tái)接收到請(qǐng)求后連接數(shù)據(jù)庫(kù)進(jìn)行查詢，獲取當(dāng)前記錄的相關(guān)信息，封裝數(shù)據(jù)，并以JSON的方式返回到前端JS，前端JS接受到返回的數(shù)據(jù)后開始渲染隱藏的修改信息專用的form表單，渲染完畢后將表單顯示出來，這時(shí)用戶就可以看見完整的相關(guān)信息，用戶在form表單中修改相關(guān)信息，然后點(diǎn)擊保存按鈕，前端使用JQuery.Form.js將表單數(shù)據(jù)已Ajax的方式發(fā)送到后臺(tái)，后臺(tái)接受請(qǐng)求后根根據(jù)ID修改當(dāng)前信息，修改完成后返回處理結(jié)果，后臺(tái)接受到數(shù)據(jù)庫(kù)返回的結(jié)果后將信息返回前端，前端JS接收到返回的結(jié)果后根據(jù)結(jié)果判斷是否刷新網(wǎng)頁(yè)或提示修改失敗，如圖4.9。圖4.9修改課程時(shí)間界面4.6學(xué)生管理界面(1)學(xué)生列表：用戶點(diǎn)擊“學(xué)生管理”進(jìn)入相應(yīng)頁(yè)面，頁(yè)面中使用JQuery的Ajax向后臺(tái)發(fā)送請(qǐng)求，后臺(tái)接受到請(qǐng)求后連接數(shù)據(jù)庫(kù)查詢相應(yīng)數(shù)據(jù)表，獲取所有信息并封裝數(shù)據(jù)，返回到前端JS中，前端JS（VUE）接到結(jié)果后開始在內(nèi)存中渲染頁(yè)面，渲染完畢后將頁(yè)面掛載到網(wǎng)頁(yè)中，這時(shí)用戶就可以看到所有的相關(guān)信息，如圖4.10。圖4.10學(xué)生列表界面(2)刪除學(xué)生：用戶點(diǎn)擊某條記錄的刪除按鈕，JS接受當(dāng)前記錄的ID，使用JQuery封裝的Ajax向后臺(tái)接口發(fā)送數(shù)據(jù)，接口接到數(shù)據(jù)后將數(shù)據(jù)解析成SQL語(yǔ)句到數(shù)據(jù)庫(kù)中執(zhí)行，后臺(tái)解析數(shù)據(jù)庫(kù)返回的執(zhí)行結(jié)果并向前端返回相應(yīng)的執(zhí)行狀態(tài)，前端根據(jù)返回的狀判斷是否刷新網(wǎng)頁(yè)或提示刪除失敗。4.7打卡監(jiān)控界面(1)打卡列表：用戶點(diǎn)擊“課程管理”進(jìn)入相應(yīng)頁(yè)面，頁(yè)面中使用JQuery的Ajax向后臺(tái)發(fā)送請(qǐng)求，后臺(tái)接受到請(qǐng)求后連接數(shù)據(jù)庫(kù)查詢相應(yīng)數(shù)據(jù)表，獲取所有信息并封裝數(shù)據(jù)，返回到前端JS中，前端JS（VUE）接到結(jié)果后開始在內(nèi)存中渲染頁(yè)面，渲染完畢后將頁(yè)面掛載到網(wǎng)頁(yè)中，這時(shí)用戶就可以看到所有的相關(guān)信息，如圖4.11。圖4.11打卡列表界面(2)條件篩選：用戶在頁(yè)面中選擇自己想要查看的打卡信息的篩選條件，點(diǎn)擊“查詢”按鈕，調(diào)用JS方法，JS使用JQuery獲取所有篩選條件的值并攜帶所有值以Ajax的方式訪問后臺(tái)接口，接口接收到請(qǐng)求后對(duì)參數(shù)進(jìn)行非空判斷和生成對(duì)應(yīng)SQL語(yǔ)句，將SQL語(yǔ)句發(fā)送到數(shù)據(jù)庫(kù)執(zhí)行，數(shù)據(jù)庫(kù)執(zhí)行后將結(jié)果返回給后臺(tái)，后臺(tái)拿到結(jié)果后對(duì)結(jié)果集進(jìn)行非空判斷并向前端返回相應(yīng)的數(shù)據(jù)，前端接受到返回的數(shù)據(jù)后判斷返回的數(shù)據(jù)，以此來判斷是否刷新網(wǎng)頁(yè)或提示錯(cuò)誤，如圖4.12。圖4.12篩選的打卡列表界面4.8請(qǐng)假審批界面(1)請(qǐng)假列表：用戶點(diǎn)擊“請(qǐng)假管理”進(jìn)入相應(yīng)頁(yè)面，頁(yè)面中使用JQuery的Ajax向后臺(tái)發(fā)送請(qǐng)求，后臺(tái)接受到請(qǐng)求后連接數(shù)據(jù)庫(kù)查詢相應(yīng)數(shù)據(jù)表，獲取所有信息并封裝數(shù)據(jù)，返回到前端JS中，前端JS（VUE）接到結(jié)果后開始在內(nèi)存中渲染頁(yè)面，渲染完畢后將頁(yè)面掛載到網(wǎng)頁(yè)中，這時(shí)用戶就可以看到所有的相關(guān)信息，如圖4.13。(2)審核信息：用戶對(duì)請(qǐng)假信息進(jìn)行審核，點(diǎn)擊同意或駁回，此時(shí)調(diào)用JS攜帶當(dāng)前信息的ID和審批結(jié)果以Ajax的形式請(qǐng)求后臺(tái)接口，后臺(tái)接口接到值后根據(jù)ID修改當(dāng)前信息并返回執(zhí)行結(jié)果，前端Ajax獲得返回結(jié)果，使用JS判斷返回的結(jié)果以決定刷新頁(yè)面或提示錯(cuò)誤，如圖4.13。圖4.13請(qǐng)假列表界面

第5章系統(tǒng)測(cè)試5.1登錄測(cè)試用例表5.1登錄測(cè)試用例用例編號(hào)A001測(cè)試模塊登錄系統(tǒng)重要級(jí)別高預(yù)置條件系統(tǒng)正常打開輸入輸入非數(shù)據(jù)庫(kù)中存儲(chǔ)的用戶名或密碼預(yù)期輸出都無(wú)法登入，顯示用戶名或密碼錯(cuò)誤實(shí)測(cè)結(jié)果與預(yù)期輸出相同輸入輸入相應(yīng)的用戶名和密碼點(diǎn)擊登錄，預(yù)期輸出進(jìn)入首頁(yè)實(shí)測(cè)結(jié)果與預(yù)期輸出相同5.2打卡測(cè)試用例表5.2打卡測(cè)試用例用例編號(hào)A003測(cè)試模塊打卡重要級(jí)別高預(yù)置條件系統(tǒng)正常打開打卡輸入點(diǎn)擊打卡按鈕獲取地理位置信息預(yù)期輸出和數(shù)據(jù)庫(kù)中位置比對(duì)通過實(shí)測(cè)結(jié)果與預(yù)期結(jié)果相