MVC架構(gòu)下網(wǎng)站的設(shè)計與實現(xiàn)

劉桃麗，曾志超

(廣東海洋大學(xué) 數(shù)學(xué)與計算機學(xué)院，廣東 湛江 524008)

0 引 言

隨著科技的高速發(fā)展，互聯(lián)網(wǎng)已經(jīng)成為了各個部門工作上必不可少的一項工具。各類機構(gòu)內(nèi)部的各項工作的提出、組織、記錄、總結(jié)和展示，都可以通過網(wǎng)站來實現(xiàn)。網(wǎng)站全面包含了科技成果的發(fā)表和展示，網(wǎng)絡(luò)，可以有效地對工作中必要的數(shù)據(jù)進行記錄和查詢，提高工作效率。因此，網(wǎng)站的設(shè)計和開發(fā)變得尤為重要，不僅要滿足客戶的需求，保證數(shù)據(jù)的安全，并且應(yīng)該具有功能可擴展性、升級便利以及便利的后期系統(tǒng)維護。文中以廣東海洋大學(xué)科技處網(wǎng)站為例，采用MVC架構(gòu)及相關(guān)技術(shù)進行開發(fā)，很好地解決了以上問題。

1 MVC框架簡介

MVC，即Model View Controller，是模型(model)-視圖(view)-控制器(controller)的縮寫[1-2]，是一種經(jīng)典的軟件開發(fā)設(shè)計模型。這種設(shè)計模式將業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離開來，將業(yè)務(wù)邏輯聚集到一個部件里面，這樣的設(shè)計模式，不需要重寫業(yè)務(wù)邏輯，就可以輕松改進和個性化定制界面及用戶交互[3]。同時MVC框架具有耦合性低、重寫性高、生命周期成本低、可維護性低、有利于軟件工程化管理等特點。使用MVC設(shè)計模式，主要的目的是使模型和視圖實現(xiàn)分離，里邊各類專業(yè)人員各司其職，從而大大提升開發(fā)效率[4]。

2 MVC框架下網(wǎng)站的設(shè)計過程——以廣東海洋大學(xué)科技處網(wǎng)站為例

2.1 系統(tǒng)的整體架構(gòu)設(shè)計

廣東海洋大學(xué)科技處根據(jù)MVC三層架構(gòu)的模式進行架構(gòu)設(shè)計。表示層，即用戶瀏覽器前端，主要用途是將用戶所需要的數(shù)據(jù)盡可能簡潔美觀地呈現(xiàn)出來；業(yè)務(wù)邏輯層，主要是對用戶的請求進行響應(yīng)，并根據(jù)用戶需求對數(shù)據(jù)庫進行相應(yīng)的增刪改查操作，本網(wǎng)站的業(yè)務(wù)邏輯層主要提供了科技成果、科技動態(tài)、科技新聞、科研成果、組織機構(gòu)、知識產(chǎn)權(quán)、學(xué)術(shù)活動和辦事指南等類型文章的相關(guān)接口，以及其他附加相關(guān)業(yè)務(wù)接口；數(shù)據(jù)持久層，即數(shù)據(jù)庫，主要功能是將用戶產(chǎn)生的大量數(shù)據(jù)進行有規(guī)律的存儲，并提供高效的增刪改查功能。

2.2 系統(tǒng)的整體模塊設(shè)計

廣東海洋大學(xué)科技處系統(tǒng)主要分為7大模塊：圖片管理模塊、通知公告管理模塊、文件模塊、搜索模塊、用戶模塊、科研平臺模塊、文章信息模塊。圖片管理模塊主要功能是管理員對首頁輪播圖片和成果展示版面圖片的更替，通知公告模塊主要功能是對科技處必要公告的發(fā)布和展示，文件模塊功能為網(wǎng)站的文件上傳和下載等管理，搜索模塊為系統(tǒng)提供整體的搜索功能，用戶模塊主要是科技處成員的登錄注冊以及超級管理員的賬戶增刪改查管理，科研平臺模塊為管理員提供平臺機構(gòu)的增刪改查管理，文章信息模塊則通過一個編輯器，提供了方便的文章發(fā)布途徑。各模塊及其功能如圖1所示。

