基于.NET的沈小工校园网的设计与实现

李莹　何庆欢　刘宏健　张潇达

摘要：“沈工校内网”提供了一个校内组织活动、交友、拼车、穷游的环境，能让学生丰富自己的业余生活，充分使用学校内部资源，各取所需，所有活动全部是校内学生发起，实用实在。系统基本架构为BIS结构，采用流行的Win8界面风格，开发环境为Visual Studio 2013，数据库为SQL Server2012。主要应用MVC架构以及BootStrap等技术来实现对内部系统化的管理和页面美工。

关键词：Win8风格；校园网；MVC架构；BootStrap

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）19-0017-03

国内比较知名的校内网——“人人-校内网”成立于2005年，已经开放3000所国内大学和1500所海外大学；各大高校也都有类似网站，但这些信息不足以满足学生们的日常需求，大部分学生的日常活动还是非常少，其主要原因是信息针对性不强，不能让学生组织真正属于自己的业余活动。另外所有网站界面设计普遍雷同，而现在的学生所使用的电脑基本都是Win8风格，再加上智能手机的普及，有自适应的网站更是少之又少。综上，设计开发了本系统。

1系统功能结构图

前台主要有拼车，物品交易，活动组织，招聘信息，图片分享五大功能模块，天气预报功能关联百度天气，保证天气的准确，大喇叭由管理员添加，发布信息需要登录后可以使用，系统功能模块图如图1所示。

2后台管理

后台可以管理用户、广播、新闻、信息、广告、食堂档口等信息，用于清除一些非法用户和广播等内容，及时处理网站上因人为因素造成的不良影响保证网站的正常运转，后台管理模块功能图如图2所示。

3ASP.NET MVC4框架

本网站采用MVC模式开发，借鉴MVC的分离关注点思想合理分工，灵活开发，大大提高开发效率。并且大量使用了MVC4的特性，视图使用Razor视图及新语法。

MVC是一种使用MVC（Model View Controller模型一视图一控制器）设计创建Web应用程序的模式，其中M-V-C分别代表：

1）Model（模型）表示应用程序核心（比如数据库记录列表），是应用程序中用于处理应用程序数据逻辑的部分。

2）View（视图）显示数据（数据库记录），是应用程序中处理数据显示的部分。

3）Controller（控制器）处理输入（写人数据库记录）通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

4三层架构

根据需求分析的结果以及系统设计的要求，本网站系统采用三层架构。三层架构分别为表现层，业务逻辑层和数据访问层。在三层体系结构中，利用表现层来收集，提交用户请求，用业务逻辑层来处理业务规则，与数据库的交互动作则交给数据访问层来实现。

5Log4Net

本网站使用Log4net实现网站运行过程中异常的记录，通过Log4Net将异常或警告信息记录到网站根目录的一个日志记录文件中，方便对网站运行状况的监督。

Log4Net库是Apache log4j框架在Microsoft.NET平台的实现，是一个帮助程序员将日志信息输出到各种目标（控制台、文件、数据库等）的工具。

6基于SQL的数据库依赖缓存一轮询机制

在本网站中，通过数据库缓存依赖，对一些比较频繁查询而且变化比较小的数据进行了缓存，使网站在指定的间隔时间内去检查数据库中的数据表是否发生变化。

在所有受支持的SQL Server版本上，SqlCacheDependency类监视特定SQL Server数据库表。当该表更改时，将从Cache中移除与该表关联的项，并向Cache中添加该项的新版本。使用SqlCacheDependency数据库缓存依赖，数据如果不变化，用户就一直从缓存中取数据，一旦数据变化，系统能自动更新缓存中的数据，从而让用户得到更好的用户体验。

7服务器模拟浏览器技术

本网站的成绩查询模块使用WebClient类实现服务器端模拟浏览器完成成绩查询。首先通过WebClient类访问教务处成绩查询的登录页面，下载所需要的Cookie和验证码等信息，并显示到本站的成绩查询页面，用户输入账号、密码以及验证码后，系统将用户输入的数据以及Cookie模拟表单提交到教务处网站，若用户输入的信息无误，教务处会返回用户的成绩信息，下载到用户成绩信息后进行筛选，显示必要的成绩信息到本网站。

8Bootstrap

Bootstrap是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架，集合CSS和HTML，使用了最新的浏览器技术，为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。除此之外，BootStrap还有极佳的兼容性。

本网站的Metro风格正是使用BootStrap来实现，大大提高了开发效率，并且兼容IE7以上的浏览器以及其它主流浏览器（搜狗浏览器和360浏览器需要极速模式）。本网站主页的各种图标也正是使用基于BootStrap的Font Awesome组件。

9JQueryEasyUI

JQuery EasyUI是基于JQuery的一个前台UI界面的插件，目标就是帮助web开发者更轻松的打造出功能丰富并且美观的uI界面。本网站的后台管理系统页面使用的就是jQueryEasyUI，对各种管理操作以及页面布局的开发效率有显著的提高。

10AJAX

AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

在本系统中，为提高使用体验，大量的使用了AJAX技术。比如在翻页过程，当用户点击上一页或下一页的时候，只加载需要显示的数据，而页面其他部分不会刷新或重新加载。而且在后台管理的JQuery EasyUI中更是完全使用AJAX来进行浏览器与服务器的交互。

11阿里云OSS的应用

阿里云OSS是一个云存储服务，它提供任意地点的文件上传和下载。

在本系统中，用户在上传图片时，直接上传到OSS上面，在网站加载图片是也是直接从OSS加载图片。这样，在图片量非常大的情况下对服务器也不会构成压力，提高了图片文件上传和加载的速度，而且大大节省了服务器的带宽资源。

12主要界面设计

（1）前台。本网站包含了大量交互性功能，使参加活动、兼职等更加方便快捷。主界面如图3所示。

（2）“出行/拼车”模块。在主界面点击“出行/拼车”，可查看出行/拼车信息，包括信息发布人、目的地、出发时间、说明及联系电话等。信息按时间发布顺序排放，发布越晚排列越前，在搜索框中输入目的地可对已发布的信息进行模糊查询。返回主界面请点击界面上方的白色箭头，如图4所示。

（3）发布信息模块。在主界面点击“发布信息”，可以进入到信息发布页面，如图5所示。选择信息发布类型，然后根据提示发布填写信息。

（4）招聘信息模块。在主界面点击“招聘信息”，可以看见近期发布的招聘信息，信息由学生或者管理员发布，如图6所示。点击某条招聘信息，可以查看详细信息，如图7所示。

（5）校园食堂模块。在主界面点击“校园食堂”，可以看见校园内所有食堂档口分类信息，如图8所示。点击分类名，可以看到详细信息，如图9所示为“米粉/面类”详细信息。此档口分类信息和详细信息均由管理员添加，学生可以查看到。

（6）失物招领/成绩查询模块。在网站主界面的左侧下方，能够看到“失物招领/成绩查询”信息。如图10-11所示，“失物招领”不需登录便可发布消息，方便用户及时发布消息。