【文章內(nèi)容簡(jiǎn)介】 會(huì)出現(xiàn)很?chē)?yán)重的排版錯(cuò)誤，為了解決這個(gè)問(wèn)題。 css3 帶來(lái)了新的特性 ， media 屬性 ，可以通過(guò)檢測(cè)屏幕的寬高，依次來(lái)設(shè)計(jì) 具有 各種手機(jī)尺寸的頁(yè)面。 本論文的學(xué)生頁(yè)面為了匹配學(xué)生的 各種 手機(jī)屏幕大小，使用 到 了該技術(shù)。 ajax 技術(shù) ajax 技術(shù)最初是用來(lái)解決 xml 格式的數(shù)據(jù)的 傳輸問(wèn)題的 ， 后來(lái)隨著瀏覽器 的不斷迭代 更新 ， ajax 幾乎可以用來(lái)傳輸任何格式的文件，包括 json 字符串， text 文件， media文件。它的優(yōu)點(diǎn)是可以在不刷新頁(yè)面的情況下從后臺(tái)獲取數(shù)據(jù)并由程序呈現(xiàn)到用戶(hù)的眼前，故體驗(yàn)非常好，但是為了保證安全，它是被禁止跨域的。本論文涉及到的與后臺(tái)數(shù)據(jù)交互統(tǒng)一使用 jquery 封裝 過(guò) 的 ajax 函數(shù) 。 MD5 加密技術(shù) 微信服務(wù)器與第 三方的服務(wù)器為了保證通信的安全，使用了這一加密技術(shù)。具體可見(jiàn)后文。 后臺(tái)技術(shù) 后臺(tái)語(yǔ)言使用 php 語(yǔ)言處理后臺(tái)邏輯并與數(shù)據(jù)庫(kù)進(jìn)行交互 ， php 與前端交互統(tǒng)一使用 json 格式的字符串。 Php 作為一種執(zhí)行效率高的語(yǔ)言，并且天生面向?qū)ο?。用?lái)開(kāi)發(fā)服務(wù)器端程序具有很強(qiáng)的擴(kuò)展性與維護(hù)性。 后臺(tái)數(shù)據(jù)庫(kù)選擇 mysql， 作為一種關(guān)系型數(shù)據(jù)庫(kù) ， 它的 查詢(xún)效率非常的高 。 開(kāi)發(fā)工具 與開(kāi)發(fā)環(huán)境 本地環(huán)境配置 為了 能夠進(jìn)行更加快速的開(kāi)發(fā) ， 使用了編輯器 sublime 以及它的各種插件 。 它支持 武漢科技大學(xué)本科畢業(yè)論文 14 各種語(yǔ)言的編輯 。 本地 php 與 mysql 配置使用的是 wamp 集成環(huán)境 。 抓包 工具 使用的是fiddler，該工具可以完成域名變更，設(shè)置代理，遠(yuǎn)程代理，模擬網(wǎng)速，模擬瀏覽器等功能，非常強(qiáng)大 ，在本論文所涉及的程序調(diào)試過(guò)程中，該工具幫助巨大 。 切圖使用的軟件是 photoshop，本論文的前端頁(yè)面所涉及的圖片編輯使用的正是該工具 。壓縮工具使用的是構(gòu)建于 nodejs 上的 grunt 工具包 ，由于本程序是在手機(jī)移動(dòng)網(wǎng)絡(luò)上使用，會(huì)出現(xiàn)網(wǎng)絡(luò)響應(yīng)緩慢的問(wèn)題，故程序后期的前端性能使用到了該工具 。代碼調(diào)試工具使用的是chrome 的開(kāi)發(fā)者工具 ，與本人的手機(jī)。 服務(wù)器端環(huán)境配置 本論文使用的服務(wù)器是新浪 sae， 可以先注冊(cè) sae 賬號(hào)并開(kāi)通一個(gè)應(yīng)用。 由于新浪的代碼是分布式布置的，意思就是你本次請(qǐng)求的 php 程序與下一次請(qǐng)求的程序位于不同的服務(wù)器上，舉個(gè)例子： 假設(shè)現(xiàn)在有 A、 B、 C、 D 四臺(tái)服務(wù)器。用戶(hù)上傳一張圖片到 A服務(wù)器，第二次訪(fǎng)問(wèn)請(qǐng)求可能到達(dá) B 服務(wù)器，此時(shí)將無(wú)法獲取保存在 A 服務(wù)器上的圖片 。轉(zhuǎn)而 SAE 使用 MemcacheX、 Storage 等存儲(chǔ)型服務(wù)代替?zhèn)鹘y(tǒng) IO 操作，效率比傳統(tǒng)IO 讀寫(xiě)操作高，有效解決因 IO 瓶頸導(dǎo)致程序性能低下的問(wèn)題。另外，很多網(wǎng)站被攻擊都是因?yàn)榉?wù)器有寫(xiě)的權(quán)限，程序代碼能被黑客修改， SAE 禁止寫(xiě)操作，也提升了服務(wù)器的安全性。所以 SAE 為了提升性能和安全，禁止本地 IO 寫(xiě)操作。開(kāi)發(fā)者可以使用Storage， Memcache， KVDB 等服務(wù)存儲(chǔ)需寫(xiě)入的數(shù)據(jù)。實(shí)際過(guò)程是先傳到新浪云的Storage服務(wù)器上， 故本論文 使用 Storage服務(wù) 來(lái)實(shí)現(xiàn)文件的上 。開(kāi)啟后創(chuàng)建一個(gè)名為 excel的 bucket，其實(shí)就是在云端創(chuàng)建了一個(gè)名為 excel 的文件夾， 如圖所示 ： 開(kāi)啟新浪 Storage 由于本程序的對(duì)象是學(xué)生 ， 不需要很高的 io 并發(fā)請(qǐng)求 ，故 使用的數(shù)據(jù)庫(kù)是新浪 sae提高的共享型數(shù)據(jù)庫(kù) 。 開(kāi)啟實(shí)例如圖所示 武漢科技大學(xué)本科畢業(yè)論文 15 開(kāi)啟共享型數(shù)據(jù)庫(kù) 學(xué)生簽到功能實(shí)現(xiàn) 數(shù)據(jù) 初始化 實(shí)際上是實(shí)現(xiàn) excel 表導(dǎo)入數(shù)據(jù)庫(kù)。學(xué)生信息在教師從教務(wù)處下載下來(lái)的 excel 表格中，保證教師一上傳 excel 表格馬上數(shù)據(jù)庫(kù)中就會(huì)有數(shù) 據(jù)，同時(shí)保證良好的交互性。實(shí)現(xiàn)上傳過(guò)程中的 loading 效果，上傳完成后提示上傳成功 ，并自動(dòng)關(guān)閉上傳文件彈出層 。 圖 教師上傳的 excel 表的結(jié)構(gòu) 武漢科技大學(xué)本科畢業(yè)論文 16 初始化時(shí)，老師點(diǎn)擊增加課程按鈕后，首先彈出一個(gè)輸入框 ，用戶(hù)輸入文件，一旦輸入框檢測(cè)到 change 事件，馬上向后臺(tái)發(fā)起 ajax請(qǐng)求，（此時(shí) 使用 ajax提高了用戶(hù)體驗(yàn)），將文件傳給后臺(tái)。本論文使用 Storage 服務(wù)完成文件的上傳。先開(kāi)啟 Storage 服務(wù)，先上傳到 Storage 服務(wù)器，由于讀取 excel 的 PhpExcel 框架是采用相對(duì)路徑的形式來(lái)讀取文件的， sae 上獲取相對(duì) Storage 路徑是使用 。 讀入進(jìn)去后可以獲取一個(gè)關(guān)聯(lián)數(shù)組 。 然后調(diào)用自己編寫(xiě)的 php 程序段來(lái)處理 ， 獲得學(xué)生信息 ， 然后載入創(chuàng)建表的 sql 語(yǔ)句 并連接數(shù)據(jù)庫(kù)執(zhí)行，插入以 上信息，即完成學(xué)生信息與課程信息的錄入。完整的流程圖如下所示： 圖 老師上傳 excel 表的流程圖 武漢科技大學(xué)本科畢業(yè)論文 17 學(xué)生綁定 本系統(tǒng)利用微信來(lái)完成學(xué)生信息的綁定 ， 首先學(xué)生關(guān)注教師的公眾賬號(hào) ， 此時(shí)后臺(tái)接收到微信服務(wù)器 post 過(guò)來(lái)的 xml 數(shù)據(jù) ，并且 里面的數(shù)據(jù)會(huì) 指示這是一個(gè)訂閱事 件，然后后臺(tái)判斷之后，將主菜單返回給微信服務(wù)器，微信服務(wù)器解析該 xml 包里面的信息 并進(jìn)行展示 ，該 xml 的形式與微信回復(fù)消息界面如圖所示： 圖 學(xué)生訂閱賬號(hào)時(shí)的推送消息 圖 微信服務(wù)器推送的 xml 信息 參數(shù) 描述 toUserName 開(kāi)發(fā)者微信號(hào) fromUserName 發(fā)送方賬號(hào) 武漢科技大學(xué)本科畢業(yè)論文 18 createtime 消息創(chuàng)建時(shí)間 msgEvent 消息類(lèi)型 (event) Event 事件類(lèi)型 ， subscribe(訂閱事 件 ) 圖 xml 包中參數(shù)解釋 學(xué)生回復(fù) 2，系統(tǒng)向?qū)W生發(fā)送綁定鏈接，學(xué)生點(diǎn)入該鏈接進(jìn)行綁定，界面如圖： 學(xué)生在該界面輸入學(xué)號(hào)姓名， ajax 提交到后臺(tái)，完成綁定。流程如下： 開(kāi) 始學(xué) 生 發(fā) 送 綁 定 指令將 微 信 服 務(wù) 器 穿 來(lái) 的 o p e n i d 聯(lián) 合 t o k e n 進(jìn)行 加 密查 詢(xún) s t u d e n t s 表是 否 有 該 o p e n i d記 錄 ？已 經(jīng) 進(jìn) 行 了 綁定發(fā) 送 綁 定 鏈 接發(fā) 送 您 已 進(jìn) 行了 綁 定結(jié) 束 圖 綁定時(shí)學(xué)生的 流程圖 武漢科技大學(xué)本科畢業(yè)論文 19 由于 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ì)與原來(lái)的 openid 不匹配，從而本次請(qǐng)求就失效了 。接下來(lái)學(xué)生點(diǎn)擊該鏈接進(jìn)去后，看見(jiàn)的界面如圖所示，該頁(yè)面的執(zhí)行流程圖如上 圖 所示 圖 學(xué)生點(diǎn)擊該鏈接的界面 武漢科技大學(xué)本科畢業(yè)論文 20 學(xué)生在填寫(xiě)完自己的信息以后，然后點(diǎn)擊綁定按鈕，前端 JavaScript 先判斷輸入是否為空，是空的話(huà)提示用戶(hù)輸入為空，并且判斷學(xué)號(hào)那一行是否為數(shù)字，空的話(huà)提示用戶(hù)輸入非法，然后 ajax 將之前鏈接里的 openid 與自己的學(xué)號(hào)信息提交到后臺(tái)程序，后臺(tái)程序再進(jìn)行判斷，先判斷信息是否完整，否則返回參數(shù)缺失 異常 ，然后該學(xué)生的賬號(hào)就會(huì)出現(xiàn)以下幾種情況：該 openid 是否已經(jīng)進(jìn)行過(guò)了綁定；該課程的初始化信息里是否有該名同學(xué)； 學(xué)生學(xué)號(hào)與名字是否對(duì)應(yīng)； 綁定成功；綁定時(shí)實(shí)際是在 students 表中選取對(duì)應(yīng)于 該 student 的記錄。 學(xué)生簽到 學(xué)生簽到時(shí)的設(shè)計(jì)思路是 ：首先教師進(jìn)入圖 的左 1 管理頁(yè)面，點(diǎn)擊選擇一門(mén)課程，然后客戶(hù)端 JavaScript 程序獲取該門(mén)課程的信息 （載入渲染課程列表時(shí)把 該門(mén)課程的 courseid 與寫(xiě)入對(duì)應(yīng)的 dom屬性里） ，進(jìn)入該門(mén)課程的開(kāi)啟簽到頁(yè)面（右圖） ,點(diǎn)擊時(shí)間選擇后，彈出時(shí)間選取框。選取時(shí)間后點(diǎn)擊開(kāi)始簽到按鈕，發(fā)送 包含當(dāng)前課程簽到信息的 ajax 請(qǐng)求到后端， 后臺(tái)置 course 表中對(duì)應(yīng)課程的 isstart 值為 1， 由于 客戶(hù)端 是無(wú)法知道 第幾次簽到 的 ， 故在后端 創(chuàng)建一個(gè)表 course_n_log 來(lái)記錄該門(mén)課程的每一次簽到具體時(shí)間，并且還有一個(gè)查看歷史記錄頁(yè)面會(huì)使用到某門(mén)課程的簽到時(shí)間這一信息，該表模式為： course_n_log(tag,createtime) 表 ： course_n_log 數(shù)據(jù)格式 屬性 類(lèi)型 主鍵 默認(rèn)值 自增 注釋 tag int 是 非空 是 某門(mén)課程的第幾次簽到 crenttime datetime 否 非空 否 簽到時(shí)間 圖 數(shù)據(jù)庫(kù)該 course_1_log 表的結(jié)構(gòu) 并且給 course_courseid_student 增加一列 ， 比如當(dāng)前是第 m次簽到 ， 就置為 tagm， 武漢科技大學(xué)本科畢業(yè)論文 21 然后初始化為 0，表示學(xué)生還沒(méi)有開(kāi)始簽到 。再創(chuàng)建一個(gè)表格 currentcourse，只記錄一條記錄，每一次使用時(shí)先把表清空再使用，來(lái)記錄當(dāng)前的或者上一次的某門(mén)課程的第幾次簽到，方便教師簽到頁(yè)面的其它請(qǐng)求當(dāng)前簽到課程信息的組件來(lái)獲取信息，并且記錄當(dāng)前是第幾次簽到完全由后臺(tái)程序自動(dòng)管理，減少了與前端的邏輯交互，降低了程序的開(kāi)發(fā)難度。該表的模式是： currentcourse(couseid,tag) 表 ： currentcourse 數(shù)據(jù)格式 屬性 類(lèi)型 主鍵 默認(rèn)值 自增 注釋 courseid int 是 非空 是 正在簽到的課程 id tag string 否 非空 否 某門(mén)課程的 第幾次簽到 標(biāo)記 圖 數(shù)據(jù)庫(kù)中 currentcourse 的結(jié)構(gòu) 說(shuō)明 ： 其中的 tag 用來(lái)直接找到 course_courseid_student 中的那次簽到 武漢科技大學(xué)本科畢業(yè)論文 22 圖 老師開(kāi)啟簽到頁(yè)面 該過(guò)程的流程圖如下所示 武漢科技大學(xué)本科畢業(yè)論文 23 開(kāi) 始前 端 a j a x 獲 取課 程 列 表 信 息并 渲 染 進(jìn) 頁(yè) 面為 該 t a b l e ， 其它 按 鈕 綁 定 事件手 指 點(diǎn) 擊 一 門(mén)課 程 進(jìn) 入 簽 到開(kāi) 始 頁(yè) 面選 擇 對(duì) 應(yīng) 的 時(shí)間點(diǎn) 擊 開(kāi) 始 計(jì) 時(shí)A j a x 發(fā) 送c o u r s e i d ， 簽到 持 續(xù) 時(shí) 間t i m e ( s ) 到 后 臺(tái)開(kāi) 始前 端 部 分 開(kāi) 始倒 計(jì) 時(shí) 并 且 輪詢(xún) 當(dāng) 前 簽 到 人數(shù)后 端 置 對(duì) 應(yīng) 課程 i s s t a r t 為 1獲 取 上 面 的 最大 的 t a g 值 并且 為c o u r s e _ c o u r s ei d _ s t u d e n t 增加 一 列 t a g n 來(lái)記 錄 簽 到 信 息增 加c o u r s e _ c o u r s ei d _ l o g 一 條 t a g記 錄 ， 指 示 是第 幾 次 簽 到倒 計(jì) 時(shí) 結(jié) 束 獲取 當(dāng) 前 的 簽 到信 息使 能 編 輯 模 式點(diǎn) 擊 編 輯 時(shí) 切換 列 表選 擇 某 些 學(xué) 生并 點(diǎn) 擊 移 動(dòng) 時(shí)發(fā) 送 包 含 信 息的 a j a x 到 后 臺(tái)進(jìn) 行 更 改返 回 前 臺(tái) 進(jìn) 行相 應(yīng) 處 理記 錄 當(dāng) 前 簽 到信 息 到c u r r e n t c o u r s e結(jié) 束休 眠 t i m e置 i s s t a r t 為 0 ，關(guān) 閉 簽 到返 回 前 臺(tái) 關(guān) 閉成 功 圖 服務(wù)端 客戶(hù)端 簽到過(guò)程中的流程 客戶(hù)端在發(fā)起 ajax 請(qǐng)求 (包含簽到時(shí)間，簽到動(dòng)作，簽到課程 )到服務(wù)器端的同時(shí)，開(kāi)始倒計(jì)時(shí)，并 且以 5s 中一次的頻率來(lái)實(shí)時(shí)輪詢(xún)一個(gè)簽到人數(shù)與未簽到人數(shù)的接口 a，在開(kāi)啟簽到時(shí)，必須注意：假如之前已經(jīng)計(jì)過(guò)一次時(shí)了，那么編輯模式還打開(kāi)著，故需 武漢科技大學(xué)本科畢業(yè)論文 24 要先把編輯模式給關(guān)掉，這樣才沒(méi)有邏輯錯(cuò)誤。