2.3 系統(tǒng)的主要業(yè)務(wù)流程

廣東海洋大學(xué)科技處網(wǎng)站面向不同用戶時，主要業(yè)務(wù)流程也各不相同。對于普通的網(wǎng)站使用用戶而言，業(yè)務(wù)較為簡單，主要為瀏覽科技處發(fā)布的相關(guān)通知與新聞與下載辦事所需的各類文檔、模板或是年度總結(jié)文檔?？萍继幘W(wǎng)站的下載業(yè)務(wù)分為年報下載與下載專區(qū)文件下載。下載年報時，可以自主選擇下載特定年度的年報；而下載專區(qū)文件可在首頁查看最新可下載文件，并且還可進入下載專區(qū)，查看并下載各個分區(qū)下的文件?？萍继幘W(wǎng)站還設(shè)有全站搜索功能，用戶可以在搜索框中輸入關(guān)鍵字，進行全站搜索，當存在相關(guān)內(nèi)容時，會分頁展示所有相關(guān)內(nèi)容。除此之外，用戶還可以通過導(dǎo)航欄的入口查看部門職能說明、科研平臺介紹等內(nèi)容。

圖1 廣東海洋大學(xué)科技處系統(tǒng)模塊功能

科技處網(wǎng)站的管理人員需要管理站點時，首先需要通過首頁入口登錄后臺管理系統(tǒng)，進入后臺后，可以對各個分類的文章進行添加、修改、刪除與發(fā)布操作。同時，管理員登錄科技處網(wǎng)站后臺管理系統(tǒng)還可對首頁輪播圖進行管理，修改輪播圖展示圖片與指向鏈接；添加、修改科技成果板塊的展示圖；上傳、刪除年報，下載專區(qū)的文件；設(shè)置首頁漂浮盒標題與指向內(nèi)容等。系統(tǒng)的業(yè)務(wù)流程圖有很多，最為簡單的為用戶登錄流程，也有較為復(fù)雜的業(yè)務(wù)，比如用戶文件的發(fā)布、上傳和下載等。

2.4 系統(tǒng)數(shù)據(jù)庫設(shè)計

該系統(tǒng)使用MySQL[5]數(shù)據(jù)庫來管理用戶數(shù)據(jù)。MySQL是一種關(guān)系數(shù)據(jù)庫管理系統(tǒng)，該數(shù)據(jù)庫系統(tǒng)根據(jù)數(shù)據(jù)之間的關(guān)系，靈活地將不同的數(shù)據(jù)存放在不同的數(shù)據(jù)表格中，數(shù)據(jù)庫創(chuàng)建的表有很多，主要包括學(xué)術(shù)年報表、通知表、校園文章表、其他文章表以及相關(guān)的政策法規(guī)、科研平臺表等。

2.5 安全性問題

網(wǎng)站的安全性問題至關(guān)重要，涉及到網(wǎng)站能否正常運行，數(shù)據(jù)是否安全，內(nèi)容是否容易被非法入侵者篡改，服務(wù)器是否容易被控制和攻擊等方面[6-7]。因此安全性問題是每一個成熟的系統(tǒng)都比較重視的問題[8]。該系統(tǒng)主要的安全性問題是防止XSS和SQL注入。

(1)XSS安全性問題。

XSS指的是跨腳本攻擊[9]，攻擊者向存在XSS漏洞的網(wǎng)站中注入惡意HTML代碼，當客戶打開該網(wǎng)頁時，會自動執(zhí)行此惡意代碼，從而導(dǎo)致一系列的問題，比如強行定向跳轉(zhuǎn)到指定網(wǎng)站，惡意破壞網(wǎng)頁，盜取用戶信息等[10]。這是網(wǎng)站中最常遇見的安全性問題。由于跨腳本攻擊是針對客戶端的攻擊方式，這種被動式的攻擊最容易被開發(fā)者忽視，因此也成為最常見的系統(tǒng)安全漏洞。

