基于MVC設(shè)計模式的軟件開發(fā)論壇的設(shè)計與實現(xiàn)

張麗　黃晨怡

摘要：隨著信息技術(shù)的發(fā)展，越來越多的人選擇在網(wǎng)上獲取知識。在這樣的背景下，論壇已經(jīng)成為當(dāng)下最流行的社交方式。文章中論壇系統(tǒng)面向于軟件開發(fā)人員，使用MVC設(shè)計模式分離業(yè)務(wù)邏輯與表示層。業(yè)務(wù)邏輯采用Java語言與MySQL數(shù)據(jù)庫進行開發(fā)，表示層使用React前端框架，為用戶搭建了一個界面友好，交互優(yōu)雅的論壇系統(tǒng)。主要實現(xiàn)了用戶注冊登錄、發(fā)布話題、回復(fù)話題、搜索話題和熱門話題的功能。

關(guān)鍵詞：論壇開發(fā)；MVC設(shè)計模式；React框架

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2018）27-0058-04

1 背景

信息技術(shù)的爆炸式發(fā)展為我們呈現(xiàn)了一個截然不同的世界，討論問題的網(wǎng)絡(luò)論壇也成了當(dāng)下最流行的社交方式。BBS英文全稱是Bulletin Board System，中文翻譯為電子公告板，具有信息更新快，互動性強的特點。針對特定人群建立的特定BBS成為目前網(wǎng)絡(luò)論壇的中流砥柱，也就是現(xiàn)在俗稱的Forum（論壇）。

該系統(tǒng)設(shè)計開發(fā)的軟件開發(fā)論壇針對軟件開發(fā)人員以及軟件開發(fā)愛好者，為其提供一個交流平臺，在這里可以提出問題、發(fā)表自己的看法、觀點。

2 相關(guān)技術(shù)

該系統(tǒng)主要采用MVC設(shè)計模式實現(xiàn)頁面Java Web技術(shù)作為后臺，提供數(shù)據(jù)處理邏輯與數(shù)據(jù)接口，配合React和Ant Design實現(xiàn)簡潔的界面與優(yōu)雅的動態(tài)效果，最后使用Webpack模塊打包器將應(yīng)用程序需要的每個模塊打包成一個bundle?；谝陨霞夹g(shù)決定使用MyEclipse作為開發(fā)工具，MySQL作為數(shù)據(jù)庫，Tomcat作為應(yīng)用服務(wù)器，Node.js環(huán)境下安裝的Webpack打包模塊，搭建該系統(tǒng)完整的開發(fā)環(huán)境。下面是使用技術(shù)的概要介紹。

2.1 MVC設(shè)計模式

大部分Web 應(yīng)用程序都是用像 ASP、PHP 或者 CFML 這樣的過程化語言來創(chuàng)建的，它們混合數(shù)據(jù)層代碼，如數(shù)據(jù)庫查詢語句和表示層代碼（如HTML），通常開發(fā)速度通常更快，但很難顯示業(yè)務(wù)模型的外觀或模型的可重用性，產(chǎn)品設(shè)計的靈活性很小，很難滿足用戶不斷變化的需求[1]。

MVC設(shè)計模式，即把一個應(yīng)用按照業(yè)務(wù)邏輯分為三層：模型、視圖和控制分別對應(yīng)Model層、View層、Controller層。這樣分層雖然會增加一些額外的代碼工作，但是能夠很好地復(fù)用模型，體現(xiàn)出業(yè)務(wù)邏輯的，使應(yīng)用的結(jié)構(gòu)更清晰。它從根本上強制性地將業(yè)務(wù)邏輯與表示層代碼分開，產(chǎn)品的應(yīng)用通過模型可以得到更好的體現(xiàn)。

2.2 Webpack模塊打包器

