基于響應式動態網站模式的校園互助系統開發

張銀霞，閆佳莉，趙雪雯，周 晨

（北京聯合大學師范學院，北京 100101）

0 引言

近年來，中國高校的規模不斷擴大，大學生的校園生活豐富多彩，也延伸出各種各樣的需求，比如：公共必修課學習中遇到難題和困惑，需要找尋更為專業的校友求助；學習、社團活動等時間緊張時，需要請人幫忙代取快遞、食堂打飯等；校園尋求考研、考證、留學的同伴；勤工儉學的需求、二手物品交易或贈送需求等。

現代的大學校園里，隨處可見使用平板電腦、筆記本電腦的大學生，手機更是常見，幾乎人手一機。在大學校園張貼求助廣告的現象已不復存在，當需要尋求幫助時，所有人都會想利用手機的便捷性、足不出戶就能達成愿望。

基于此現象，希望開發一款利用各類移動終端和網絡實現校園互助的系統，來滿足大學生大學校園生活的實際需求，為學生之間互助提供智能化的溝通交流平臺，最大化利用資源。因此，將本系統命名為“想你所想”校園互助系統。

1 系統分析與設計

1.1 系統功能結構設計

基于當前大學生校園生活實際需求，確定本系統的功能版塊有：“食堂超市”“幫我取”“幫我買”“幫我送”“幫我學”“幫我尋”“幫我售”和“系統管理”八大模塊。

“食堂超市”版塊功能：提供食堂和超市的物品清單，幫助用戶了解和選擇要購買的商品的詳細信息。

“幫我取”版塊功能：取快遞、取資料、取鑰匙、取衣服等事務處理。

“幫我買”版塊功能：買食堂飯菜、買超市物品、買飲品、買藥品等事務處理。

“幫我送”版塊功能：送文件、送禮物、送鑰匙等事務處理。

“幫我學”版塊功能：課程學習及復習的互助交流、資源共享等事務處理。

“幫我尋”版塊功能：失物尋主、主尋失物等事務處理。

“幫我售”版塊功能：閑置物品處置的事務處理。

本系統由客戶端和服務器端兩部分組成，可以接受三種用戶角色訪問，分別為：需求者、接單者、管理員。

以需求者身份訪問，主要實現“注冊”“登錄”“發布需求信息”“瀏覽物品”“用戶私信溝通”等功能。

以接單者身份訪問，主要實現訂單的查看及接單，回復用戶私信等功能。

以系統管理員身份訪問，主要實現從后臺管理頁面進行超市食堂商品的增加、刪除、修改，用戶積分的增減，用戶信息的審核及刪除等功能。

需求者、接單者身份訪問實現的客戶端功能，主要是為了給用戶帶來比較便捷和舒心的使用感受，同時便于系統對于用戶信用的測評。

管理員身份訪問，主要通過后臺服務器端對用戶所發布的內容進行監管，以及物品的上架，保證此系統安全的使用環境和物品信息的及時性，還可對信用較好、較活躍的用戶進行增加積分的操作，以此來激勵用戶。

本系統的功能模塊間的組織結構如圖1所示。

圖1 “想你所想”校園互助系統功能模塊組織結構

1.2 系統開發使用的技術

考慮到大學生們有日常使用手機、平板電腦、筆記本電腦等移動終端的習慣，為增加更好的用戶體驗，使其隨時隨地隨意使用該系統，故在技術方面考慮將其開發成可以跨平臺、跨系統使用的軟件產品，不局限于僅能選擇運行在Android、IOS、Windows 單一系統下，達到一次開發多平臺應用的效果。

因此，本系統選擇采用基于瀏覽器/服務器（Browser/Server，B/S）架構的服務器端動態網站開發技術進行開發，無需單獨安裝額外的APP，不消耗額外的移動終端的存儲空間，就可通過手機、平板電腦、移動電腦等終端的瀏覽器訪問使用該系統。

1.2.1 ASP.NET動態網站編程技術

創建動態網站的一種強大的服務器端新技術，隸屬于微軟.NET體系結構，對.NET類庫具有全面訪問權限，基于Visual Studio 可視化開發環境、使用面向對象的程序設計語言、ADO.NET、服務器端控件開發交互式網站［1］。

1.2.2 面向對象的編程語言C#

C#簡單易用，面向對象程度比Java 還要高、是完全的面向對象；實施了最嚴格的類型安全機制，可以進行邊界、算術運算溢出檢查等；盡可能通過DLL來提高運行效率。

1.2.3 數據庫服務器SQL Server2012

SQL Server 2012 是為開發者提供的數據庫系統開發工具，主要的作用是對數據進行保存［2］。它操作簡單、有良好的伸縮性、可跨越多種大型的處理器的服務器平臺使用，可以改善ASP.NET動態網站存儲數據的效率。

1.2.4 運行方式——響應式網站

響應式網站是一種網頁布局能夠兼容多個終端、適應不同分辨率屏幕的網站，具有同一個后臺，多終端自動適應的特點，不需再給每一種不同顯示器尺寸的設備重新制定一個網站版本。它具有使用便捷、應用性強、可以獨立設計、與數據庫同步、設計方案靈活等優點。

1.2.5 Bootstrap框架

Bootstrap 框架是采用HTML、CSS、JavaScript所編寫的前端開發架構，由動態CSS 代碼Less所編寫而成，需要依賴于JQuery 才能正常執行，支持響應式布局，用于開發響應式布局、移動設備優先的Web 項目［3］。

Bootstrap 柵格系統是網格系統，主要是為將網頁設計分割為等寬的列，進而利用序列數的概念進行模塊化網頁設計。

1.2.6 CSS網頁布局

CSS 網頁布局一般分為頭部、導航菜單部分、網頁內容部分、底部，涉及正常布局流、display屬性、彈性盒子、網格、浮動、定位、CSS 表格布局、多列布局等多種技術［4］。

1.2.7 HTML5

HTML5（hypertext markup language 5）是互聯網新一代標準，是構建網頁內容的一種語言描述方式，增加了對多媒體音視頻支持的＜audio＞、＜video＞標簽，還具有智能表單、數據存儲、多線程等功能。

1.3 系統開發環境部署

本系統使用集成開發環境Visual Studio 2013，ASP.NET 服務端網站開發技術；采用的開發語言為C#、HTML5 等；采用的數據庫服務器為SQL Server 2012。

本系統客戶端運行方式：響應式網頁。

本系統服務器端運行方式：電腦端動態網頁。

圖2 校園互助系統架構

2 系統核心功能模塊的設計與實現

2.1 網頁響應式布局的設計與實現

在本系統中，對于有統一顯示風格的頁面，使用ASP.NET 的母版頁來設計。在母版頁中，使用Bootstrap 框架技術實現頁面的響應式布局，實現的核心代碼如圖3～圖6所示。

圖3 標簽中應用Bootstrap布局文件的引用

圖4 標簽中