針對這類問題，該系統(tǒng)對所有的注入可能進行了嚴格的篩選和過濾，對用戶的一些攻擊性語句進行轉(zhuǎn)義，及將用戶輸入的代碼轉(zhuǎn)換成可執(zhí)行代碼進行存儲，而在展示的時候?qū)⒖蓤?zhí)行代碼轉(zhuǎn)變成文本信息，從而起到保護隔離的作用，避免可執(zhí)行代碼直接暴露在前臺頁面，大大提高網(wǎng)頁的安全性。

(2)SQL數(shù)據(jù)庫安全性問題。

在使用SQL數(shù)據(jù)庫系統(tǒng)時，最常見的問題就是注入性問題[11]。所謂的注入性問題，就是非法入侵者使用某些惡意的數(shù)據(jù)庫命令注入到數(shù)據(jù)庫的引擎中，對服務(wù)器進行欺騙性操作，從而獲取數(shù)據(jù)庫的相關(guān)表格的查詢權(quán)限。此類問題最容易引起的后果就是數(shù)據(jù)泄露，如重要的用戶名和密碼的表單，是被攻擊的重災(zāi)區(qū)。

為了解決此類問題，該系統(tǒng)采用的處理方法有兩種，一是使用參數(shù)化的SQL命令或者只是使用存儲過程進行數(shù)據(jù)的查詢與存取，舍棄動態(tài)拼裝命令[12]；二是對用戶的查詢輸入進行校驗和轉(zhuǎn)換。通過這兩種方法可以在很大程度上解決數(shù)據(jù)庫的注入性問題。

2.6 系統(tǒng)的關(guān)鍵技術(shù)實現(xiàn)

(1)ueditor圖片上傳文件下載。

該系統(tǒng)使用的一個核心插件是百度提供的ueditor編輯器[13]，它功能非常強大，基本上可以滿足系統(tǒng)的所有需求。但是在使用該插件的過程中，發(fā)現(xiàn)它也還是有缺陷的。當用戶上傳一張很大的圖片時，它默認顯示原圖片大小，因此最后的效果就是占滿了整個屏幕。解決該問題的方案便是查詢源碼，給該圖片設(shè)置寬度，高度自適應(yīng)。但是這樣又會有一個問題，不管是大圖還是小圖，最后都使用了統(tǒng)一設(shè)置的寬度。ueditor編輯器提供了兩個上傳圖片的按鈕，一個是simpleupload單圖上傳，一個是insertimage多圖上傳。因此采取折中的做法，就是當圖片比較大時，用simpleupload按鈕來上傳，最后效果便是給設(shè)定的寬度；當圖片是小圖或者是想顯示原圖大小時，就用insertimage按鈕來上傳。

另一個問題就是在ueditor添加附件后，如果是.txt或者.pdf等格式文件，點擊該附件下載時，瀏覽器直接解析了。查看源碼發(fā)現(xiàn)，只是用了一個a標簽進行簡單的資源鏈接而已。因此，通過修改源碼，用戶點擊附件之后不會被瀏覽器直接解析，而是會通知瀏覽器進行下載。

(2)同張表多類型數(shù)據(jù)分頁加載。

該系統(tǒng)在很多地方都用了分頁加載技術(shù)，但該系統(tǒng)中的分頁加載技術(shù)跟以往很多系統(tǒng)不同。以前系統(tǒng)進行分頁加載的做法是直接拿到前端傳過來的頁碼，使用limit就可以直接從數(shù)據(jù)庫中查出來。但在該系統(tǒng)中，由于數(shù)據(jù)庫中多數(shù)表的設(shè)計用了一個type字段，該字段劃分了不同類型的數(shù)據(jù)資源，而且它們在數(shù)據(jù)庫中順序錯綜復(fù)雜。當要對某一種type類型數(shù)據(jù)進行分頁加載時，比如每頁加載20條數(shù)據(jù)時，每一次分頁加載的數(shù)據(jù)，需要記錄最后一條數(shù)據(jù)的id，將最后一條數(shù)據(jù)的id作為下一次分頁的起點。當然用id作為一個定位還有一個好處就是，id是主鍵，是建立了索引的，因此大大優(yōu)化了系統(tǒng)的性能[14]。

(3)根據(jù)ip進行內(nèi)外網(wǎng)管制。

