李瑩　何慶歡　劉宏健　張瀟達(dá)

摘要：“沈工校內(nèi)網(wǎng)”提供了一個(gè)校內(nèi)組織活動(dòng)、交友、拼車(chē)、窮游的環(huán)境，能讓學(xué)生豐富自己的業(yè)余生活，充分使用學(xué)校內(nèi)部資源，各取所需，所有活動(dòng)全部是校內(nèi)學(xué)生發(fā)起，實(shí)用實(shí)在。系統(tǒng)基本架構(gòu)為BIS結(jié)構(gòu)，采用流行的Win8界面風(fēng)格，開(kāi)發(fā)環(huán)境為Visual Studio 2013，數(shù)據(jù)庫(kù)為SQL Server2012。主要應(yīng)用MVC架構(gòu)以及BootStrap等技術(shù)來(lái)實(shí)現(xiàn)對(duì)內(nèi)部系統(tǒng)化的管理和頁(yè)面美工。

關(guān)鍵詞：Win8風(fēng)格；校園網(wǎng)；MVC架構(gòu)；BootStrap

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）19-0017-03

國(guó)內(nèi)比較知名的校內(nèi)網(wǎng)——“人人-校內(nèi)網(wǎng)”成立于2005年，已經(jīng)開(kāi)放3000所國(guó)內(nèi)大學(xué)和1500所海外大學(xué)；各大高校也都有類(lèi)似網(wǎng)站，但這些信息不足以滿足學(xué)生們的日常需求，大部分學(xué)生的日?；顒?dòng)還是非常少，其主要原因是信息針對(duì)性不強(qiáng)，不能讓學(xué)生組織真正屬于自己的業(yè)余活動(dòng)。另外所有網(wǎng)站界面設(shè)計(jì)普遍雷同，而現(xiàn)在的學(xué)生所使用的電腦基本都是Win8風(fēng)格，再加上智能手機(jī)的普及，有自適應(yīng)的網(wǎng)站更是少之又少。綜上，設(shè)計(jì)開(kāi)發(fā)了本系統(tǒng)。

1系統(tǒng)功能結(jié)構(gòu)圖

前臺(tái)主要有拼車(chē)，物品交易，活動(dòng)組織，招聘信息，圖片分享五大功能模塊，天氣預(yù)報(bào)功能關(guān)聯(lián)百度天氣，保證天氣的準(zhǔn)確，大喇叭由管理員添加，發(fā)布信息需要登錄后可以使用，系統(tǒng)功能模塊圖如圖1所示。

2后臺(tái)管理

后臺(tái)可以管理用戶(hù)、廣播、新聞、信息、廣告、食堂檔口等信息，用于清除一些非法用戶(hù)和廣播等內(nèi)容，及時(shí)處理網(wǎng)站上因人為因素造成的不良影響保證網(wǎng)站的正常運(yùn)轉(zhuǎn)，后臺(tái)管理模塊功能圖如圖2所示。

3ASP.NET MVC4框架

本網(wǎng)站采用MVC模式開(kāi)發(fā)，借鑒MVC的分離關(guān)注點(diǎn)思想合理分工，靈活開(kāi)發(fā)，大大提高開(kāi)發(fā)效率。并且大量使用了MVC4的特性，視圖使用Razor視圖及新語(yǔ)法。

MVC是一種使用MVC（Model View Controller模型一視圖一控制器）設(shè)計(jì)創(chuàng)建Web應(yīng)用程序的模式，其中M-V-C分別代表：

1）Model（模型）表示應(yīng)用程序核心（比如數(shù)據(jù)庫(kù)記錄列表），是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分。

2）View（視圖）顯示數(shù)據(jù)（數(shù)據(jù)庫(kù)記錄），是應(yīng)用程序中處理數(shù)據(jù)顯示的部分。

3）Controller（控制器）處理輸入（寫(xiě)人數(shù)據(jù)庫(kù)記錄）通?？刂破髫?fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶(hù)輸入，并向模型發(fā)送數(shù)據(jù)。

4三層架構(gòu)

