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

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

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