當(dāng)前的網(wǎng)頁功能越來越豐富，通常有很多復(fù)雜的JavaScript代碼和數(shù)量龐大的依賴包，為了管理這些數(shù)據(jù)，前端社區(qū)涌現(xiàn)了許多實踐方法：例如模塊化、TypeScript、CSS預(yù)處理器等。但這些方法又需要額外的處理，所以就有了Webpack這類的模塊打包機。它可以分析項目結(jié)構(gòu)，將瀏覽器不能直接運行的拓展語言，轉(zhuǎn)換和打包成瀏覽器可識別的格式。

該系統(tǒng)采用的React框架結(jié)合Webpack技術(shù)可以在編輯頁面時實現(xiàn)熱更新，實時瀏覽頁面的更新，提高開發(fā)效率。系統(tǒng)完成后也用Webpack打包成整體項目，讓整個項目結(jié)構(gòu)更加清晰。

2.3 React（JavaScript類庫）

JavaScript是一種面向?qū)ο蟮哪_本語言，也是Web開發(fā)中非常受歡迎的一門語言。它是一種新的動態(tài)語言，植根于世界各地數(shù)以百萬計的互聯(lián)網(wǎng)用戶使用的Web瀏覽器，被用來增強網(wǎng)站和Web應(yīng)用程序的交互性[2]。

React是一個JavaScript庫，它可以輕松創(chuàng)建交互式用戶界面，為應(yīng)用程序中的每個狀態(tài)設(shè)計簡單的視圖。當(dāng)數(shù)據(jù)更改時，React 會根據(jù)更改高效地渲染組件。它提供了一個輕量級的虛擬DOM，通過這個虛擬DOM更新真正的DOM，并通過這個虛擬DOM管理真實DOM的更新。通過將當(dāng)前DOM描述與先前DOM進行比較，使用diff算法計算更新真實DOM的最小步驟。

React還將HTML、JS結(jié)合起來構(gòu)建組件，創(chuàng)建好擁有各自 state（狀態(tài)）的組件，再將其組合構(gòu)成更加復(fù)雜的UI界面。這使得每個組件都可組合、可重用、可維護，實現(xiàn)模塊化開發(fā)。

該系統(tǒng)針對PC端和移動端做了適配，正是運用了React中組件復(fù)用的概念。開發(fā)時，只要先寫好PC端的邏輯，在開發(fā)移動端時，就可以復(fù)用之前已經(jīng)開發(fā)好的組件。

3 系統(tǒng)功能分析與設(shè)計

在需求分析方案的制定中，首先要明確系統(tǒng)編寫的目的，不但要了解系統(tǒng)是為了解決什么問題，還要通過各種手段調(diào)查、了解用戶需求，以用戶的使用目的為參考依據(jù)進行需求分析[3]。

該章將通過系統(tǒng)功能分析和設(shè)計總結(jié)出準確的系統(tǒng)模型。

3.1 系統(tǒng)功能分析

經(jīng)過分析，系統(tǒng)具有如下基本功能：

1） 注冊登錄：游客不注冊僅能瀏覽帖子、搜索帖子。游客通過注冊，填寫用戶名、密碼、郵箱等信息注冊成為普通用戶。注冊完成后，可以使用用戶名、密碼登錄系統(tǒng)。

2） 用戶信息管理：用戶使用用戶名、密碼登錄成功后，可以通過個人中心頁面對密碼、個人信息進行修改，還可以查看、刪除自己發(fā)布的話題與回復(fù)。

3） 發(fā)布話題：用戶登錄后，可以點擊“發(fā)布話題”按鈕進入發(fā)布頁面，在頁面可以選擇話題的類別，填寫話題的標題、內(nèi)容等。

4） 回復(fù)話題：用戶登錄后，在瀏覽話題時，可以對當(dāng)前查看的話題進行回復(fù)。

5） 查詢話題：用戶在搜索框中輸入關(guān)鍵詞，點擊搜索按鈕，即可顯示出與關(guān)鍵詞相關(guān)的話題，點擊查看搜索出來的話題詳情。

