范路橋，段班祥，高 潔，劉小強(qiáng)

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（3）知寶百科

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

（4）知寶問答

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

（5）最新資訊

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

（6）我的主頁

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

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

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

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

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

表1 用戶表（user）

表2 百科表（baike）

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

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

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

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

3.1.1 首頁實(shí)現(xiàn)

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

圖3 用戶未登錄時(shí)的首頁

圖4 用戶登錄后的首頁

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

3.1.2 注冊(cè)頁面實(shí)現(xiàn)

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

圖5 注冊(cè)頁面

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

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

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

圖6 登錄頁面

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

圖7 登錄失敗彈窗

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

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

3.2 知寶百科模塊實(shí)現(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。主要完成展示簡(jiǎn)要的百科數(shù)據(jù)，供用戶瀏覽并且可以點(diǎn)擊查看詳細(xì)的百科內(nèi)容，用戶想換一批百科內(nèi)容時(shí)可點(diǎn)擊“換一批”按鈕。具體效果如圖9所示。

圖9 知寶百科展示頁面

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

3.3 知寶問答模塊實(shí)現(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。主要完成展示簡(jiǎn)要的問題數(shù)據(jù)，供用戶瀏覽，并且可以點(diǎn)擊查看詳細(xì)的問答內(nèi)容，用戶還可以輸入內(nèi)容后點(diǎn)擊“查找”按鈕，查詢自己關(guān)心的話題。效果如圖11所示，核心代碼如下。

圖11 知寶問答展示頁面

3.3.3 詳細(xì)問答展示

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

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

3.3.4 用戶新增回答

圖13 用戶新增回答頁面

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

3.4 最新資訊模塊實(shí)現(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。展示簡(jiǎn)要的資訊數(shù)據(jù)，供用戶瀏覽并且可點(diǎn)擊查看詳細(xì)的資訊內(nèi)容。分為五個(gè)模塊：國際、疫情、宏觀、股市、科技。后端會(huì)根據(jù)用戶點(diǎn)擊不同的模塊，從數(shù)據(jù)庫中讀取不同模塊的資訊數(shù)據(jù)進(jìn)行展示。股市最新資訊展示頁面的具體效果如圖15所示，其它數(shù)據(jù)展示頁面類似。

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

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

4 結(jié)語

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