基于微信公眾平臺的教學管理系統(tǒng)設(shè)計與開發(fā)

武漢科技大學本科畢業(yè)論文題目：基于微信公眾平臺的教學管理系統(tǒng)設(shè)計與開發(fā)學院:機械自動化學院專業(yè):學號:學生姓名:指導教師:日期:摘要高校課堂查勤，解答學生疑問往往對于老師是很麻煩的事情，但是這通常又很具有規(guī)律性，并且老師也很不方便解答問題，分享課件給學生。因此依托微信來解決以上問題勢在必行。本論文主要圍繞微信公眾號進行開發(fā)，涉及到前后臺接口的約定，前后臺業(yè)務(wù)實現(xiàn)邏輯的可行性研究與設(shè)計，以及后臺數(shù)據(jù)庫表的設(shè)計與創(chuàng)建，后臺PHP程序邏輯的編寫，前端頁面布局（響應(yīng)式頁面），牽涉到Html與Css，并使用JavaScript來編寫前端用戶交互邏輯與頁面效果。分析并且解決了業(yè)務(wù)實現(xiàn)以及部署到服務(wù)器時的若干問題；獨立設(shè)計并實現(xiàn)了UI界面與用戶交互邏輯；設(shè)計了該系統(tǒng)后臺數(shù)據(jù)庫與業(yè)務(wù)功能邏輯。該網(wǎng)站完整實現(xiàn)了簽到功能，并解決了簽到過程中遇到的學生簽到無效的問題，并且可以使得老師對學生提問進行有效回復，具有實際使用價值。開發(fā)本系統(tǒng)可以提升學生與老師的互動能力，提高課堂效率，任課老師可以很方便地了解學生出勤率，在線回答學生提問等，使得微信公眾平臺成為課程教學手段的有益補充。通過該系統(tǒng)的設(shè)計與開發(fā)，可以了解微信公眾號后臺與服務(wù)器交互原理，熟悉使用PHP與MySQL語句，加強對JavaScript語言的掌握。最終可有效提高對項目需求整理、代碼編寫、軟件測試等開發(fā)流程有一個全面清楚的認識。

關(guān)鍵字：JavaScript，Php，MySQL，微信二次開發(fā)，簽到，教學管理AbstractToanswerstudentsquestionsoftenZhaQincollegeclass,theteacherisverytroublesomething,butthisisusuallywithregularity,andtheteacherisveryinconvenienttosolveproblems,sharecoursewareforstudents.SorelyingonWeChattosolvetheaboveproblemsisimperative.ThisthesismainlyaroundWeChatpublicdevelopment,comestoTaiwanbeforeandaftertheagreementoftheinterface,Taiwanbeforeandafterbusinesslogicimplementationofthefeasibilitystudyanddesign,aswellasthebackgrounddesignandcreateadatabasetable,thebackgroundPHPtowritetheprogramlogic,frontpagelayout(response),involvingHtmlandCss,anduseJavaScripttowritefrontenduserinteractionlogicandeffectofthepage.Toanalyzeandsolvethebusinessimplementationandsomeproblemswhendeployedtoaserver;IndependencewasdesignedandimplementedtheUIinterfaceanduserinteractionlogic;Designthefunctionofthesystembackgrounddatabaseandbusinesslogic.Check-inforthissite,andsolvedthesign-instudentssignininvalidproblemsintheprocessof,andenablestheteachertomakeeffectiveresponsetostudentquestions,withactualusevalue.Developmentofthissystemcanpromotestudentstointeractwiththeteacher'sability,improvetheefficiencyofclassroom,teachercaneasilyunderstandthestudentattendance,onlineanswerquestionsfromstudentsandsoon,makesWeChatpublicplatformofcourseteachingmeansbeneficialsupplement.Throughthesystemdesignanddevelopment,canunderstandWeChatpublicprojectbackendtointeractwiththeserverprinciple,familiarwithusingPHPandMySQLstatement,strengthenthegraspoftheJavaScriptlanguage.Finalcaneffectivelyimprovetheprojectrequirements,coding,softwaretestingdevelopmentprocesshasaclearacrosstheboard.Keywords：JavaScript,Php,MySQL,WeChatsecondarydevelopment,check-in,teachingmanagement目錄1.緒論 31.1課題的研究背景 31.2國內(nèi)研究現(xiàn)狀 31.3課題研究的目的與意義 42系統(tǒng)的設(shè)計 52.1需求分析 52.2數(shù)據(jù)庫的設(shè)計 52.2.1簽到模塊 52.2.2問答模塊 72.2.3課件下載模塊 83功能實現(xiàn) 93.1微信對接服務(wù)器 93.2學生簽到功能實現(xiàn) 103.2.1數(shù)據(jù)初始化 103.2.2學生綁定 123.2.3學生簽到 153.2.4查看歷史記錄 293.2.5增加與刪除學生 313.3問答系統(tǒng) 353.3課件下載 393.4刪除課程 413.5下載簽到excel數(shù)據(jù)表格 434.總結(jié) 44結(jié)論 44

