基于.NET的沈小工校園網(wǎng)的設(shè)計與實現(xiàn)

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

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

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

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

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

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

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

2后臺管理

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

3ASP.NET MVC4框架

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

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

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

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

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

4三層架構(gòu)

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

5Log4Net

本網(wǎng)站使用Log4net實現(xiàn)網(wǎng)站運行過程中異常的記錄，通過Log4Net將異?；蚓嫘畔⒂涗浀骄W(wǎng)站根目錄的一個日志記錄文件中，方便對網(wǎng)站運行狀況的監(jiān)督。

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

6基于SQL的數(shù)據(jù)庫依賴緩存一輪詢機制

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

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

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

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

8Bootstrap

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

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

9JQueryEasyUI

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

10AJAX

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

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

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

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

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

12主要界面設(shè)計

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

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

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

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

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

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