MVC架構下網站的設計與實現思考

張術梅

（大連交通大學信息學院 遼寧 大連 116045）

0 引言

MVC架構，就是對Web服務模式的進一步升級，然后對網站進行優化設計。通過MVC架構，能夠有效降低網站開發難度，對網絡背景下數據信息的安全性、網站使用安全而言具有積極的意義。同時，在對網站使用功能的擴展升級上，還有對網站后期使用維護方面，會比以往傳統模式下的網站而言更為簡單化，因此能滿足用戶對網站使用提出的更多需求，是當前更為可靠、先進的網站開發技術。

1 MVC架構概述

整體來看，MVC就是將模型-視圖-控制器統合起來的一種比較經典的網站開發模型，以此進行網站設計，能夠切實將網站的界面、相關數據信息、業務邏輯等多方面內容進行分離，將業務邏輯整合成一個部件中。通過這種方式進行網站設計，業務邏輯可不用重寫即可對網站界面進行個性化的設計和改進，同時還能達到用戶之間的交互功能[1]。除此，通過 MVC架構進行網站設計，其中所用的造價、維護成本、耦合性等特性都比較低，能夠更好促使軟件以工程化的形式進行管理。將MVC架構應用于網站開發中，最大目的在于分離視圖與模型，所有工作人員做好自身工作內容，進一步提升網站開發和設計的工作效率。

傳統ASP及JSP技術開發的網站，在動態網頁中會嵌有大量的業務邏輯程序代碼，該類程序的重復利用率比較低，在功能拓展方面也不強，并且后續的維護工作比較繁瑣，JSP液面是由HTML代碼和JAVA代碼組成的，客戶端請求指示輸入服務器中以后，JAVA代碼會自行處理相關信息，然后再將生成的HTML及頁面等信息反饋給客戶端的瀏覽器，不會使頁面的表現和邏輯偏離。如本網站類型的傳統網站設計，會存在著用戶互動性差、參與性差的缺點，比如用戶可以在網站中瀏覽信息，但是卻不能發布信息，如今的用戶都追求個性化的功能，希望能夠在登錄網站以后有自己的頁面，比如顏色和內容等方面，可以在系統登陸之后DIY布局。在MVC架構的支持下，網站的個性化特色更加明顯，以設計模型的方式提供了全新的開發框架。

2 MVC設計模型的原理與網站子系統

2.1 設計原理

MVC模式的概念就是“模式+視圖+控制器”，應用程序是由這3個部分組成，事件與控制器可以改變模式或者視圖，或者同時改變這2個元素，但是控制器改變了模式的數據或者屬性，那么視圖也會自動更新，同理控制器如果改變了視圖，視圖也會從模式中獲取新的數據更新內容。MVC模式其實是將一個應用的輸入、處理和輸出流程按照模式、視圖與控制器的方式進行分離，則網站的架構就被分為三個層次，分別對應著模型層、視圖層與控制層。其中視圖指代著用戶交互界面，對于網站的功能應用而言，可以用HTML界面來顯示，有可能會為模型接受視圖請求的數據，并給出最后的處理結果?？刂破骺梢越邮苡脩舻恼埱?，將模型和視圖匹配到一起，完成用戶的請求以后，分離模型、視圖和控制器，那么一個模型就可以得到多個顯示視圖，如果用戶用其中某一個視圖的控制器改變了數據，則其他依賴于這些視圖的控制器都會發生相應的變化，使得數據出現相應的更新，實際上可以成為模型變化的機制。

2.2 技術特點

該項技術具有較低的耦合性，視圖層和業務層的分離，則視圖層代碼可以被更改，并不需要重新編譯模型與控制器代碼，只需要根據業務規則改動MVC技術的模型層就可以達到理想的效果。該項技術具有較高的重用性和可適用性，在科學技術的影響下，訪問應用程序的方式更多，MVC模式允許用戶使用不同模式的視圖來訪問同一個服務器端口的代碼，也包括對WEB瀏覽器和無限瀏覽器的訪問。該項技術具有較低的生命周期成本，有效降低了用戶接入端口的開發費用與維護費用，并且后續的維修與修改非常便利，能夠快速地部署業務及功能，大大縮短了應用軟件的開發時間，使得程序員可以集中精力開發業務邏輯與表現形式的創新。該項技術的應用有助于實現軟件的工程化管理，不同層次的人員各司其職，每一層的管理人員都具有不同的職責，且工作的特征也有不同，工程化的管理可以使工具化的管理代碼應用于程序管理中，為具體的管理工作提供基礎條件。

3 MVC架構下網站的設計和實現——以XX網站為例

3.1 整體架構設計