1.緒論1.1課題的研究背景如今的互聯(lián)網(wǎng)已經(jīng)滲透到各行各業(yè)，人們基本上都在使用微信，高校學生使用微信也十分的普及。在高校老師上課期間，課堂查勤往往會占據(jù)大量的時間與精力，并且可能還會使得同學們很抵觸，然而現(xiàn)在基本所有同學都有微信app，于是可以結(jié)合微信公眾號的優(yōu)點，同學們只需要在微信上面動動手指，就可以進行自動查勤，老師也可以很方便地了解出勤率。另外，老師的課件一般都不太好分享，為了解決這個問題，可以自動在微信公眾號里面回復下載地址。由于老師與同學一周見面的機會很少，答疑很不方便，故開發(fā)一個留言答疑的功能，方便老師進行答疑。由此可以增進師生之間的聯(lián)系，極大提高課堂效率。1.2國內(nèi)研究現(xiàn)狀由于基于微信號的教學管理系統(tǒng)很熱門，故研究得頗多。比如師生互動功能[1]的實現(xiàn)，當學生關(guān)注老師的微信公眾號以后，微信公眾號具有以下功能：實時消息管理，群發(fā)消息，素材管理，用戶管理。該系統(tǒng)的數(shù)據(jù)庫的設(shè)計思路是：數(shù)據(jù)庫中主要的數(shù)據(jù)表包括班級信息(class)、科目信息(subject)、學生信息(student)、成績信息(score)、查詢?nèi)罩?log)。其他信息(如介紹性文字、課程表、文件鏈接地址等)均以文本文件的形式存放，不在關(guān)系數(shù)據(jù)庫中存儲。該系統(tǒng)主要實現(xiàn)了以下功能：圖1.1功能菜單表還有圖書館微信服務(wù)平臺的設(shè)計與實現(xiàn)[2]，通過調(diào)用接口實現(xiàn)了以下功能：查詢導管人數(shù)，剩余座位，圖書借閱信息等。該功能后臺開發(fā)使用的是asp，如下圖所示：圖1.2圖書館微信服務(wù)平臺的設(shè)計與實現(xiàn)功能微信多人二次開發(fā)中轉(zhuǎn)平臺及其在教學上的應(yīng)用[3]，該系統(tǒng)實現(xiàn)的功能是為解決教學中多人共享微信公眾賬號進行二次開發(fā)的需求，通過掃描帶參數(shù)的二維碼區(qū)分微信用戶并進行XML數(shù)據(jù)的轉(zhuǎn)發(fā)，使用PHP開發(fā)出一個可供多人同時進行微信二次開發(fā)的中轉(zhuǎn)平臺，滿足教學和企業(yè)中多人共享微信公眾賬號進行二次開發(fā)的要求。其主要實現(xiàn)過程是利用一個中轉(zhuǎn)平臺，先在該平臺上存儲將每個開發(fā)人員的微信號與他的電腦的ip地址存儲為一條記錄，這樣便可以區(qū)分每一個開發(fā)人員，通過該平臺實現(xiàn)共享一個微信號。圖1.3中轉(zhuǎn)平臺的功能由此可見：基于微信的教學管理系統(tǒng)處于正在欣欣向榮地發(fā)展。故引出了本論文的研究。1.3課題研究的目的與意義在各大高校范圍內(nèi)微信的使用量與日俱增的同時，利用微信公眾平臺所研制的基于微信平臺的學生管理系統(tǒng)將是未來學生信息管理的一大趨勢。基于微信公眾號開發(fā)一個簽到系統(tǒng)，方便老師進行查勤，老師也可以很方便地了解出勤率。另外，老師的課件一般都不太好分享，為了解決這個問題，可以自動在微信公眾好里面回復下載地址。由于老師與同學一周見面的機會很少，答疑很不方便，故開發(fā)一個留言答疑的功能，方便老師進行答疑。由此可以增進師生之間的聯(lián)系，極大提高課堂效率。開發(fā)本系統(tǒng)可以提升學生與老師的互動能力，提高課堂效率，任課老師可以很方便地了解學生出勤率，在線回答學生提問等，使得微信公眾平臺成為課程教學手段的有益補充。通過該系統(tǒng)的設(shè)計與開發(fā)，可以了解微信公眾號后臺與服務(wù)器交互原理，熟悉使用PHP與MySQL語句，加強對JavaScript語言的掌握。最終可有效提高對項目需求整理、代碼編寫、軟件測試等開發(fā)流程有一個全面清楚的認識。2系統(tǒng)的設(shè)計2.1需求分析由于高校老師上課時點名簽到的頻繁，需要浪費大量的時間在上面，故為了解決這個問題，開發(fā)一個簽到點名模塊，幫助老師完成點名；老師與學生一周見面機會很少，為了更好幫助老師解答同學們的問題，提高課堂質(zhì)量，開發(fā)一個問答模塊，使得學生可以問問題，老師可以針對具體問題進行解答；老師上課時的課件一般都是采用u盤的形式傳播，這種傳播方式效率低下，還很可能造成計算機病毒的肆虐，故開發(fā)一個課件下載模塊，方便同學們進行課件下載。2.2數(shù)據(jù)庫的設(shè)計2.2.1簽到模塊本系統(tǒng)數(shù)據(jù)庫的設(shè)計需要考慮到：本系統(tǒng)涉及到綁定時學生信息的驗證，簽到時學生信息的拉取，并且1個學生可能選擇一個老師的多門課程，一門課程會被多個學生同時選擇，故至少需要3個表（即下面的students表，course表，course_n_student表），在學生信息這一個表中，由于要實現(xiàn)一個學生只能為一個同學簽到，在服務(wù)器接收微信服務(wù)器傳過來的hash加密后的用戶微信號是唯一的，可以把某一位同學的微信號與他的學號信息一起存儲來實現(xiàn)微信號與學號的綁定，另外還要存儲該名學生的信息，比如姓名，班級名稱，并命名為students表，由于學生的學號是唯一的，故可以作為主鍵，用以識別每一條記錄（即每一個學生），模式如下所示：students(studentid,openid,name,classname)//下劃線表示該屬性的該表的主鍵并且在導入學生信息的時候，用戶的微信號即openid是未知的并且是一個字符串，故建立表的時候設(shè)置為NULL,string類型studentid雖然是一個數(shù)字，但是由于太長，會被sql省略掉后面的幾位數(shù)字，故把studentid也存儲為string類型，name，classname也是string類型，并且不能為空。該表是全局信息，是簽到時，學生問題時的依據(jù)。創(chuàng)建的students表格屬性說明如下：表2.1：學生信息表屬性類型主鍵默認值自增注釋studentidstring是非空否學生學號openidstring否空否微信號namestring否非空否學生名字classnamestring否非空否學生所在班級為了記錄老師初始化數(shù)據(jù)時(即上傳excel表格時)傳上來的課程，建立course表，并且在程序前后臺交互執(zhí)行過程中，都以id的形式來指代課程名字，只有在讀取課程時才需要來該表讀取課程名字。故現(xiàn)在course表已經(jīng)有兩個屬性：courseid(類型為int),coursename(類型為string），由于老師管理頁面前端代碼在讀取課程列表時要顯示課程人數(shù)，故增加一個屬性studentnum來記錄該門課程的總?cè)藬?shù)，設(shè)置為int類型；另外為了防止學生可以在任意時刻簽到，系統(tǒng)設(shè)定為只有在老師開啟該門課程的簽到后才能進行簽到，可以在course里增加一個屬性isstart來表示老師是否開啟了該門課程的簽到。簽到時首先老師的管理頁面把某門課程的isstart值設(shè)置為1，待計時結(jié)束后再置為0。學生簽到時，php程序來讀取對應(yīng)課程的isstart值，為1說明開啟了簽到，然后進行簽到，為0說明簽到還沒有開始。故course表完整的模式是：course(courseid,coursename,studentnum,isstart)，并且courseid采用自增的形式，只要上傳一門課程后該門課程的courseid就加1，保證每條記錄的唯一性。如圖表2表2.2：課程信息表屬性類型主鍵默認值自增注釋courseidint是非空是課程idcoursenamestring否非空否課程名稱studentnumstring否非空否學生總?cè)藬?shù)isstartint否0否學生所在班級現(xiàn)在要把兩個表建立聯(lián)系，即建立某位學生選擇了該門課程這種聯(lián)系。故建立course_courseid_student表，其中的courseid是course里面某門課程的courseid屬性值，該表使用一個自增屬性orderid來作為主鍵唯一區(qū)分該表中每一條記錄(int型)，courseid表示該名學生選擇的課程對應(yīng)的id值，即course表中的courseid，studentid是選擇該門課程的學生學號，上面已經(jīng)說了，是string類型。如下表所示：表2.3：學生簽到信息表(tag后面的n是第幾次簽到)屬性類型主鍵默認值自增注釋orderidint是非空是學生選擇idcourseidint否非空否課程idstudentidstring否(外鍵)非空否學生idtagnint否0否學生是否簽到tag(n+1)int否0否學生是否簽到至此，就建立了學生綁定微信號，并選擇課程的基礎(chǔ)功能表，上傳課程excel表格時，php程序先依次存儲所有學生信息于students表中，再在course中錄入該門course的信息，然后再去獲取最大的courseid(即當前上傳的課程的id)，使用這個courseid去建立course_courseid_student表，填入對應(yīng)的學生信息，這種動態(tài)表名的設(shè)計實現(xiàn)起來很方便，并且無論多少門課程都可以輕松搞定，并且數(shù)據(jù)庫中沒有任何冗余，所有申請的空間都被使用完了，php程序就使用這幾個表來實現(xiàn)。上傳excel表格后數(shù)據(jù)庫中表結(jié)構(gòu)如圖所示：圖2.1數(shù)據(jù)庫中表的結(jié)構(gòu)2.2.2問答模塊本系統(tǒng)的功能是實現(xiàn)老師與學生一問一答，即學生在微信號里提出問題，然后把問題存儲在數(shù)據(jù)庫，老師查看這些問題的時候進行回復或者修改。學生信息綁定在2.2.1中已經(jīng)進行描述了。學生提問時，建立一個studentqus表，其中的quid，表示每一條提問的識別依據(jù)，是一個int類型。因為在拉取問答時要展示學生姓名，這里使用studentid來表示，等展示時才換為學生名字，另外還需要展示學生提問時間，故增加questiontime，存儲提問時間，類型為datetime，要保存該條提問對應(yīng)的老師回復信息，增加answer屬性，類型為string，以及老師回復時間，answertime，也是datetime類型。完整的表格如下：表2.4：回答問題表格屬性類型主鍵默認值自增注釋quidint是非空是學生問題idquestionstring否非空否問題描述studentidstring否(外鍵)非空否學生idanswerstring否空否老師答案answeertimedatetime否timestamp否老師回答時間questiontimedatetime否timestamp否提問時間數(shù)據(jù)庫中的表如圖所示：圖2.2：數(shù)據(jù)庫中studentqus表的結(jié)構(gòu)2.2.3課件下載模塊本系統(tǒng)所有課程的課件存放于云盤上，一門課對應(yīng)有一個url來指示其課件在云盤的存儲地址，故建立courseurl表。id唯一識別每一條記錄，url表示該門課程的科技地址，courseid是外鍵，標識某一門課程。表4課件下載的url屬性類型主鍵默認值自增注釋idint是非空是課件地址idurlstring否非空否課件地址courseidint否(外鍵)非空否課程id3功能實現(xiàn)3.1微信對接第三方服務(wù)器微信公眾號提供了開發(fā)者功能，可以先登錄電腦的微信公眾平臺完成對應(yīng)第三方服務(wù)器url的填寫，如圖：圖3.1微信公眾號后臺配置Token的作用是：驗證每一個微信的post請求該url的server是否是可信的。驗證的流程圖如下：圖3.2微信驗證流程3系統(tǒng)開發(fā)相關(guān)工具3.1系統(tǒng)開發(fā)過程中使用的關(guān)鍵技術(shù)3.1.1jquery技術(shù)jquery是一種輕量型的跨瀏覽器的框架，由于早期瀏覽器的標準不統(tǒng)一，開發(fā)人員在進行前端開發(fā)時，需要兼容各大主流瀏覽器，導致很費時費力，于是jquery出現(xiàn)了，統(tǒng)一抽象了dom操作，為開發(fā)人員的開發(fā)效率帶來了很大的提高。3.1.2響應(yīng)式設(shè)計技術(shù)由于現(xiàn)在手機的流行，然而手機端的屏幕尺寸太多，導致在一個手機上看起來顯示正常的頁面在另一個手機上就會出現(xiàn)很嚴重的排版錯誤，為了解決這個問題。css3帶來了新的特性，media屬性，可以通過檢測屏幕的寬高，依次來設(shè)計具有各種手機尺寸的頁面。本論文的學生頁面為了匹配學生的各種手機屏幕大小，使用到了該技術(shù)。3.1.3ajax技術(shù)ajax技術(shù)最初是用來解決xml格式的數(shù)據(jù)的傳輸問題的，后來隨著瀏覽器的不斷迭代更新，ajax幾乎可以用來傳輸任何格式的文件，包括json字符串，text文件，media文件。它的優(yōu)點是可以在不刷新頁面的情況下從后臺獲取數(shù)據(jù)并由程序呈現(xiàn)到用戶的眼前，故體驗非常好，但是為了保證安全，它是被禁止跨域的。本論文涉及到的與后臺數(shù)據(jù)交互統(tǒng)一使用jquery封裝過的ajax函數(shù)。3.1.4MD5加密技術(shù)微信服務(wù)器與第三方的服務(wù)器為了保證通信的安全，使用了這一加密技術(shù)。具體可見后文。3.2后臺技術(shù)后臺語言使用php語言處理后臺邏輯并與數(shù)據(jù)庫進行交互，php與前端交互統(tǒng)一使用json格式的字符串。Php作為一種執(zhí)行效率高的語言，并且天生面向?qū)ο?。用來開發(fā)服務(wù)器端程序具有很強的擴展性與維護性。后臺數(shù)據(jù)庫選擇mysql，作為一種關(guān)系型數(shù)據(jù)庫，它的查詢效率非常的高。3.3開發(fā)工具與開發(fā)環(huán)境3.3.1本地環(huán)境配置為了能夠進行更加快速的開發(fā)，使用了編輯器sublime以及它的各種插件。它支持各種語言的編輯。本地php與mysql配置使用的是wamp集成環(huán)境。抓包工具使用的是fiddler，該工具可以完成域名變更，設(shè)置代理，遠程代理，模擬網(wǎng)速，模擬瀏覽器等功能，非常強大，在本論文所涉及的程序調(diào)試過程中，該工具幫助巨大。切圖使用的軟件是photoshop，本論文的前端頁面所涉及的圖片編輯使用的正是該工具。壓縮工具使用的是構(gòu)建于nodejs上的grunt工具包，由于本程序是在手機移動網(wǎng)絡(luò)上使用，會出現(xiàn)網(wǎng)絡(luò)響應(yīng)緩慢的問題，故程序后期的前端性能使用到了該工具。代碼調(diào)試工具使用的是chrome的開發(fā)者工具，與本人的手機。3.3.2服務(wù)器端環(huán)境配置本論文使用的服務(wù)器是新浪sae，可以先注冊sae賬號并開通一個應(yīng)用。由于新浪的代碼是分布式布置的，意思就是你本次請求的php程序與下一次請求的程序位于不同的服務(wù)器上，舉個例子：假設(shè)現(xiàn)在有A、B、C、D四臺服務(wù)器。用戶上傳一張圖片到A服務(wù)器，第二次訪問請求可能到達B服務(wù)器，此時將無法獲取保存在A服務(wù)器上的圖片。轉(zhuǎn)而SAE使用MemcacheX、Storage等存儲型服務(wù)代替?zhèn)鹘y(tǒng)IO操作，效率比傳統(tǒng)IO讀寫操作高，有效解決因IO瓶頸導致程序性能低下的問題。另外，很多網(wǎng)站被攻擊都是因為服務(wù)器有寫的權(quán)限，程序代碼能被黑客修改，SAE禁止寫操作，也提升了服務(wù)器的安全性。所以SAE為了提升性能和安全，禁止本地IO寫操作。開發(fā)者可以使用Storage，Memcache，KVDB等服務(wù)存儲需寫入的數(shù)據(jù)。實際過程是先傳到新浪云的Storage服務(wù)器上，故本論文使用Storage服務(wù)來實現(xiàn)文件的上。開啟后創(chuàng)建一個名為excel的bucket，其實就是在云端創(chuàng)建了一個名為excel的文件夾，如圖所示：3.1開啟新浪Storage由于本程序的對象是學生，不需要很高的io并發(fā)請求，故使用的數(shù)據(jù)庫是新浪sae提高的共享型數(shù)據(jù)庫。開啟實例如圖所示3.2開啟共享型數(shù)據(jù)庫4.2學生簽到功能實現(xiàn)4.2.1數(shù)據(jù)初始化實際上是實現(xiàn)excel表導入數(shù)據(jù)庫。學生信息在教師從教務(wù)處下載下來的excel表格中，保證教師一上傳excel表格馬上數(shù)據(jù)庫中就會有數(shù)據(jù)，同時保證良好的交互性。實現(xiàn)上傳過程中的loading效果，上傳完成后提示上傳成功，并自動關(guān)閉上傳文件彈出層。圖4.1教師上傳的excel表的結(jié)構(gòu)初始化時，老師點擊增加課程按鈕后，首先彈出一個輸入框，用戶輸入文件，一旦輸入框檢測到change事件，馬上向后臺發(fā)起ajax請求，（此時使用ajax提高了用戶體驗），將文件傳給后臺，。本論文使用Storage服務(wù)完成文件的上傳。先開啟Storage服務(wù)，先上傳到Storage服務(wù)器，由于讀取excel的PhpExcel框架是采用相對路徑的形式來讀取文件的，sae上獲取相對Storage路徑是使用"saestor://"字符串。讀入進去后可以獲取一個關(guān)聯(lián)數(shù)組。然后調(diào)用自己編寫的php程序段來處理，獲得學生信息，然后載入創(chuàng)建表的sql語句并連接數(shù)據(jù)庫執(zhí)行，插入以上信息，即完成學生信息與課程信息的錄入。完整的流程圖如下所示：圖4.2老師上傳excel表的流程圖4.2.2學生綁定本系統(tǒng)利用微信來完成學生信息的綁定，首先學生關(guān)注教師的公眾賬號，此時后臺接收到微信服務(wù)器post過來的xml數(shù)據(jù)，并且里面的數(shù)據(jù)會指示這是一個訂閱事件，然后后臺判斷之后，將主菜單返回給微信服務(wù)器，微信服務(wù)器解析該xml包里面的信息并進行展示，該xml的形式與微信回復消息界面如圖所示：圖4.3學生訂閱賬號時的推送消息圖4.4微信服務(wù)器推送的xml信息參數(shù)描述 toUserName開發(fā)者微信號fromUserName發(fā)送方賬號createtime消息創(chuàng)建時間msgEvent消息類型(event)Event事件類型，subscribe(訂閱事件)圖4.5xml包中參數(shù)解釋學生回復2，系統(tǒng)向?qū)W生發(fā)送綁定鏈接，學生點入該鏈接進行綁定，界面如圖：學生在該界面輸入學號姓名，ajax提交到后臺，完成綁定。流程如下：圖4.6綁定時學生的流程圖由于openid是唯一的，故一個學生可以綁定一個openid，這里將openid聯(lián)合token(本論文選擇的token是kui)進行加密的好處在于，有利于安全性，另外，由于該openid會被包含在發(fā)送給學生的鏈接里面，然后學生可以隨意更改該openid，故還可以防止學生進行偽造，因為學生一旦更改openid后，會與原來的openid不匹配，從而本次請求就失效了。接下來學生點擊該鏈接進去后，看見的界面如圖所示，該頁面的執(zhí)行流程圖如上圖所示圖4.7學生點擊該鏈接的界面學生在填寫完自己的信息以后，然后點擊綁定按鈕，前端JavaScript先判斷輸入是否為空，是空的話提示用戶輸入為空，并且判斷學號那一行是否為數(shù)字，空的話提示用戶輸入非法，然后ajax將之前鏈接里的openid與自己的學號信息提交到后臺程序，后臺程序再進行判斷，先判斷信息是否完整，否則返回參數(shù)缺失異常，然后該學生的賬號就會出現(xiàn)以下幾種情況：該openid是否已經(jīng)進行過了綁定；該課程的初始化信息里是否有該名同學；學生學號與名字是否對應(yīng)；綁定成功；綁定時實際是在students表中選取對應(yīng)于該student的記錄。4.2.4學生簽到學生簽到時的設(shè)計思路是：首先教師進入圖4.10的左1管理頁面，點擊選擇一門課程，然后客戶端JavaScript程序獲取該門課程的信息（載入渲染課程列表時把該門課程的courseid與寫入對應(yīng)的dom屬性里），進入該門課程的開啟簽到頁面（右圖）,點擊時間選擇后，彈出時間選取框。選取時間后點擊開始簽到按鈕，發(fā)送包含當前課程簽到信息的ajax請求到后端，后臺置course表中對應(yīng)課程的isstart值為1，由于客戶端是無法知道第幾次簽到的，故在后端創(chuàng)建一個表course_n_log來記錄該門課程的每一次簽到具體時間，并且還有一個查看歷史記錄頁面會使用到某門課程的簽到時間這一信息，該表模式為：course_n_log(tag,createtime)表4.1：course_n_log數(shù)據(jù)格式屬性類型主鍵默認值自增注釋tagint是非空是某門課程的第幾次簽到crenttimedatetime否非空否簽到時間圖4.8數(shù)據(jù)庫該course_1_log表的結(jié)構(gòu)并且給course_courseid_student增加一列，比如當前是第m次簽到，就置為tagm，然后初始化為0，表示學生還沒有開始簽到。再創(chuàng)建一個表格currentcourse，只記錄一條記錄，每一次使用時先把表清空再使用，來記錄當前的或者上一次的某門課程的第幾次簽到，方便教師簽到頁面的其它請求當前簽到課程信息的組件來獲取信息，并且記錄當前是第幾次簽到完全由后臺程序自動管理，減少了與前端的邏輯交互，降低了程序的開發(fā)難度。該表的模式是：currentcourse(couseid,tag)表4.2：currentcourse數(shù)據(jù)格式屬性類型主鍵默認值自增注釋courseidint是非空是正在簽到的課程idtagstring否非空否某門課程的第幾次簽到標記圖4.9數(shù)據(jù)庫中currentcourse的結(jié)構(gòu)說明：其中的tag用來直接找到course_courseid_student中的那次簽到圖4.10老師開啟簽到頁面該過程的流程圖如下所示圖4.11服務(wù)端客戶端簽到過程中的流程客戶端在發(fā)起ajax請求(包含簽到時間，簽到動作，簽到課程)到服務(wù)器端的同時，開始倒計時，并且以5s中一次的頻率來實時輪詢一個簽到人數(shù)與未簽到人數(shù)的接口a，在開啟簽到時，必須注意：假如之前已經(jīng)計過一次時了，那么編輯模式還打開著，故需要先把編輯模式給關(guān)掉，這樣才沒有邏輯錯誤。然后把它展現(xiàn)到頁面上，在服務(wù)器端發(fā)送關(guān)閉成功指令時，客戶端又發(fā)起對另一個接口的請求來獲取當前已經(jīng)簽到與未簽到的所有學生列表b，并且把它渲染到頁面上，并且自動綁定上所有事件，方便老師進入編輯模式選取相應(yīng)學生并且點擊刪除完成操作，比如圖中的顯示未到詳情，編輯模式按鈕所對應(yīng)的事件。然后打開編輯模式，方便老師對已經(jīng)到的同學與沒有到的同學進行相互轉(zhuǎn)換，此時客戶端的執(zhí)行流程如下：圖4.12前端頁面在打開簽到之后的流程圖a接口主要是查詢已經(jīng)簽到的學生的數(shù)目，后臺處理流程圖如下：圖4.13a接口的處理流程在老師手機客戶端到計時終點時，發(fā)起對b接口的查詢，查詢已簽到與沒有簽到的同學信息，先ajax去查詢b接口，然后把獲取的json數(shù)據(jù)格式的列表先判斷當前顯示未到詳情這個按鈕的狀態(tài)后然后使用模板引擎渲染進去，使用模板引擎做的好處在于不需要操作大量的dom元素，不需要去拼接很容易出錯的字符串。流程圖如下：圖4.14獲取學生簽到與未簽到信息接口此時編輯模式已經(jīng)打開并使能，當教師按下編輯模式時，如圖所示，雖然看起來似乎每一個table都增加了一個td單元格，但是由于此時有大量的行，每一行都要增加一個td元素，由于在JavaScript里，操作dom是最耗費性能的操作，所以假如這么做的話會造成性能的急劇下降，本論文選擇了一種很好的方法，先將這些td元素隱藏，并且在css樣式文件里寫好當table切換為active類時顯示這些元素，這樣在單擊編輯模式這個按鈕時，為該table加上active類名，這些td元素就被顯示出來了。圖4.15按下編輯按鈕時的界面當老師點選學生后，底部的移動到已簽到列表這幾個文字加粗加黑了，按住這個按鈕后，又一次發(fā)起了對后臺的ajax請求（包含學生學號，action，courseid等信息），只是這次與前兩次不同的是，是對信息的更改。并且該門課程已經(jīng)簽到與沒有簽到學生的所有信息存在于一個全局變量里面，點擊按鈕切換顯示已到與未到學生新時是用這個變量里的信息在進行實時渲染。在移動成功之后，會去重新拉取學生已經(jīng)簽到信息與沒有簽到信息詳情，同時前端刪除選中的元素，這樣點擊切換顯示未到人數(shù)時，由于此時該變量信息已經(jīng)和服務(wù)器移動學生后的信息保持同步，故此時拿著這個更新的數(shù)組再去更新顯示的列表(view)已經(jīng)是正確了的。并且還重新查詢了已簽到與未簽到的人數(shù)，來進行渲染，故人數(shù)信息也與服務(wù)器端保持同步了。顯示是正確的，執(zhí)行流程如下：圖4.16開啟簽到頁面更改學生簽到信息流程圖此時教師已經(jīng)開啟了簽到再來說下學生客戶端的。先解釋為什么不使用學生發(fā)送指令直接進行簽到？答案是為了更好的用戶體驗，后文會有詳細介紹。學生首先發(fā)送1，后臺會先進行關(guān)鍵字匹配，然后進入對應(yīng)的業(yè)務(wù)邏輯，先判斷該名學生是否完成了綁定，如果沒有的話返回給學生綁定鏈接，然后再判斷是否已經(jīng)開啟了簽到，然后再判斷他是否是該門課程的學生，然后發(fā)送包含一些配置信息的url，這些配置信息包括，創(chuàng)建此url的時間戳，當前正在簽到的課程名稱以及課程id，和本人加密后的openid，其中的時間戳是為了判斷該鏈接是否已經(jīng)失效的憑證，后面會詳細介紹該時間戳是怎么判斷該鏈接已經(jīng)失效的，另外的課程名稱參數(shù)與課程id參數(shù)是為了進入該頁面后直接用來寫標題，這樣就不需要再去發(fā)起ajax請求去獲取當前正在簽到課程了，節(jié)省了一次請求，也提高了頁面的響應(yīng)速度，但是此時的課程名稱因為是中文，所以不能直接傳，后臺php先進行相應(yīng)的編碼，等到達客戶端，再使用JavaScript進行解碼，再次變?yōu)橹形模搖rl如下圖所示：圖4.17學生發(fā)送指令1后的url界面獲取該url的流程圖如下：圖4.18學生獲取簽到鏈接的流程圖為什么要設(shè)計成該鏈接會失效？防止本次課程獲取的鏈接在其它課程被使用，但是學生會發(fā)現(xiàn)在進入該鏈接后信息并沒有得到更新（因為上文已經(jīng)提到，該頁面的展示信息依據(jù)是該鏈接里的參數(shù)），給學生帶來困惑；另外，體現(xiàn)一種老師與學生的互動性，提高上課的積極性。當學生點入該鏈接以后，JavaScript代碼會首先解析該url獲取courseid，時間戳參數(shù)，coursename參數(shù)，并且將該url里面的時間戳與現(xiàn)在的時間戳進行比較，假如已經(jīng)大于1.5小時，則判斷該鏈接已經(jīng)失效，顯示失效頁面，如圖圖4.19左圖學生簽到失效頁面；右圖簽到鏈接有效時的頁面否則該鏈接還有效，此時頁面如圖4.19右圖所示該頁面加載完成后，此時JavaScript會先進行事件綁定，以便用戶進行交互。該頁面綁定了手機瀏覽器devicemotion事件，當手機搖動時就會觸發(fā)該事件，這樣用戶就可以與手機產(chǎn)生交互，為了更好的用戶體驗，當用戶搖動手機時，觸發(fā)該事件后，會播放搖動的音樂，但是由于有些同學的手機并不支持該事件，故為了讓這部分同學也順利能夠簽到，更為了增加該系統(tǒng)的冗余度，也綁定了中間部位的那個圖片的click事件，一旦用戶點擊該圖片，也會發(fā)起簽到請求到后臺，但是實踐表明同學們簽到時都在教室里面，并且有很多同學同時使用手機網(wǎng)絡(luò)，造成手機網(wǎng)絡(luò)信息不穩(wěn)定，網(wǎng)速很慢，故用戶可能會在點擊一次之后，已經(jīng)向服務(wù)器端發(fā)起了ajax請求，只是響應(yīng)還沒有回來而已，此時用戶可能會覺得之前的一次點擊無效，故還會重新再次點擊一次該圖片，于是又發(fā)起了一個ajax請求到后臺，而第一次實際上簽到已經(jīng)成功了，故第二個ajax請求是一種浪費，為了避免這種情況的出現(xiàn)，可以在用戶點擊該圖片后發(fā)送ajax請求之前覆蓋一個遮擋層(顯示加載中增強用戶體驗)，如圖所示：圖4.20用戶發(fā)起ajax請求時的遮擋層當ajax請求成功后，再把該遮蓋層給去掉，完成交互。但是，現(xiàn)在為了防止用戶在成功簽到完成后再次發(fā)起請求到服務(wù)器端，可以設(shè)置一個cookie指示簽到是否成功。當用戶再一次點擊簽到圖標或者搖一搖觸發(fā)ajax程序之前，先判斷有沒有該cookie，有的話就給用戶提示信息：您已經(jīng)完成了簽到了，沒有的話說明還沒有進行過簽到或者上一次簽到失敗，發(fā)起ajax請求。本論文中該cookie的過期時間設(shè)置為1.5小時。即1.5小時后該cookie自動被刪除，又可以進行下一次簽到了，1.5小時原因不細說。該過程前端的流程圖如下：圖4.21學生簽到客戶端與服務(wù)器端的流程圖（2）后臺響應(yīng)ajax時，首先會判斷是否有課程的isstart值為1，沒有的話返回還沒有課程在簽到，再接著判斷是否該名學生進行綁定，為什么還要判斷？因為可能學生會更改url里面的openid，導致服務(wù)器里查不到該條記錄，出現(xiàn)異常；再獲取當前正在簽到的課程，并判斷該門學生是否是該門課的學生，不是的話返回沒有簽到資格；然后再判斷是否已經(jīng)進行過簽到，如果是的話返回你已經(jīng)進行過簽到了；然后才是簽到成功。流程圖如上。4.2.4查看歷史記錄載入該頁面時，跟教師的簽到頁面ajax獲取課程列表，模板渲染邏輯與模板是一樣的，所以可以完全復用前端與后端代碼。前后端處理流程如下圖：圖4.22渲染課程列表流程圖渲染完成后，就使用事件代理來綁定事件。為什么使用事件代理？它的好處在于可以減少綁定事件過程中查找dom的時間，并且可以減少渲染引擎與JavaScript引擎之間的聯(lián)系，這樣可以減少內(nèi)存使用，提高了頁面的響應(yīng)速度。當用戶點擊任意一門課程列表時，又發(fā)起ajax請求去后臺查詢該門課程的歷史簽到信息，其實是做了以下幾件事：首先前端傳來courseid，指示當前用戶選擇的是哪一門課程，action指示當前是什么動作，服務(wù)器端先檢查是否確實這兩個參數(shù)，如果沒有的話就拋出異常。否則的話就按照從course_courseid_log（前面已經(jīng)說過，該表是用來記錄courseid這門課程的歷史簽到信息的，其中的courseid取值可以為1,2…）中按照簽到時間由近及遠的順序選取出來并轉(zhuǎn)化為數(shù)組，并json編碼并輸出。圖4.23獲取某門課程歷史信息前端與后端交互流程圖某門課程歷史信息效果圖如下：圖4.24簽到信息歷史記錄當點擊如圖某一次記錄時，又發(fā)起一個包含courseid與指示選取第幾次簽到的tag屬性的ajax去請求后臺的已經(jīng)簽到與未簽到同學信息，該接口與開啟簽到頁面的那個接口幾乎一模一樣，不再詳述。其實，從歷史頁面的第一頁即課程列表頁到某門課程的歷史簽到記錄頁再到詳情頁是一個html文檔，故不支持返回上一頁這個功能。為了實現(xiàn)該功能，可以在進入歷史記錄的課程列表頁面時，加一個hash值#index，進入某門課程的歷史簽到記錄頁時加一個hash為#courseinfo，進入詳情時加一個hash為#detail，然后可以相當于在歷史頁面中就有了4條記錄，然后監(jiān)聽瀏覽器的hashchange事件，一旦監(jiān)聽到該事件，判斷對應(yīng)的hash值，實現(xiàn)一個頁面的隱藏與另一個頁面的展示，由此便可以實現(xiàn)該單頁應(yīng)用返回歷史記錄中某一頁的功能。4.2.5增加與刪除學生也是先要渲染課程列表，因為先要展示要刪除添加哪門課程的學生。與前面一樣。點擊某一門課程后，進入編輯該門課程學生的頁面，如圖所示：圖4.25增加與刪除學生界面因為在老師的上課途中，總是有些學生可能因為某些原因不選擇該門課程或者是剛剛選進來但是卻沒有數(shù)據(jù)庫里的記錄，手動去數(shù)據(jù)庫里更改的話要該很多個地方，為了解決該問題，故開發(fā)了該接口，方便老師添加與刪除學生。刪除學生的程序的執(zhí)行流程是，先選擇要刪除的學生（支持多選），然后點擊刪除，彈框讓確認是否刪除？然后發(fā)起ajax請求后臺完成刪除該組學生的請求，成功執(zhí)行的話返回給前端執(zhí)行成功，前端知道執(zhí)行成功之后，從dom中把選中的學生移除，給予用戶即時的刪除體驗。刪除時要注意必須把刪除students中的sql語句作為第一條，因為可能該門課程的簽到還并沒有開始過，故不會存在后面的curse_courseid_student表(存儲某門課程的學生與每個學生的簽到信息)和course_courseid_log表(存儲某門課程的簽到時間信息)，此時如果把students表的刪除操作放在后面會造成刪除失敗。流程圖如下：圖4.26刪除學生流程圖新增學生功能，首先用戶進入該頁面點擊添加學生，彈出添加學生的彈框，要求輸入學生的班級，學號，姓名信息，用戶輸入后，會進行判斷4個信息是否為空，并且使用正則表達式測試班級信息，不符合規(guī)范的話會返回輸入非法，為何要進行過濾，因為在顯示學生詳細信息頁面，會過濾每一個學生的班級信息，使得只留下班級代號，故必須首先保證該輸入的格式是正確的，才能保證以后過濾顯示時的正確性。當輸入后點擊確定按鈕時，發(fā)送攜帶有學生信息的ajax請求到后臺服務(wù)器，后臺程序首先插入該學生到students中，再插入該學生記錄到course_courseid_student中，最后才是course_courseid_log中，之所以按照這樣的順序，原因和上面是一樣的。添加完成之后，返回json編碼后的添加成功信息。新增學生的彈框如上圖4.25，下圖所示為流程圖：圖4.27增加學生的流程圖4.4問答系統(tǒng)問答系統(tǒng)主要是要實現(xiàn)的功能如下：學生在微信公眾號里提問，并且還能夠查看問答信息，老師可以對問題進行解答，已經(jīng)解答問題與未經(jīng)解答問題使用tab切換進行展示。學生在微信公眾好頁面回復3.請問這個問題怎么解決？消息會被推送到微信服務(wù)器，再推送到第三方的服務(wù)器。表的結(jié)構(gòu)前面已經(jīng)說了，主要流程如下，消息被推送到開發(fā)者在微信公眾號后臺填寫的url上時，會根據(jù)關(guān)鍵字進入提問模塊，在該模塊，首先把3.這兩個字符串移除，只剩下問題，然后為了安全移除xss，然后判斷該用戶是否已經(jīng)進行了綁定，再判斷問題字符串是否為空，或者長度大于500的話，就返回，就添加一條記錄到studentqus中。流程如下：圖4.28學生提問流程當學生回復5時，關(guān)鍵字匹配成功，返回問答的地址給學生，學生點進去后，綁定JavaScript事件，ajax獲取問題列表，對時間做一下簡單處理，使得出現(xiàn)幾小時前，幾天前這種更接近人類習慣的時間顯示格式，交給模板引擎進行渲染。再添加進dom。老師的管理頁面由于牽涉到回復，故要復雜一些。首先，ajax獲取問答列表，按照url里面的isteacher關(guān)鍵字來識別是老師在使用并渲染上添加評論按鈕并綁定事件。當老師點擊添加問答時，動畫渲染出回答輸入框，假如該問題已經(jīng)有答案的話，該輸入框里面已經(jīng)有了上一次提交的答案，否則顯示默認值，請輸入您的回答。為了增強用戶體驗，使得輸入框的高度能夠隨著用戶的文字增加而自動改變高度，使用了一個改變默認行為使得能進行編輯的div來作為輸入框。并且為了增強用戶體驗，在點擊確定時，在ajax提交過程中，為該按鈕加一個加載中的動畫背景，結(jié)束時再移除該背景，并且為了性能，沒有直接去操作該背景的設(shè)置，而是采用先在css里把類給寫好，在js里切換類，對性能非常友好。當點擊添加回復按鈕時，流程圖如下：圖4.29老師客戶端處理流程服務(wù)器端接收到該ajax請求以后，更改對應(yīng)id的answer字段，在更改成功后顯示回復成功，否則顯示數(shù)據(jù)庫中沒有該問題的id。流程圖如下：圖4.30服務(wù)器端流程圖效果如圖圖4.31老師管理問答頁面效果圖4.4課件下載老師的課件通常會上傳到云盤，可以在上傳后獲取分享鏈接，然后在對應(yīng)的頁面添加上即可，學生回復6可以獲取該鏈接。實現(xiàn)課件的獲取。在pc端處理流程是：先獲