根據(jù)需求分析的結(jié)果以及系統(tǒng)設(shè)計(jì)的要求，本網(wǎng)站系統(tǒng)采用三層架構(gòu)。三層架構(gòu)分別為表現(xiàn)層，業(yè)務(wù)邏輯層和數(shù)據(jù)訪問(wèn)層。在三層體系結(jié)構(gòu)中，利用表現(xiàn)層來(lái)收集，提交用戶(hù)請(qǐng)求，用業(yè)務(wù)邏輯層來(lái)處理業(yè)務(wù)規(guī)則，與數(shù)據(jù)庫(kù)的交互動(dòng)作則交給數(shù)據(jù)訪問(wèn)層來(lái)實(shí)現(xiàn)。

5Log4Net

本網(wǎng)站使用Log4net實(shí)現(xiàn)網(wǎng)站運(yùn)行過(guò)程中異常的記錄，通過(guò)Log4Net將異常或警告信息記錄到網(wǎng)站根目錄的一個(gè)日志記錄文件中，方便對(duì)網(wǎng)站運(yùn)行狀況的監(jiān)督。

Log4Net庫(kù)是Apache log4j框架在Microsoft.NET平臺(tái)的實(shí)現(xiàn)，是一個(gè)幫助程序員將日志信息輸出到各種目標(biāo)（控制臺(tái)、文件、數(shù)據(jù)庫(kù)等）的工具。

6基于SQL的數(shù)據(jù)庫(kù)依賴(lài)緩存一輪詢(xún)機(jī)制

在本網(wǎng)站中，通過(guò)數(shù)據(jù)庫(kù)緩存依賴(lài)，對(duì)一些比較頻繁查詢(xún)而且變化比較小的數(shù)據(jù)進(jìn)行了緩存，使網(wǎng)站在指定的間隔時(shí)間內(nèi)去檢查數(shù)據(jù)庫(kù)中的數(shù)據(jù)表是否發(fā)生變化。

在所有受支持的SQL Server版本上，SqlCacheDependency類(lèi)監(jiān)視特定SQL Server數(shù)據(jù)庫(kù)表。當(dāng)該表更改時(shí)，將從Cache中移除與該表關(guān)聯(lián)的項(xiàng)，并向Cache中添加該項(xiàng)的新版本。使用SqlCacheDependency數(shù)據(jù)庫(kù)緩存依賴(lài)，數(shù)據(jù)如果不變化，用戶(hù)就一直從緩存中取數(shù)據(jù)，一旦數(shù)據(jù)變化，系統(tǒng)能自動(dòng)更新緩存中的數(shù)據(jù)，從而讓用戶(hù)得到更好的用戶(hù)體驗(yàn)。

7服務(wù)器模擬瀏覽器技術(shù)

本網(wǎng)站的成績(jī)查詢(xún)模塊使用WebClient類(lèi)實(shí)現(xiàn)服務(wù)器端模擬瀏覽器完成成績(jī)查詢(xún)。首先通過(guò)WebClient類(lèi)訪問(wèn)教務(wù)處成績(jī)查詢(xún)的登錄頁(yè)面，下載所需要的Cookie和驗(yàn)證碼等信息，并顯示到本站的成績(jī)查詢(xún)頁(yè)面，用戶(hù)輸入賬號(hào)、密碼以及驗(yàn)證碼后，系統(tǒng)將用戶(hù)輸入的數(shù)據(jù)以及Cookie模擬表單提交到教務(wù)處網(wǎng)站，若用戶(hù)輸入的信息無(wú)誤，教務(wù)處會(huì)返回用戶(hù)的成績(jī)信息，下載到用戶(hù)成績(jī)信息后進(jìn)行篩選，顯示必要的成績(jī)信息到本網(wǎng)站。

8Bootstrap

Bootstrap是著名的社交網(wǎng)站、微博的先驅(qū)Twitter在2011年8月推出的開(kāi)源WEB前端框架，集合CSS和HTML，使用了最新的瀏覽器技術(shù)，為快速WEB開(kāi)發(fā)提供了一套前端工具包，包括布局、網(wǎng)格、表格、按鈕、表單、導(dǎo)航、提示等等。使用Bootstrap可以構(gòu)建出非常優(yōu)雅的前端界面，而且占用資源非常小。除此之外，BootStrap還有極佳的兼容性。