在系統(tǒng)基本開發(fā)完成的時候，客戶新增需求需要對內(nèi)外網(wǎng)進行管制?？蛻粢笥行﹥?nèi)容只能是校園網(wǎng)才能查看和下載。為了實現(xiàn)該需求，有兩種方案，一種是修改數(shù)據(jù)庫表，給每個表添加一個字段，用于區(qū)分外網(wǎng)是否可用查看或下載。但是這種方案有點不太理想，因為修改數(shù)據(jù)庫表的話，意味著很多東西都要修改，而大規(guī)模的修改對于開發(fā)者無疑是一個災(zāi)難。因此采取了第二種方案，即新增一個表，用于存放校園網(wǎng)能查看和下載的資源。畢竟大部分資源外網(wǎng)都是能查看和下載的，只有少部分是只有校園網(wǎng)用戶才能查看的?；谶@樣的思想，新增了一個表，因此在前端返回數(shù)據(jù)時，根據(jù)用戶的ip，如果是外網(wǎng)，則需要過濾校園表中的數(shù)據(jù)，如果是內(nèi)網(wǎng)，則不需要過濾校園表中的數(shù)據(jù)。另外，為了提高系統(tǒng)的響應(yīng)性能，利用了數(shù)據(jù)緩存技術(shù)[14]和數(shù)據(jù)監(jiān)聽技術(shù)[15]，不僅減少了數(shù)據(jù)庫操作帶來的系統(tǒng)性能損耗，同時也大大提高了系統(tǒng)的響應(yīng)性能。

2.7 系統(tǒng)前端頁面簡要展示

主界面由“部門首頁、組織機構(gòu)、政策法規(guī)、科研平臺、科技成果、知識產(chǎn)權(quán)、學(xué)術(shù)活動、學(xué)年報告、辦事指南”9個選項卡構(gòu)成，如圖2所示。首頁主要用途是對外展示廣東海洋大學(xué)科技處的科研成果、科研資料以及最新科技動態(tài)等，還包括以下科技處內(nèi)部的通知、管理類文件的查看和下載。

科技處的后臺管理員界面需要管理員以管理員身份登錄后才有足夠的操作權(quán)限。后臺管理員可發(fā)布“自然科學(xué)類，人文科學(xué)類，成果與知識產(chǎn)權(quán)類”的文章，發(fā)布后，系統(tǒng)會根據(jù)不同的類型到不同的模塊上展示。管理員可以發(fā)布學(xué)術(shù)年報、鏈接其他網(wǎng)站的科技動態(tài)等功能。

2.8 系統(tǒng)使用效果

系統(tǒng)測試是一款應(yīng)用軟件上架前重要的一環(huán)。該網(wǎng)站通過白盒測試、黑盒測試以及半年的試用期后，于2017年3月份正式上線使用，系統(tǒng)上線至今已經(jīng)兩年，期間除因為需求問題對系統(tǒng)進行相應(yīng)的擴展之外，未出現(xiàn)任何安全事故以及其他使用上的問題，而且系統(tǒng)運行流暢，使用效果良好，性能完全達到了客戶要求。

圖2 科技處網(wǎng)站主界面

3 結(jié)束語

廣東海洋大學(xué)網(wǎng)站是一個高效的工作網(wǎng)站，其涉及MVC設(shè)計模式的開發(fā)，使得系統(tǒng)具有很好的維護效率和質(zhì)量。為了加強網(wǎng)站的安全性能，尤其是針對數(shù)據(jù)安全，特別對XSS和SQL注入問題進行了防范，確保了數(shù)據(jù)安全。系統(tǒng)采用改造后的ueditor編輯器對圖片上傳和下載進行處理，并采用數(shù)據(jù)表格分頁加載技術(shù)，針對校園網(wǎng)使用要求，對內(nèi)網(wǎng)和外網(wǎng)給予不同的訪問權(quán)限，對外網(wǎng)訪問權(quán)限進行了相應(yīng)的限制。以上種種措施，大大提高了系統(tǒng)的響應(yīng)速度和數(shù)據(jù)的安全性。經(jīng)過半年的測試及兩年的使用，結(jié)果表明該網(wǎng)站運行穩(wěn)定、數(shù)據(jù)安全、擴展方便、維護便利。