6） 用戶管理：用戶注冊成功后默認為普通用戶。管理員登錄后，可以對所有話題、回復(fù)進行刪除操作。超級管理員登錄后可管理用戶的用戶組，使普通用戶成為管理員，也可以刪除用戶，刪除用戶后，此用戶無法再登錄系統(tǒng)。

7） 熱門話題：按照話題回復(fù)量對話題進行排序，排序顯示熱門前十的話題。

8） 分頁顯示：在數(shù)據(jù)過多時，讓數(shù)據(jù)分頁顯示。用戶可以點擊下一頁、上一頁來切換顯示信息，也可以點擊頁碼進行信息跳轉(zhuǎn)。

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

3.2.1 系統(tǒng)結(jié)構(gòu)圖

經(jīng)過分析，該論壇的系統(tǒng)結(jié)構(gòu)圖如下。如圖2所示。

功能模塊是整個系統(tǒng)的核心部分，清晰的功能模塊可以為系統(tǒng)開發(fā)節(jié)省許多不必要的時間[4]。如圖2系統(tǒng)結(jié)構(gòu)圖所示，系統(tǒng)可以劃分為三個模塊，用戶模塊、話題模塊、管理模塊。其中用戶功能模塊中又有登錄功能、注冊功能、個人信息管理管理功能；話題模塊中又分為發(fā)布話題、回復(fù)話題、查找話題和熱門話題；管理模塊中有超級管理員和管理員。

3.2.2 數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫設(shè)計是對計算機網(wǎng)絡(luò)中的數(shù)據(jù)進行有效的集成。程序開發(fā)人員需要根據(jù)數(shù)據(jù)庫的設(shè)計要求進行編碼，并根據(jù)網(wǎng)站開發(fā)過程中的數(shù)據(jù)與數(shù)據(jù)的關(guān)系設(shè)計數(shù)據(jù)庫，使數(shù)據(jù)庫的設(shè)計能夠滿足系統(tǒng)操作的要求[5]。

通過上面的模塊功能分析，梳理出該系統(tǒng)的數(shù)據(jù)庫ER圖，如圖3所示。

ER圖是實體聯(lián)系圖的一種，它對信息世界進行建模，能方便、準確地表示出信息世界中的常用概念以及它們之間的聯(lián)系[6]。

由ER圖可以看出每個用戶都屬于一個用戶組，每個用戶可以發(fā)布多個話題，每個話題又屬于一個話題分類，用戶回復(fù)話題的內(nèi)容既與用戶相關(guān)，又與話題關(guān)聯(lián)。整個系統(tǒng)其實就是圍繞一個核心功能：用戶-發(fā)帖-回復(fù)。

4.2 用戶模塊實現(xiàn)

4.2.1 登錄/注冊功能

未注冊用戶點擊左上角的登錄/注冊按鈕選擇注冊即可進行注冊，已注冊用戶選擇登錄可進行登錄。如圖5、6所示。

4.3 話題模塊實現(xiàn)

4.3.1 發(fā)布話題

用戶登錄系統(tǒng)后點擊左上角發(fā)布話題按鈕即可進入發(fā)布頁面，在發(fā)布頁面可以選擇發(fā)布的話題分類，并填寫話題標題與話題內(nèi)容。填寫完畢后點擊發(fā)布按鈕即跳轉(zhuǎn)到系統(tǒng)主界面，剛才發(fā)布的話題可在最新發(fā)布中可見。如圖9。

4.3.3 搜索話題

用戶可以通過導(dǎo)航欄右上角的搜索表單進行搜索，輸入關(guān)鍵詞，點擊搜索按鈕即可跳轉(zhuǎn)到搜索結(jié)果界面，其中關(guān)鍵詞的檢索基于文章標題與文章內(nèi)容，讓用戶能夠更加準確地找到自己所需的內(nèi)容。也可以在搜索界面點擊發(fā)布話題，進行發(fā)布話題的后續(xù)操作。如圖11所示。

