范路橋，段班祥，高 潔，劉小強

（廣東科學(xué)技術(shù)職業(yè)學(xué)院計算機工程技術(shù)學(xué)院，廣州 510640）

0 引言

近年來，以Internet 為核心的網(wǎng)絡(luò)技術(shù)和通信技術(shù)得到了飛速的發(fā)展和廣泛的應(yīng)用，隨著廣大網(wǎng)民對知識的獲取需要和主動學(xué)習(xí)意愿增強，傳統(tǒng)的信息資源的獲取及服務(wù)方式已無法滿足人們?nèi)找鏀U大化和多元化的信息需求。多元化的網(wǎng)絡(luò)傳播媒介豐富了人們獲取信息的來源，各種網(wǎng)絡(luò)交流與互動工具應(yīng)運而生［1］，知識社區(qū)問答新興網(wǎng)絡(luò)平臺快速發(fā)展，特別是知識社區(qū)深受網(wǎng)民歡迎［2］。

利用HTML、CSS、JavaScript 搭建展示頁面和處理前端請求，通過Bootstrap響應(yīng)式布局，使用MySQL 存取系統(tǒng)數(shù)據(jù)，結(jié)合Flask 編寫后端業(yè)務(wù)邏輯并對MySQL 數(shù)據(jù)庫中的數(shù)據(jù)做出相應(yīng)操作［3］，設(shè)計和開發(fā)了一個集網(wǎng)絡(luò)社區(qū)、普及百科、資訊平臺于一體的知識社區(qū)平臺，滿足了網(wǎng)民獲取知識、展示自我、掌握資訊的需求［4］。

1 系統(tǒng)設(shè)計

1.1 系統(tǒng)總體目標

（1）本項目為知寶問答系統(tǒng)，分為知寶百科、知寶問答和最新資訊三個板塊。

（2）知寶百科板塊是對技術(shù)、事件、事物等各種百科詞條知識的普及記載。

（3）知寶問答板塊向社區(qū)全員展示，每個人都可以在其中提出自己的疑問、分享自己的觀點。

（4）最新資訊板塊是全球突發(fā)事件、全球疫情、全球股市、全球軍事、全球科技的7*24 小時內(nèi)的最新消息。

知寶問答系統(tǒng)的系統(tǒng)功能如圖1所示。

圖1 系統(tǒng)功能圖

1.2 系統(tǒng)功能需求

本系統(tǒng)為知寶問答系統(tǒng)，主要為用戶網(wǎng)絡(luò)交流、知識交互、知識獲取、資訊掌握功能。根據(jù)這些需求，要設(shè)計出頁面美觀而且操作良好的系統(tǒng)，并且需要對數(shù)據(jù)庫的設(shè)計進行優(yōu)化，此外Flask后端需要提高穩(wěn)定性和運行速度。

（1）用戶注冊賬號，并在登錄后才能使用本系統(tǒng)。

（2）用戶登錄后將跳轉(zhuǎn)到首頁，首頁是系統(tǒng)的展示以及介紹，并提供退出登錄功能。

（3）知寶百科

“知寶百科”首頁隨機展示六個百科詞條，每個百科詞條都可通過用戶點擊詳情供用戶查閱。用戶可點擊按鈕，更換主頁展示的百科詞條。用戶編輯的詞條通過審核后，可上傳到社區(qū)。

（4）知寶問答

“知寶問答”首頁展示社區(qū)用戶的提問，以及對應(yīng)的其他用戶的觀點分享與解答。每個用戶都可提問或分享自己的觀點。用戶可以查詢問題，找到與自己相符合的疑問內(nèi)容。用戶可以收藏問答，并且在用戶主頁中找到自己收藏的問答。

（5）最新資訊

“最新資訊”的首頁默認展示全球突發(fā)事件，用戶可以切換其他模塊：全球疫情、全球股市、全球軍事、全球科技。用戶也可以在每個資訊下分享自己的觀點，與他人交流。

（6）我的主頁

“我的主頁”頁面展示用戶個人提出的問題以及用戶收藏的問答。

知寶問答系統(tǒng)架構(gòu)圖如圖2所示。

圖2 系統(tǒng)架構(gòu)圖

2 數(shù)據(jù)表設(shè)計

本系統(tǒng)有三大板塊，需要大量的數(shù)據(jù)支撐，數(shù)據(jù)量多，業(yè)務(wù)關(guān)系也比較復(fù)雜，這要求數(shù)據(jù)存儲方面及數(shù)據(jù)管理系統(tǒng)有良好的設(shè)計。系統(tǒng)共設(shè)計了用戶表、百科表、問題表、問答答案表、資訊表、用戶評論表、收藏表共七個數(shù)據(jù)表。為節(jié)省篇幅，給出前兩個數(shù)據(jù)表的具體設(shè)計，見表1和表2。