XX網站基于MVC 3層架構模式開展網站設計，具體來講：（1）表示層，就是瀏覽器中用戶端所使用的前端，該層架構作用就是將用戶所需數據以相對簡單的方式展示給用戶；（2）業務邏輯層，該層架構設計作用就是相應用戶發出的請求，并根據其請求對數據庫進行增、刪、改、查等操作需求；（3）數據持久層，也就是數據層，該層目的在于科學存儲數據信息，為用戶在使用中提供更為高效率的數據增、刪、改、查的操作功能。

3.2 網站模塊設計

XX網站在進行模塊設計時可從以下幾個角度進行：（1）圖片管理，該模塊應用作用就是網站中管理者對用戶在首頁輪播圖片以及對成果展示版面中的圖片進行更換[2]；（2）通知公告管理，該模塊應用作用發布和展示相關公告信息；（3）文件管理，該層模塊的應用功能對網站中的文件進行下載、傳輸等功能操作；（4）搜索管理，主要是對整個網站系統提供搜索的使用功能；（5）用戶管理，是對使用該網站相關用戶的登錄、注冊以及網站中超級管理員賬戶進行增刪改查的管理；（6）研究平臺模塊，該模塊是基于網站本身的性質進行設計，為管理員提供可在網站中進行增刪改查的管理權限；（7）文章信息管理，該模塊是基于編輯器來進行操作，為網站提供文章發布的途徑和方式。

3.3 網站業務流程

XX網站在使用過程中，因面對用戶不同，其業務流程也因此存在一定的不同之處。如果只是普通網站用戶，其業務流程相對比較簡單，主要是瀏覽XX網站中發布的相關通知、公告、辦事所需文檔等內容。一般網站中的下載任務可分為兩種：一種為年報下載，用戶可根據自身需要選擇特定年份的年報；另一種為專區文件下載，用戶可通過網站的首頁來查看當前可下載的文件信息，然后根據需要通過下載專區進行文件下載和查看。除此，網站還會設置搜索這一功能，用戶可通過輸入關鍵詞進行全站搜索，如果出現自己需要的內容時，網站會以分頁的方式將搜索內容呈現給用戶。

管理員在進行網站管理時可通過以下流程進行：（1）在網站首頁入口登錄，然后進入后臺管理系統，對網站文章增刪改發等相關操作[3]；（2）管理人員可對網頁中的輪播圖片的使用進行相應管理，對其進行修改和指向相應的連接，對網站中的展示效果圖進行更改和添加，對文件進行上傳、刪除等。從整體上來看網站業務流程非常多，網站可根據自身使用性質進行相應設計。

3.4 網站數據庫設計

本次網站系統主要采用MySQL來進行數據庫管理，該系統是基于數據與數據間存在的關聯，通過對數據進行分類放在相應表格進行管理，對于表格設計，可根據該網站的性質進行創建，主要有年度報表、通知表、文章表、政策法規等。

3.5 網站安全性設計

對于一個網站而言，其使用安全性非常重要，這對于網站未來的正常運轉、數據安全性、網站是否會被黑客入侵等具有直接性影響，因此在進行網站設計時，應將安全性作為重點內容進行設計。就本次XX網站設計而言，該網站的安全性問題主要在于防止XSS、SQL注入網站中。

（1）對于XSS，也就是跨腳本攻擊。具體來講，若當前網站存在XSS漏洞問題情況下，攻擊者就會向其中注入具有惡意性質的HTML代碼，客戶在使用網站時，網站就會自動執行攻擊者注入的代碼，從而引發各種各樣的問題。例如，用戶在瀏覽網站過程中，可能會強行進入到指定網站，網頁因此被破壞，用戶信息也可能會被盜取等，以上都是當前比較常見的安全性問題[4]。整體上，跨腳本攻擊，主要是對客戶端進行攻擊，具有被動式特征，而這也是網站開發者容易忽視的設計內容。對此開發者在進行網站設計時，應做好對所有輸入代碼的篩選和過濾工作，對存在攻擊性語句進行轉義處理，能夠在最短時間內將用戶輸入的代碼轉為能夠執行的代碼進行存儲處理。在展示時能夠將執行代碼轉為文本信息，這樣做的目的在于對用戶信息起到保護作用，有效防止可執行代碼直接在網站前臺頁面暴露，這對于進一步強化網站在使用中的安全性具有積極性意義。

（2）對于SQL數據庫，其在應用中比較常見問題主要是注入性問題。對于注入性問題，簡單來講就是攻擊者在網站數據庫引擎中注入惡意數據庫命令，然后對服務器進行相應的操作，通過這種方式來獲得數據庫中各項數據的查閱權限。這種安全性帶來的后果就是網站中的重要數據發生泄露，特別是用戶名及其密碼名單是當前最容易被攻擊的部分。為有效解決這類安全問題，可采取以下兩種方法進行處理：①對SQL命令進行參數化處理，也可以通過存儲過程對數據進行相應的查詢和獲取，將動態拼裝命令去除；②用戶在輸入所查詢內容時，系統對此進行相應的轉換和校驗。通過以上，能夠最大化地改善網站數據庫在使用過程中遇到的注入性安全問題。

