劉桃麗，曾志超

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

0 引 言

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

1 MVC框架簡介

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

2 MVC框架下網站的設計過程——以廣東海洋大學科技處網站為例

2.1 系統(tǒng)的整體架構設計

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

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

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

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

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

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

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

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

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

2.5 安全性問題

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

(1)XSS安全性問題。

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

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

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

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

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

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

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

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

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

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

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

(3)根據ip進行內外網管制。

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

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

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

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

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

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

圖2 科技處網站主界面

3 結束語

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