本網(wǎng)站的Metro風(fēng)格正是使用BootStrap來(lái)實(shí)現(xiàn)，大大提高了開(kāi)發(fā)效率，并且兼容IE7以上的瀏覽器以及其它主流瀏覽器（搜狗瀏覽器和360瀏覽器需要極速模式）。本網(wǎng)站主頁(yè)的各種圖標(biāo)也正是使用基于BootStrap的Font Awesome組件。

9JQueryEasyUI

JQuery EasyUI是基于JQuery的一個(gè)前臺(tái)UI界面的插件，目標(biāo)就是幫助web開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的uI界面。本網(wǎng)站的后臺(tái)管理系統(tǒng)頁(yè)面使用的就是jQueryEasyUI，對(duì)各種管理操作以及頁(yè)面布局的開(kāi)發(fā)效率有顯著的提高。

10AJAX

AJAX在瀏覽器與Web服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請(qǐng)求），這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁(yè)面。

在本系統(tǒng)中，為提高使用體驗(yàn)，大量的使用了AJAX技術(shù)。比如在翻頁(yè)過(guò)程，當(dāng)用戶(hù)點(diǎn)擊上一頁(yè)或下一頁(yè)的時(shí)候，只加載需要顯示的數(shù)據(jù)，而頁(yè)面其他部分不會(huì)刷新或重新加載。而且在后臺(tái)管理的JQuery EasyUI中更是完全使用AJAX來(lái)進(jìn)行瀏覽器與服務(wù)器的交互。

11阿里云OSS的應(yīng)用

阿里云OSS是一個(gè)云存儲(chǔ)服務(wù)，它提供任意地點(diǎn)的文件上傳和下載。

在本系統(tǒng)中，用戶(hù)在上傳圖片時(shí)，直接上傳到OSS上面，在網(wǎng)站加載圖片是也是直接從OSS加載圖片。這樣，在圖片量非常大的情況下對(duì)服務(wù)器也不會(huì)構(gòu)成壓力，提高了圖片文件上傳和加載的速度，而且大大節(jié)省了服務(wù)器的帶寬資源。

12主要界面設(shè)計(jì)

（1）前臺(tái)。本網(wǎng)站包含了大量交互性功能，使參加活動(dòng)、兼職等更加方便快捷。主界面如圖3所示。

（2）“出行/拼車(chē)”模塊。在主界面點(diǎn)擊“出行/拼車(chē)”，可查看出行/拼車(chē)信息，包括信息發(fā)布人、目的地、出發(fā)時(shí)間、說(shuō)明及聯(lián)系電話等。信息按時(shí)間發(fā)布順序排放，發(fā)布越晚排列越前，在搜索框中輸入目的地可對(duì)已發(fā)布的信息進(jìn)行模糊查詢(xún)。返回主界面請(qǐng)點(diǎn)擊界面上方的白色箭頭，如圖4所示。

（3）發(fā)布信息模塊。在主界面點(diǎn)擊“發(fā)布信息”，可以進(jìn)入到信息發(fā)布頁(yè)面，如圖5所示。選擇信息發(fā)布類(lèi)型，然后根據(jù)提示發(fā)布填寫(xiě)信息。

（4）招聘信息模塊。在主界面點(diǎn)擊“招聘信息”，可以看見(jiàn)近期發(fā)布的招聘信息，信息由學(xué)生或者管理員發(fā)布，如圖6所示。點(diǎn)擊某條招聘信息，可以查看詳細(xì)信息，如圖7所示。

（5）校園食堂模塊。在主界面點(diǎn)擊“校園食堂”，可以看見(jiàn)校園內(nèi)所有食堂檔口分類(lèi)信息，如圖8所示。點(diǎn)擊分類(lèi)名，可以看到詳細(xì)信息，如圖9所示為“米粉/面類(lèi)”詳細(xì)信息。此檔口分類(lèi)信息和詳細(xì)信息均由管理員添加，學(xué)生可以查看到。

（6）失物招領(lǐng)/成績(jī)查詢(xún)模塊。在網(wǎng)站主界面的左側(cè)下方，能夠看到“失物招領(lǐng)/成績(jī)查詢(xún)”信息。如圖10-11所示，“失物招領(lǐng)”不需登錄便可發(fā)布消息，方便用戶(hù)及時(shí)發(fā)布消息。