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

　　

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