【導(dǎo)讀】規(guī)律性，并且老師也很不方便解答問(wèn)題，分享課件給學(xué)生。因此依托微信來(lái)解決以上問(wèn)。用戶(hù)交互邏輯與頁(yè)面效果。界面與用戶(hù)交互邏輯；設(shè)計(jì)了該系統(tǒng)后臺(tái)數(shù)據(jù)庫(kù)與業(yè)務(wù)功能邏輯。該網(wǎng)站完整實(shí)現(xiàn)了簽。問(wèn)進(jìn)行有效回復(fù)，具有實(shí)際使用價(jià)值。通過(guò)該系統(tǒng)的設(shè)計(jì)與開(kāi)發(fā)，可以了解微信公眾號(hào)后臺(tái)與服務(wù)器交互原理，熟悉使。用PHP與MySQL語(yǔ)句，加強(qiáng)對(duì)JavaScript語(yǔ)言的掌握。最終可有效提高對(duì)項(xiàng)目需求整。理、代碼編寫(xiě)、軟件測(cè)試等開(kāi)發(fā)流程有一個(gè)全面清楚的認(rèn)識(shí)。

　　

【正文】 再獲取當(dāng)前正在簽到的課程，并判斷該門(mén)學(xué)生是否是該門(mén)課的學(xué)生，不是的話(huà)返回沒(méi)有簽到資格； 然后再判斷是否已經(jīng)進(jìn)行過(guò)簽到，如果是的話(huà)返回你已經(jīng)進(jìn)行過(guò)簽到了；然后才是簽到成功。流程圖 如上 。 查看歷史記錄 載入該頁(yè)面時(shí) ，跟教師的簽到頁(yè)面 ajax 獲取 課程列表 ， 模板渲染邏輯與模板 是一樣的 ， 所以可以完全復(fù)用前端與后端代碼 。 前后端處理流程如下圖 ： Ajax獲 取課 程 列 表 數(shù) 據(jù)使 用 模 板 引 擎渲 染 并 插 入dom， 并 綁 定事 件開(kāi) 始Ajax請(qǐng) 求課 程 列 表 數(shù) 據(jù)從 course里 面循 環(huán) 取 出course結(jié) 束 圖 渲染課程列表流程圖 渲染完成后 ， 就使用事件代理來(lái)綁定事件 。 為什么使用事件代理 ？ 它的好處在于可 武漢科技大學(xué)本科畢業(yè)論文 36 以減少綁定事件過(guò)程中查找 dom的時(shí)間 ， 并且可以減少渲染引擎與 JavaScript 引擎之間的聯(lián) 系 ， 這樣可以減少內(nèi)存使用 ，提高了頁(yè)面的響應(yīng)速度。當(dāng)用戶(hù)點(diǎn)擊任意一門(mén)課程列表時(shí)，又發(fā)起 ajax 請(qǐng)求去后臺(tái)查詢(xún)?cè)撻T(mén)課程的歷史簽到信息，其實(shí)是做了以下幾件事：首先前端傳來(lái) courseid，指示當(dāng)前用戶(hù)選擇的是哪一門(mén)課程， action 指示當(dāng)前是什么動(dòng)作，服務(wù)器端先檢查是否確實(shí)這兩個(gè)參數(shù)，如果沒(méi)有 的話(huà)就拋出異常。否則的話(huà)就按照從 course_courseid_log（前面已經(jīng)說(shuō)過(guò)，該表是用來(lái)記錄 courseid 這門(mén)課程的 歷史簽到信息的 ，其中的 courseid 取值可以為 1,2… ）中按照簽到時(shí)間由近及遠(yuǎn)的順序選取出來(lái)并轉(zhuǎn) 化為數(shù)組，并 json 編碼并輸出。 開(kāi) 始A j a x 傳 遞c o u r s e i d 獲 取歷 史 簽 到 信 息使 用 模 板 引 擎渲 染 并 插 入d o m ， 并 綁 定事 件開(kāi) 始A j a x 請(qǐng) 求 獲 取歷 史 簽 到 信 息取 得 a j a x 參 數(shù)里 的 c o u r s e i d查 詢(xún)c o u r s e _ c o u r s ei d _ l o g 中 的 所有 該 課 程 的 記錄 并 按 照 時(shí) 間倒 序 順 序 返 回J s o n 編 碼 輸 出到 前 端結(jié) 束 圖 獲取某門(mén)課程歷史信息前端與后端交互流程圖 某門(mén)課程歷史信息效果圖如下 ： 武漢科技大學(xué)本科畢業(yè)論文 37 圖 簽到信息歷史記錄 當(dāng)點(diǎn)擊如圖某一次記錄時(shí)，又發(fā)起一個(gè) 包含 courseid 與指示選取第幾次簽到的 tag屬性的 ajax 去請(qǐng)求后臺(tái)的已經(jīng)簽到與未簽到同學(xué)信息，該接口與開(kāi)啟簽到頁(yè)面的那個(gè)接口 幾乎 一模一樣，不再詳述。 其實(shí)，從歷史頁(yè)面的第一頁(yè)即課程列表頁(yè)到某門(mén)課程的歷史簽到記錄頁(yè)再到詳情頁(yè)是一個(gè) html 文檔，故不支持返回上一頁(yè)這個(gè)功能。為了實(shí)現(xiàn)該功能，可以在進(jìn)入歷史記錄的課程列表頁(yè)面時(shí)，加一個(gè) hash 值 index，進(jìn)入某門(mén)課程的歷史簽到記錄頁(yè)時(shí)加一個(gè) hash 為 courseinfo， 進(jìn)入詳情時(shí)加一個(gè) hash 為 detail，然后可以 相當(dāng)于在歷史頁(yè)面中就有了 4 條記錄，然后監(jiān)聽(tīng)瀏覽器的 hashchange 事件，一旦監(jiān)聽(tīng)到該事件，判斷對(duì)應(yīng)的 hash 值，實(shí)現(xiàn)一個(gè)頁(yè)面的隱藏與另一個(gè)頁(yè)面的展示，由此便可以實(shí)現(xiàn) 該單頁(yè)應(yīng)用 返回歷史記錄中某一頁(yè)的功能。 增加與刪除學(xué)生 也是先要渲染課程列表 ，因?yàn)橄纫故疽獎(jiǎng)h除添加哪門(mén)課程的學(xué)生 。與前面一樣。點(diǎn)擊某一門(mén)課程后，進(jìn)入編輯該門(mén)課程學(xué)生的頁(yè)面，如圖所示： 武漢科技大學(xué)本科畢業(yè)論文 38 圖 增加與刪除學(xué)生界面 因?yàn)?在老師的上課途中 ， 總是有些學(xué)生可能因?yàn)槟承┰虿贿x擇該門(mén)課程或者是剛剛選進(jìn)來(lái)但是卻沒(méi)有數(shù)據(jù)庫(kù)里的記錄 ，手動(dòng)去數(shù)據(jù)庫(kù)里更改的話(huà)要該很多個(gè)地方， 為了解決該問(wèn)題 ，故開(kāi)發(fā)了該接口，方便老師添加與刪除 學(xué)生。刪除學(xué)生的 程序的執(zhí)行流程是 ， 先選擇要?jiǎng)h除的學(xué)生 （ 支持多選 ），然后點(diǎn)擊刪除，彈框讓確認(rèn)是否刪除？然后發(fā)起 ajax 請(qǐng)求后臺(tái)完成刪除該組學(xué)生的請(qǐng)求，成功執(zhí)行的話(huà)返回給前端執(zhí)行成功，前端知道執(zhí)行成功之后，從 dom中把選中的學(xué)生移除 ，給予用戶(hù)即時(shí)的刪除體驗(yàn)。 刪除時(shí)要注意必須把刪除 students 中的 sql 語(yǔ)句作為第一條，因?yàn)?可能該門(mén)課程的簽到還并沒(méi)有開(kāi)始過(guò)，故不會(huì)存在后面的 curse_courseid_student 表 (存儲(chǔ)某門(mén)課程的學(xué)生與每個(gè)學(xué)生的簽到信息 )和 course_courseid_log 表 (存儲(chǔ)某門(mén)課程的簽到時(shí)間信息 )，此時(shí)如果把 students表的刪除操作放在后面會(huì)造成刪除失敗。 流程圖如下： 武漢科技大學(xué)本科畢業(yè)論文 39 開(kāi) 始用 戶(hù) 選 取 學(xué) 生后 并 點(diǎn) 擊 刪 除按 鈕 后 拼 接 用戶(hù) 選 擇 的 學(xué) 號(hào)為 一 個(gè) s t r i n g刪 除 選 中 的 學(xué)生開(kāi) 始前 端 請(qǐng) 求 某 門(mén)課 程 學(xué) 生 列 表信 息重 新 將 學(xué) 號(hào) 字符 串 變 為 關(guān) 聯(lián)數(shù) 組刪 除 s t u d e n t s中 該 學(xué) 號(hào) 記 錄J s o n 編 碼 輸 出刪 除 成 功 到 前端結(jié) 束用 戶(hù) 選 擇 課 程后 a j a x 拉 取 該門(mén) 課 程 學(xué) 生 列表 并 渲 染 ， 并代 理 各 種 事 件響 應(yīng) 刪 除 成 功刪 除c o u r s e _ c o u r s ei d _ s t u d e n t 中該 學(xué) 號(hào) 記 錄將 c o u r s e 中 對(duì)應(yīng) 課 程 的s t u d e n t n u m 減1 圖 刪除學(xué)生流程圖 新增學(xué)生功能 ， 首先用戶(hù)進(jìn)入該頁(yè)面點(diǎn)擊添加學(xué)生 ， 彈出添加學(xué)生的彈框 ， 要求輸入學(xué)生的班級(jí) ， 學(xué)號(hào) ， 姓名信息 ， 用戶(hù)輸入后 ， 會(huì)進(jìn)行判斷 4 個(gè)信息是否 為空 ， 并且使用正則表達(dá)式測(cè)試班級(jí)信息 ， 不符合規(guī)范的話(huà)會(huì)返回輸入非法 ， 為何要進(jìn)行過(guò)濾，因?yàn)樵陲@示學(xué)生詳細(xì)信息頁(yè)面 ， 會(huì)過(guò)濾每一個(gè)學(xué)生的班級(jí)信息 ， 使得只留下班級(jí)代號(hào) ， 故必須首先保證該輸入的格式是正確的 ， 才能保證以后過(guò)濾顯示時(shí)的正確性 。 當(dāng)輸入后點(diǎn)擊確定按鈕時(shí) ， 發(fā)送攜帶有學(xué)生信息的 ajax 請(qǐng)求到后臺(tái)服務(wù)器 ，后臺(tái)程序首先插入該學(xué)生 武漢科技大學(xué)本科畢業(yè)論文 40 到 students 中，再插入該學(xué)生記錄到 course_courseid_student 中 ， 最后才是course_courseid_log 中 ， 之所以按照這樣的順序 ， 原因和上面是一樣的 。添加完成之 后，返回 json 編碼后的添加成功信息。 新增學(xué)生的彈框如上圖 ，下圖所示為流程圖 ： 開(kāi) 始用 戶(hù) 填 寫(xiě) 學(xué) 生信 息開(kāi) 始在 s t u d e n t s 中增 加 一 條 記 錄在c o u r s e _ c o u r s ei d _ s t u d e n t 與c o u r s e _ c o u r s ei d _ l o g 中 增 加記 錄j s o n 編 碼 輸 出刪 除 成 功結(jié) 束用 戶(hù) 點(diǎn) 擊 添 加學(xué) 生 按 鈕點(diǎn) 擊 添 加 時(shí) 先進(jìn) 行 驗(yàn) 證驗(yàn) 證 通 過(guò) 后 發(fā)送 請(qǐng) 求 到 后 端 圖 增加學(xué)生的流程圖 問(wèn)答系統(tǒng) 問(wèn)答系統(tǒng)主要是要 實(shí)現(xiàn) 的功能如下 ： 學(xué)生在微信公眾號(hào)里提問(wèn) ， 并且還能夠查看問(wèn)答信息 ， 老師可以對(duì)問(wèn)題進(jìn)行解答 ， 已經(jīng)解答問(wèn)題與未經(jīng)解答問(wèn)題使用 tab 切換進(jìn)行展示 。 學(xué)生在微信公眾好頁(yè)面回復(fù) ？消息會(huì)被推送到微信服務(wù)器，再推送到第 三 方的服務(wù)器。表的結(jié)構(gòu)前面已經(jīng)說(shuō)了，主要流程如下，消息被推送到開(kāi)發(fā)者 在微信公 眾號(hào)后臺(tái)填寫(xiě) 的 url 上時(shí)，會(huì)根據(jù)關(guān)鍵字進(jìn)入提問(wèn)模塊，在該 模塊，首先把 ，只剩下問(wèn)題，然后為了安全移除 xss，然后判斷該用戶(hù)是否已經(jīng)進(jìn)行了綁定，再判斷問(wèn)題字符串是否為空，或者長(zhǎng)度大于 500 的話(huà)，就返回，就添加一條記錄到 studentqus 中 。流程如下： 武漢科技大學(xué)本科畢業(yè)論文 41 開(kāi) 始微 信 服 務(wù) 器p o s t 該 信 息 到開(kāi) 發(fā) 者 的 u r l上結(jié) 束學(xué) 生 發(fā) 送 3 . +問(wèn) 題關(guān) 鍵 字 匹 配 為提 問(wèn)分 理 出 包 含 問(wèn)題 的 字 符 串是 否 長(zhǎng) 度 為0 或 者 大 于5 0 0返 回 輸 入 有 問(wèn)題是插 入 問(wèn) 題 到s t u d e n t q u e 中否返 回 成 功 添 加 圖 學(xué)生提問(wèn)流程 當(dāng)學(xué)生回復(fù) 5 時(shí)，關(guān)鍵字匹配成功，返回問(wèn)答的地址給學(xué)生， 學(xué)生點(diǎn)進(jìn)去后，綁定JavaScript 事件， ajax 獲取問(wèn)題列表，對(duì)時(shí)間做一下簡(jiǎn)單 處理 ，使得出現(xiàn)幾小時(shí) 前，幾天前這種更接近人類(lèi)習(xí)慣的時(shí)間顯示格式 ，交給模板引擎進(jìn)行渲染。再添加進(jìn) dom。老師的管理頁(yè)面由于牽涉到回復(fù)，故要復(fù)雜一些。 首先， ajax 獲取問(wèn)答列表，按照 url 里面的 isteacher 關(guān)鍵字來(lái)識(shí)別 是 老師 在使用并渲染上添加評(píng)論按鈕 并綁定事件。當(dāng)老師點(diǎn) 武漢科技大學(xué)本科畢業(yè)論文 42 擊添加問(wèn)答時(shí)，動(dòng)畫(huà) 渲染出回答輸入框，假如該問(wèn)題已經(jīng)有答案的話(huà)，該輸入框里面已經(jīng)有了上一次提交的答案，否則顯示默認(rèn)值，請(qǐng)輸入您的回答。為了增強(qiáng)用戶(hù)體驗(yàn)，使得輸入框的高度能夠隨著用戶(hù)的文字增加而自動(dòng)改變高度，使用了一個(gè)改變默認(rèn)行為 使得能進(jìn)行編輯 的 div 來(lái)作為輸入框 。 并且為了增強(qiáng)用戶(hù)體驗(yàn)，在點(diǎn)擊確定時(shí)，在 ajax 提交過(guò)程中，為該按鈕加一個(gè)加載中的動(dòng)畫(huà) 背景，結(jié)束時(shí)再移除該背景，并且為了性能，沒(méi)有直接去操作該背景的設(shè)置，而是采用先在 css 里把類(lèi)給寫(xiě)好，在 js 里切換類(lèi)，對(duì)性能非常友好 。 當(dāng)點(diǎn)擊添加回復(fù)按鈕時(shí)，流程圖如下： 開(kāi) 始A j a x 請(qǐng) 求 問(wèn) 答列 表 并 渲 染添 加 綁 定 添 加問(wèn) 答 的 事 件 ，事 件 代 理 為 輸入 框 ， 確 定 取消 按 鈕 綁 定 事件點(diǎn) 擊 時(shí) 先 判斷 是 否 已 經(jīng)有 回 答 ？顯 示 該 回 答是顯 示 默 認(rèn) 值 輸入 您 的 回 答否獲 得 焦 點(diǎn) 時(shí)判 斷 是 否 是默 認(rèn) 值清 空 默 認(rèn) 值 為空點(diǎn) 擊 確 定 查 找對(duì) 應(yīng) 的 d o m 的問(wèn) 題 i d ， 并 包含 回 復(fù) 進(jìn) 行a j a x 請(qǐng) 求是響 應(yīng) 成 功 修 改對(duì) 應(yīng) 回 復(fù) 信 息結(jié) 束點(diǎn) 擊 確 定 圖 老師客戶(hù)端 處理流程 武漢科技大學(xué)本科畢業(yè)論文 43 服務(wù)器端接收到該 ajax 請(qǐng)求以后 ， 更改對(duì)應(yīng) id 的 answer 字段 ， 在更改成功后顯示回復(fù)成功 ， 否則顯示數(shù)據(jù)庫(kù)中沒(méi)有該問(wèn)題的 id。 流程圖如下 ： 開(kāi) 始包 含 答 案 i d 與回 復(fù) 的 A j a x 請(qǐng)求選 獲 取 傳 來(lái) 的的 i d 與 答 案插 入 數(shù) 據(jù) 庫(kù)成 功 ？返 回 回 復(fù) 成 功是返 回 異 常否結(jié) 束 圖 服務(wù)器端流程圖 效果如圖 武漢科技大學(xué)本科畢業(yè)論文 44 圖 老師管理問(wèn)答頁(yè)面效果圖 課件下載 老師的課件通常會(huì)上傳到云盤(pán) ， 可以在上傳后獲取分享鏈接 ， 然后在對(duì)應(yīng)的頁(yè)面添加上即可 ， 學(xué)生回復(fù) 6 可以獲取該鏈接。實(shí)現(xiàn)課件的獲取。在 pc 端處理流程是：先獲取課程列表，在老師選擇對(duì)應(yīng)的課程后進(jìn)入上傳 url 頁(yè)面，點(diǎn)擊添加后，前端 ajax 請(qǐng)求并傳遞 courdeid 與 url，添加成功后返回回復(fù) 成功。否則拋出異常添加 url 不成功。流程圖如下： 武漢科技大學(xué)本科畢業(yè)論文 45 開(kāi) 始包 含 c o u r s e i d與 課 件 u r l的A j a x 請(qǐng) 求服 務(wù) 器 端 選 得傳 來(lái) 的 的c o u r s e i d i d 與u r l插 入 數(shù) 據(jù) 庫(kù)成 功 ？返 回 插 入 成 功是返 回 異 常否結(jié) 束 圖 老師添加課件 url 時(shí)的流程圖 當(dāng)學(xué)生回復(fù) 5 時(shí)， 微信服務(wù)器會(huì) post 一條請(qǐng)求到 微信公眾號(hào)后臺(tái) 填寫(xiě)的服務(wù)器 url上，該服務(wù)器處理流程是：先關(guān)鍵字匹配進(jìn)入獲取課程 url 模塊，然后查詢(xún) courseurl 表獲取老師添加的 url 與課程信息 ， 返回?cái)?shù)組并