3.6 關鍵技術的設計和實現

（1）對于XX網站中的圖片進行傳輸和文件下載時，本次網站設計采用百度ueditor編輯器為核心插件，該插件具有非常強的使用功能，能夠基本滿足當前系統所需要的各項使用需求。但在實際使用中還是存在一些不足之處，若用戶上傳的圖片比較大，系統就會默認將原圖大小顯示出來，這種情況下也就使得最終呈現出來的圖片鋪面整個顯示屏。對于該問題的解決方式主要在于源碼查詢，通過對圖片的高、寬等參數進行自適應設置，但這種設置方式又會引發另一問題：無論圖片大小，最終寬度統一[5]。而ueditor編輯器能夠為網站提供兩個上傳按鈕，一個按鈕采取單圖的方式進行上傳；另一個按鈕采取多圖的方式進行上傳。對此可通過折中的方式進行上傳，如果圖片大，可通過單圖按鈕完成上傳操作，最后圖片呈現效果就是原本設定好的寬度參數；如果圖片小，可采取多圖按鈕完成上傳操作。除此，ueditor編輯器添加附件后，若文件格式為.txt或.pdf等，對該格式下的附件進行下載操作時，網站就會直接解析。通過查看源碼，資源鏈接只是使用一個簡單標簽，對此可通過對源碼進行修改，用戶點擊附件就會避免被網站直接解析，并通知網站開始下載操作[6]。

（2）在進行該網站設計時，大部分內容采用分頁加載技術進行設計。相比較于其他系統存在的不同之處，以往都是直接將頁碼拿到前端，通過limit即可直接查詢，但本系統中數據庫設計采用type字段進行設計，將數據資源根據類型進行劃分，且這些數據的順序錯綜復雜，如果需要對其中某項type類數據采取分頁加載，每一次加載后的數據會對最后一條數據ID進行記錄，以此作為下次分頁起點，這種設計方式的優勢在于ID建立索引，能夠起到對系統性能的優化作用。

（3）完成該網站的基本功能開發后，對于客戶提出的其他需求，應做好對內外網的管制工作[7]。例如，若XX網站為校園網，部分內容只能通過校園網進行查看和下載操作，為解決這種使用需求，可通過以下兩種方式：①對數據庫表進行修改，通過添加字段的方式進行區分，決定外網的使用權限，但這種方式不夠現實，因修改規模比較大，對開發者而言具有非常大的難度；②新增表格，該表格主要用于具有校園網使用權限的用戶進行資源查看和下載。除此，為更好地強化網站系統在使用中的響應能力，可通過數據緩存、監聽等技術，降低網站在操作中的性能損耗，進一步強化其響應能力。

3.7 前端頁面的簡要展示

該網站的主界面9個主要的選項卡功能，以此構成的展示區域，包括部門首頁、組織機構及政策法規等信息，還有科研平臺、科技成果及知識產權等功能，主要是用于對外展示該單位的科研成果及最新動態，包括該單位的一些科研資料等，有時會在主頁上發布通知及文件。該網頁的科技處后臺需要管理人員用特定的賬號登錄，才能擁有操作權限，后臺的管理人員可以發布關于科學類的資料，或者調整網站的管理功能，平臺上的系統會根據不同類型的文章，按照類別發布到對應的模塊上。管理員可以分布的信息并不固定，可以發布學術年報、其他網站的連接或者該單位最新的科技動態等。

3.8 系統使用的效果

該網站在設計時經過了系統測試的環節，該環節也是一款應用軟件在上架前的最后環節，本網站通過白盒測試與黑盒測試以后，經歷半年的試用期，確認穩定才能正式登錄上線使用。該網站上線使用距今已有兩年的時間，期間因為需求的問題已經對系統的功能實現相應的拓展，期間并沒有出現任何的安全事故與相關問題，該系統的運行非常流暢，而且使用效果是比較好的，滿足了本單位的基本要求，在性能方面也能夠滿足實用的要求。

4 結語

綜上所述，基于MVC架構來進行網站研發和設計，進一步提升網站在未來使用中的維護效率和質量，有效保證數據在其中的安全性?；诖?，相關開發人員應重視對該方面的研發，使其更好地應用于網站設計中。同時，設計人員要針對網站中的數據安全進行完善，針對XSS與SQL等問題做出有效的防范，以保證數據的安全性，經過改造后的系統可以上傳編輯器改造以后的圖片，應用數據表格的分頁加載技術以后，本網站對外網的訪問權限也做出了相應的限制，已經大幅度地提升了網站系統對信息的響應速度和數據的安全性。尤其是經過了兩年的使用以后，驗證了該網站系統的運行是比較穩定的，無論是數據的安全方面，還是功能的擴展方面，都具有一定的優勢。