4.3.4 熱門話題

熱門話題是根據(jù)每個話題的回復(fù)量進行排序顯示排序前十個話題，如圖12。

4.4 管理模塊實現(xiàn)

4.4.1 超級管理員

系統(tǒng)默認有一位超級管理員，超級管理員登錄后會顯示管理中心按鈕。點擊管理中心按鈕進入用戶管理界面。超級管理員可以授予普通用戶管理員權(quán)限，也可以刪除用戶。如圖13所示。用戶的用戶組被設(shè)置成1，即為管理員。

4.4.2 管理員

管理員登錄系統(tǒng)后，在查看話題詳情時，話題及回復(fù)的右上角即會顯示刪除按鈕。管理員可以對所有話題與回復(fù)進行刪除操作，而普通用戶僅能操作自己發(fā)布話題與回復(fù)。如圖14所示。

5 系統(tǒng)測試

該次測試主要運用黑盒測試。黑盒測試主要是測試功能部件是否滿足要求。它是一種根據(jù)軟件需求，設(shè)計文檔，模擬客戶場景隨系統(tǒng)進行的實際測試[7]。該系統(tǒng)在瀏覽器環(huán)境下，對系統(tǒng)中的功能進行測試，包括鏈接的測試、表單的測試等。鏈接的測試包括點擊鏈接是否為真實鏈接，是否能夠正常跳轉(zhuǎn)顯示數(shù)據(jù)；表單的測試包括表單數(shù)據(jù)的驗證，表單數(shù)據(jù)提交后的驗證等。針對以上的測試內(nèi)容，編寫測試用例，進行測試。下面是針對發(fā)布話題模塊的測試用例和測試結(jié)果。

x

經(jīng)過測試，系統(tǒng)基本符合需求。前期測試時部分功能還未完善，測試過后，對這部分功能進行調(diào)整完善后，也已符合要求。

6 結(jié)束語

該系統(tǒng)使用現(xiàn)今較流行的框架實現(xiàn)了軟件開發(fā)論壇的基本功能，目前在瀏覽器運行良好，能夠適配移動端。至此，該系統(tǒng)實現(xiàn)了全部預(yù)定功能，用戶登錄后能夠管理個人信息，也能提出問題，與其他用戶進行討論與交流；超級管理員登錄后，可以對用戶的用戶組進行管理，給用戶賦予權(quán)限。雖然完成了基本功能，但是也有部分遺留問題，比如一些表單的前端驗證判斷還未能達到完美，用戶信息的安全性也尚未考慮，這都是以后需要再多加完善的地方。

參考文獻：

[1] 張秀坤. MVC設(shè)計模式在Web開發(fā)中的應(yīng)用研究[J]. 長春工程學(xué)院學(xué)報： 自然科學(xué)版， 2005， 6（3）：66-68.

[2] Nicholas C， Zakas. JavaScript高級程序設(shè)計[M]. 北京： 人民郵電出版社， 2012.

[3] 朱曉晶. 軟件工程需求分析方案的制定研究[J]. 信息通信， 2015（6）：163-164.

[4] 裴博杰. 大學(xué)生學(xué)習(xí)交流論壇的設(shè)計與實現(xiàn)[D]. 西安： 電子科技大學(xué)， 2013.

[5] 王建國. 數(shù)據(jù)庫設(shè)計在網(wǎng)站開發(fā)中的應(yīng)用[J]. 山東農(nóng)業(yè)工程學(xué)院學(xué)報， 2017， 34（4）：158-159.

[6] 路正佳. 基于ER圖的關(guān)系模型到XML轉(zhuǎn)換技術(shù)研究[D]. 大連： 大連海事大學(xué)， 2009.

[7] 胡靜. 淺析黑盒測試與白盒測試[J]. 衡水學(xué)院學(xué)報， 2008， 10（1）：30-32.

[通聯(lián)編輯：謝媛媛]