表1 用戶表（user）

表2 百科表（baike）

3 系統(tǒng)實現(xiàn)

本系統(tǒng)基于B/S架構(gòu)構(gòu)建，借助Python中的Request、Scrapy等庫完成數(shù)據(jù)的采集工作，并使用Pandas程序庫進行數(shù)據(jù)的分析和計算工作，處理以后的數(shù)據(jù)被推送至MySQL數(shù)據(jù)庫中。后臺采用Flask 框架實現(xiàn)數(shù)據(jù)接口功能，并將MySQL 數(shù)據(jù)庫中數(shù)據(jù)推送至前端頁面。前端主要采用HTML、JavaScript、CSS 相結(jié)合，用戶登錄后可以點擊各個模塊使用，每個環(huán)節(jié)通過Flask 與MySQL進行交互［5］，并可在前端展示數(shù)據(jù)。

3.1 首頁與注冊登錄模塊實現(xiàn)

用戶在使用本系統(tǒng)前，要求先登錄首頁。系統(tǒng)除首頁外的每個頁面都使用裝飾器添加了“判斷用戶是否已經(jīng)登錄”的功能，如果用戶未登錄，會被強制重定向到注冊登錄頁面。

3.1.1 首頁實現(xiàn)

首頁涉及文件index.html和main.py。系統(tǒng)首頁為index.html。當用戶未登錄時，會顯示“登錄/注冊”按鈕。當用戶登錄后，顯示“歡迎您：xxx”與“注銷”按鈕。利用后端Flask增加用戶的Cookie 和Session 實現(xiàn)。用戶未登錄時及用戶未登錄后的具體效果圖如圖3、圖4所示。

圖3 用戶未登錄時的首頁

圖4 用戶登錄后的首頁

判斷用戶能否正常登錄的核心代碼如下。

3.1.2 注冊頁面實現(xiàn)

注冊頁面涉及文件：regist.html 和main.py。注冊頁面為regist.html，該模板文件采用了Java-Script 和CSS 進行頁面的特效制作，會自動跟隨鼠標移動，展示星星連線特效（如圖5輸入框左側(cè)的星星連線）。用戶如果已經(jīng)擁有賬號，也可點擊“已有賬號”按鈕，直接跳轉(zhuǎn)到登錄頁面。注冊頁面效果如圖5所示。

圖5 注冊頁面

用戶輸入手機號碼、用戶名、密碼，點擊“注冊”按鈕后，會跳轉(zhuǎn)到后端main.py 中的視圖函數(shù)regist。視圖函數(shù)會判斷手機號是否已經(jīng)被注冊以及兩次輸入的密碼是否相同。如果判斷失敗，則會不通過注冊；如果判斷成功，則將信息寫入數(shù)據(jù)庫中，并跳轉(zhuǎn)到登錄頁面。注冊頁面的核心代碼如下。

3.1.3 登錄頁面實現(xiàn)

登錄頁面涉及文件login.html、error.html、main.py。其中登錄頁面為login.html，登錄頁面效果如圖6所示。用戶輸入賬號和密碼，點擊“登錄”按鈕后，會跳轉(zhuǎn)到后端main.py 中的視圖函數(shù)login中，視圖函數(shù)中會連接數(shù)據(jù)庫判斷用戶輸入的賬號和密碼是否正確。如果正確，則跳轉(zhuǎn)到首頁；否則跳轉(zhuǎn)到登錄失敗頁面error.html。登錄頁面的核心代碼如下。

圖6 登錄頁面

登錄失敗頁面為error.html，如果用戶輸入的賬號或密碼錯誤，將跳轉(zhuǎn)到登錄失敗頁面。主要是使用JavaScript 制作頁面彈窗，登錄失敗彈窗如圖7所示。

圖7 登錄失敗彈窗

3.1.4 注銷功能實現(xiàn)

注銷功能涉及文件main.py。當用戶登錄后，在首頁中點擊“注銷”按鈕時，用戶退出登錄，并重新跳轉(zhuǎn)到登錄頁面。用戶點擊“注銷”按鈕后，將跳轉(zhuǎn)到main.py 中的logout 函數(shù)，該函數(shù)將此用戶的cookie 和session 刪除，然后重定向到登錄頁面。注銷功能的核心代碼如下。

3.2 知寶百科模塊實現(xiàn)

3.2.1 知寶百科首頁

知寶百科首頁涉及文件baike.html。完成展示模塊介紹信息，顯示“用戶自己編輯百科”按鈕，以及提供導(dǎo)航欄使得可跳轉(zhuǎn)到其他頁面。知寶百科首頁如圖8所示。

圖8 知寶百科首頁

3.2.2 百科概要數(shù)據(jù)展示區(qū)域

百科概要數(shù)據(jù)展示涉及文件baike.html 和main.py。主要完成展示簡要的百科數(shù)據(jù)，供用戶瀏覽并且可以點擊查看詳細的百科內(nèi)容，用戶想換一批百科內(nèi)容時可點擊“換一批”按鈕。具體效果如圖9所示。

圖9 知寶百科展示頁面

當用戶需要查看百科概要數(shù)據(jù)時，將跳轉(zhuǎn)到main.py 中的百科函數(shù)。該函數(shù)將使用隨機數(shù)充當百科id，從數(shù)據(jù)庫中隨機讀取6 個百科數(shù)據(jù)，傳遞到前端將數(shù)據(jù)展示。百科概要數(shù)據(jù)展示的核心代碼如下所示。

3.3 知寶問答模塊實現(xiàn)

3.3.1 導(dǎo)航欄及封面

導(dǎo)航欄及封面涉及文件wenda.html。完成展示模塊介紹信息，顯示“我也要提問”按鈕，以及提供導(dǎo)航欄使得可以跳轉(zhuǎn)到其他頁面。效果如圖10所示。

圖10 知寶問答首頁

3.3.2 問題概要數(shù)據(jù)展示區(qū)域

問題概要數(shù)據(jù)展示涉及文件wenda.html 和main.py。主要完成展示簡要的問題數(shù)據(jù)，供用戶瀏覽，并且可以點擊查看詳細的問答內(nèi)容，用戶還可以輸入內(nèi)容后點擊“查找”按鈕，查詢自己關(guān)心的話題。效果如圖11所示，核心代碼如下。

圖11 知寶問答展示頁面

3.3.3 詳細問答展示

詳細問答展示涉及文件wendadesc.html 和main.py。當用戶點擊某個問題希望瀏覽其具體觀點時，展示詳細數(shù)據(jù)供用戶閱讀。用戶可對這個問題發(fā)表自己的觀點、收藏此問答。效果如圖12所示，詳細問答展示的核心代碼如下。

圖12 知寶問答詳情展示頁面

3.3.4 用戶新增回答

圖13 用戶新增回答頁面

用戶點擊“立即回答”按鈕后，F(xiàn)lask的addAnswer 函數(shù)將收集用戶信息、問題信息、用戶的回答內(nèi)容及回答時間并保存到數(shù)據(jù)庫中，用戶新增回答的核心代碼如下所示。

3.4 最新資訊模塊實現(xiàn)

3.4.1 導(dǎo)航欄及封面

導(dǎo)航欄及封面涉及文件zixun.html。完成展示模塊介紹信息、顯示歡迎信息以及退出登錄按鈕，并且提供導(dǎo)航欄使得可以跳轉(zhuǎn)到其他頁面。最新資訊首頁的效果如圖14所示。

圖14 最新資訊首頁

3.4.2 資訊概要數(shù)據(jù)展示區(qū)域

資訊概要數(shù)據(jù)展示涉及文件zixun.html 和main.py。展示簡要的資訊數(shù)據(jù)，供用戶瀏覽并且可點擊查看詳細的資訊內(nèi)容。分為五個模塊：國際、疫情、宏觀、股市、科技。后端會根據(jù)用戶點擊不同的模塊，從數(shù)據(jù)庫中讀取不同模塊的資訊數(shù)據(jù)進行展示。股市最新資訊展示頁面的具體效果如圖15所示，其它數(shù)據(jù)展示頁面類似。

圖15 股市最新資訊展示頁面

由于版面限制，其它頁面及代碼沒有詳細介紹。

4 結(jié)語

本文采用HTML、CSS、JavaScript 搭建展示頁面和處理前端請求，通過Bootstrap 響應(yīng)式布局，使用MySQL 存取系統(tǒng)數(shù)據(jù)，結(jié)合Flask 編寫后端業(yè)務(wù)邏輯并對MySQL 數(shù)據(jù)庫中的數(shù)據(jù)做出相應(yīng)操作，設(shè)計并實現(xiàn)了一個集網(wǎng)絡(luò)社區(qū)、普及百科、資訊平臺為一體的知寶問答系統(tǒng)，系統(tǒng)具有知寶百科、知寶問答和最新資訊等三個板塊，其強大的功能、良好的互動性、最新的資訊，在很大程度上滿足了廣大網(wǎng)民的展示自我、獲取知識、掌握最新資訊的迫切需求。