1、校园门户网站的设计与实现 内容摘要校园门户网站是学校一道亮丽的风景线。由于网络的进步，时代的变迁。使得门户这个主题的服务有着进一步飞跃，从从搜索服务跳跃到新闻服务，再后来，门户网站因竞争激烈从而形成不同方向的分支来开拓新的领域、新的业务来留住用户。校园门户的主题也紧被大家深究及开发。校园门户网站可以公开校内环境，学生学习氛围、学习状态等，主要为了展现学校总体实力，从而提高校外知名度、学校形象。以及为浏览者的资源获取提供了重要渠道，实现信息共享。本次主要是对校园门户网站进行设计与实现。校园门户网站的前端界面使用bootstrap框架搭建以及采用ajax+json的数据交互方式。后端使用SSM框架
2、和mysql数据库实现了前后端的交互、业务逻辑的处理、和数据的传递。实现了校园门户网站里的新闻快讯、校园概括、校园风采、学生天地等的功能。校园门户网站是一个学校的门面。这些功能不仅可以满足浏览者的基本需求。并且在很大程度上可以提高学校知名度和学校形象。 关键词：校园门户网站 学校形象 bootstrap 第1章引言1.1背景分析门户网站是获取互联网资源提供的信息服务的系统，门户网站起初的雏形是搜索引擎、目录服务等等。由于网络的进步，时代的变迁。使得门户这个主题的服务有着进一步飞跃，从从搜索服务跳跃到新闻服务，再后来，门户网站因竞争激烈从而形成不同方向的分支来开拓新的领域、新的业务来留住用户。以
3、至于门户网站的业务五彩缤纷，成为互联网里的“大杂烩”。随着互联网的发展，电脑在世界各地大范围普及，互联网信息的作用更加明显突出，人类从网络上能收集到有效的信息愈来愈多，而且也更愿意在网络上收集打探信息。“在信息科技迅猛发展的今天，信息化的研发和应用不断成为我们工作、生活、学习等方面的重要工作。高校门户网站是学校信息化建设的工作 1。”。所以，学校应当重视自己的工作，努力打造一个好的门户网，努力维护好自己的门户网。在门户网站这个主题里，各地高校紧握其发展的门把，校园网站的建设也初步开展起来并慢慢深入向综合性方向发展，形成了比较成熟的基于网络的校园信息服务体系。具有一大批的综合性信息服务功能的校园
4、门户网站从而破壳而出，“校园门户网站”的说法也由此而来。1.2选题意义与目的近年来校园收集的信息与发布对效率的要求逐步上升，且电脑与网络的普及已很广泛，有些学校甚至配备了平板电脑，由此可见校园信息化已经成为各地高校教育改革与发展的一个主要趋势，本次论文设计是使用springmvc，spring，mybatis框架作为后端技术，bootstrap+jqeury+ajax作为前端技术所设计的校园门户系统，这是学校用来展示校园风趣风貌，展示学校教学成果、近况、学生的生活日常、学习心得的一个重要渠道与工具。从而提高教学水平质量、学生学习状态的透明度、提高学校的竞争实力以及学校形象、实现综合信息共享的目
5、的。校园门户网站首要的是要做到校园信息的共享，包括学生寝室里生活情况，课堂上学生的学习状态，竞赛后学生作品的展示等。当然想要突出学校的教育水平还得分享老师们的课题研究成果，这是学校教学硬实力的体现。浏览者可以通过校园门户网站来了解到学校的教学水平，学生们的学习氛围，了解学校的状况，获取写作素材，学习个人的学习心得等等。1.3相关开发工具和技术介绍1.3.1 IDEA简介IDEA全称叫IntelliJ IDEA,是Java编程语言的集成环境。很多使用过IDEA的业界人都称赞这个开发工具，它提倡智能编码，尽可能减少程序员的基础编码和操作，使得程序员更加注重业务逻辑的开发，IDEA的功能使用非常便利
6、，相比于eclipse更有优势例如:完善的代码自动提示功能，对项目提供单元测试junit框架，对git之类的代码版本管理工具的整合非常方便、最重要的是对重构的支持、对JavaEE的支持、对总多编码文件的支持等等。这样的开发工具使得纵多开发人员爱不释手。1.3.2 MySQL数据库数据库在我们系统开发中是必不可少的，它负责储存我们的数据信息，如今有很多关系型数据库管理系统，例如:oracle、sqlsever、mysql等等，开发小型网站一般使用的是MySL数据库，MySQL是一个开发源码的关系型数据库，由瑞典公司MySQL AB开发，后被Oracle公司收购，现在属于Oracle公司。正因为它
7、的开放性，使用简单性，免费性吸引了大批用户。同时这个数据库管理系统的性能在不断优化，其支持的功能和平台也在逐渐增加。为了解决各个数据库系统的操纵标准不同的而带来学习成本增加的问题，关系型数据库为我们制定了一套操作数据库的标准SQL结构化查询语句，大部分数据库都遵循这套标准，同时它们还可以根据自己的业务做进一步拓展。MySQL数据库也是实现了这个SQL标准。1.3.3 java简介Java是一款面向对象的编程语言，由sun公司研发，起初叫Oak语言后改名为java，现隶属于oracle公司。Java可分为三个版本:javaSE，javaME和JavaEE。JAVASE是用来开发桌面级的应用程序，
8、并且该版本的语法作为JAVA语言的基础语法。JAVAME主要是为电子产品和嵌入式设备提供解决方案。JAVAEE主要是针对web方面的应用程序的开发。JAVA这么受欢迎的原因在于他的跨平台性，简单性，安全性和开源等等。JAVA只需要一次的编译即可运行在多个平台上，并且它在一定程度上解决了传统的解释语言执行效率低的问题。它的面向对象编程特点以及JDK为我们提供大量的解决方法和常用类，我们只需要调用方法就行，并不需要去知道这个方法的实现过程。1.3.4 SpringMVC Spring Mybatis简介(1) SpringMVC简介SpringMVC是表现层框架，如名字所言采用的是MVC设计模式，
9、它一般用来与前台数据进行交互。故此叫SpringMVC，在没有使用Spring MVC之类的框架的时候，一般会使用JavaEE中的servlet来接收和处理前台发送的请求，但是以这种方式来做会有大量的冗余代码，而且不同的开发者可能会有不同的写法。“因此为构建高效、灵活且易于使用的模型-视图-控制器(MVC)模式实现机制,提出一种基于Spring框架的MVC框架2。”SpringMVC是Spring框架里头的一个小模块，它能和Spring框架无缝集成，这也是Spring MVC越来越受开发者喜爱的原因之一，SpringMvc框架抽象了一些冗余代码并且制定一套标准，开发者必须遵循这套标准编写代码，
10、并且提供了一些好用的类和方法，除此以外，它还提供了很多类和方法供我们使用。(2) Spring简介Spring是一个轻量级框架，主要用于简化复杂的开发，使得开发者专注于业务需求的实现。“Spring框架包含依赖注入方式的构件组装机制、统一的事务和日志管理服务等,为搭建轻量级的J2EE架构提供了有力的支持3。”Spring框架主要有两个特点:AOP和IOC，AOP的中文是面向切片编程，它可以统一处理异常和打印日志，并且将这些日志、事物和业务逻辑代码分离开来。这样一来，业务逻辑层代码更加清晰明确，维护性大大提高。IOC的中文是控制反转，将我们的对象的生命周期交给Spring容器控制，并且通过依赖注
11、入的方式，把Spring容器创建好的对象通过构造器、set等方法注入到需要应用对象的场景中。 (3) Mybatis简介MyBatis是一个持久层框架。在没有使用MyBatis之类的持久层框架的时候，我们一般使用的是JDBC技术。在操作数据时，我们首先要注册驱动，创建连接对象Connection然后获取执行sql语句的对象的preparedStatement这一系列繁琐的操作，由此看来代码十分冗余，而Mybatis之类的持久层框架就帮我们封装了这些繁琐的代码。让我们开发者可以专注于sql语句的编写。Mybatis相比其他持久层框架有优势的一点在于Mybatis能够在xml文件编写sql语句并且
12、经过配置后能够和接口完成自动关联映射，复用性和维护性大大提高。 第2章 系统分析2.1系统设计目标校园门户网站主要面向两个角色，一是浏览者，而是后台管理员。浏览者可以任意浏览校园门户网站前台模块，本系统的后台管理员需要输入账号密码登陆网站后才可以通过后台操作界面对本系统的内容进行实时更新，增添修改删除，例如新闻快讯素材，学生天地、校园概况等模块，这样在校的学生可以使用学校的电脑进入校园门户网站通过自由浏览阅读网站不同模块内容能够快速获取自己需要的信息收集素材，在外的人员也可以通过本网站浏览相关学校资料，学生相关信息，也同样可以感受到校内学习气氛，更是能在网站上看到本校学生分享的学习心得，收获甚
13、多，最终也能达到宣传本校的一个目的。这样一个显露学生日常学习的状态、学习氛围和学习环境透明度高的网站也更能吸引外来学生、家长围观。2.2系统可行性分析可行性分析是综合项目的需求以及各种应用技术和市场进行研究和分析比较最后为项目提供依据的综合系统分析法。“可行性分析是软件开发过程的一个重要阶段也是项目决策的依据5。”本系统主要是实现对校园信息的管理，主要分为前台和后台两个部分，前台用来展示不同模块的信息，以便浏览者进站后能够快速定位并且收集到自己需要的信息，后台则系统管理员可以通过指定的网址登录后台操作界面，通过后台操作界面来对各个模块的信息进行添加，对待完善的信息进行更改，对没用的信息进行删除
14、。后台与前台进行数据交互后连接数据库储存管理员操作后的结果，供浏览的前台也实时同步后台取出数据库的数据。管理员完成操作后，后台操作界面会有信息反馈。由此可见系统不是很复杂，主要的难点是如何解决储存信息内容部分，前后台交互用什么技术、后台使用ssm框架如何实现。2.3系统需求分析系统需求分析是一个项目的开端，也是项目的基石，是软件一个必经的关键过程。“管理系统的开发是每个企业不可或缺的，而随着时间推移，许多系统不得不进行大量的更改甚至是重新开发，造成时间、金钱上的损失不等，究其原因，主要是开发先期没有进行良好的需求分析4。”需求分析员进行项目需求分析的水准可以直接影响一个项目系统的设计，所以对项
15、目需求分析把握的程度越高，项目成功的概率也越高。在这一过程中，需要明确客户的需求，只有明确了客户的需求后，各部人员才能够进一步去分析系统解决的方案，明确系统功能模块设计以及数据库的模型设计等等。（1）浏览者的需求：a.浏览者能够查看一些时事新闻消息来积累写作素材。b.浏览者能够查看学校提前发出的通知消息。c.浏览者能够查看学生们分享自己的生活学习消息。d.浏览者能够查看校园的风采风貌特点特色消息。e.浏览者能够查看校园创建至此大致的状况的消息。f.浏览者能够查看学校网站发布的招生招聘消息。（2）管理员的需求：a.要有一个后台管理系统来管理各个模块。 b.新闻模块能够进行查询、添加、删除、更改。
16、c.通知模块能够进行查询、添加、删除、更改。d.学生天地模块能够进行查询、添加、删除、更改。e.校园风采模块能够进行查询、添加、删除、更改。f.校园概况模块能够进行查询、添加、删除、更改。 g.招揽模块能够进行查询、添加、删除、更改。第3章 系统总体设计3.1 总体功能模块设计校园门户网站由首页、新闻模块、校园概况模块、校园风采模块、学生天地模块、通知模块、招揽模块等模块构成。如图3-1所示各个功能模块介绍如下：(1)首页:首页由新闻模块、校园概况模块、校园风采模块、学生天地模块、通知模块的导航构成。浏览者进入校园门户网站后都可以在首页模块看到各类模块的导航，阅览者可以自行选择点击想要阅读的模
17、块的导航以此进入模块内容详情列表。(2)新闻模块: 浏览者可以在新闻模块浏览校内时事新闻，阅览者浏览该模块后还可以做新闻素材的摘抄。后台管理员负责将新闻的新增，更新、和删除。(3)校园概况模块: 浏览者在校园概况模块可以了解到创校至今学校的大致情况。后台管理员则负责校园概况信息的新增，更新、和删除。(4)校园风采模块: 浏览者在校园风采模块可以知道学校的风光事件，比如校庆，元旦晚会等。后台管理员则负责校园风采信息的新增，更新、和删除。(5)学生天地模块: 浏览者可以在学生天地模块了解学生多姿多彩的生活和学习，还能阅朗学生分享的学习方法和心得。后台管理员则负责学生天地消息的新增，更新、和删除。(
18、6)通知模块: 浏览者及本校学生可以在通知模块收到学校活动，假期安排的通知。后台管理员则负责通知模块消息的新增，更新、和删除。(7)招揽模块: 浏览者可以通过学校网站的招生招聘查看招生，招聘详细内容。后台管理员则负责招揽信息的新增，更新、和删除。图3-1总体功能设计图3.2 数据库设计数据库技术对一个项目系统尤为重要。“数据库技术是计算机科学中发展最快的领域之一,也是应用最广的技术之一,它已成为计算机信息系统与应用系统的核心技术和重要基础6。”一个完善的系统离不开优秀的数据库设计，一个好的数据库设计可以提高系统的维护性，拓展性和复用性。本文的数据库设计主要分为系统实体属性设计，系统实体E-R图
19、设计、和实体数据表的设计。3.2.1系统实体属性新闻信息表（新闻id，新闻标题，新闻添加日期，作者，新闻内容）校园概况信息表（校园概况id，校园概况标题，校园概况添加日期，作者，校园概况内容）校园风采信息表（校园风采id，校园风采标题，校园风采添加日期，作者，校园风采内容）学生天地信息表（学生天地id，学生天地标题，学生天地添加日期，作者，学生天地内容）通知模块信息表（通知id，通知标题，通知添加日期，作者，通知内容）招揽模块信息表（招揽id，招揽标题，招揽添加日期，作者，招揽内容）3.2.2系统E-R图设计新闻实体E-R设计如图3-2所示图3-2新闻表E-R实体图校园概况实体E-R设计如图3
20、-3所示图3-3校园概况表E-R实体图校园风采E-R设计如图3-4所示图3-4校园风采表E-R实体图学生天地E-R设计如图3-5所示图3-5学生天地表E-R实体图通知E-R设计如图3-6所示图3-6通知表E-R实体图招聘E-R设计如图3-7所示图3-7招揽表E-R实体图3.2.2系统数据表的设计结合管理员和用户的需求分析及实体属性，我们对各个模块的表设计如下：新闻信息表（新闻id，新闻标题，新闻添加日期，作者，新闻内容）如表3-8所示表3-8新闻信息表列名说明数据类型/大小约束id新闻idInt(30)主键、非空title新闻标题varchar(30)无addtime新闻添加时间date()无
21、author作者varchar(10)无content新闻内容varchar(10000)无校园概况信息表（校园概况id，校园概况标题，校园概况添加日期，作者，校园概况内容）如表3-9所示表3-9校园概况信息表列名说明数据类型/大小约束id校园概况idInt(30)主键、非空title校园概况标题varchar(30)无addtime校园概况添加时间date()无author作者varchar(10)无content校园概况内容varchar(10000)无校园风采信息表（校园风采id，校园风采标题，校园风采添加日期，作者，校园风采内容）如表3-10所示表3-10校园风采信息表列名说明数据类型
22、/大小约束id校园风采idInt(30)主键、非空title校园风采标题varchar(30)无addtime校园风采添加时间date()无author作者varchar(10)无content校园风采内容varchar(10000)无学生天地信息表（学生天地id，学生天地标题，学生天地添加日期，作者，学生天地内容）如表3-11所示表3-11学生天地信息表列名说明数据类型/大小约束id学生天地idInt(30)主键、非空title学生天地标题varchar(30)无addtime学生天地添加时间date()无author作者varchar(10)无content学生天地内容varchar(10
23、000)无通知模块信息表（通知id，通知标题，通知添加日期，作者，通知内容）如表3-12所示表3-12通知模块信息表列名说明数据类型/大小约束id通知idInt(30)主键、非空title通知标题varchar(30)无addtime通知添加时间date()无author作者varchar(10)无content通知内容varchar(10000)无招揽模块信息表（招揽id，招揽标题，招揽添加日期，作者，招揽内容）如表3-13所示表3-13招聘模块信息表列名说明数据类型/大小约束id通知idInt(30)主键、非空title通知标题varchar(30)无addtime通知添加时间date()
24、无author作者varchar(10)无content通知内容varchar(10000)无3.3系统架构设计一个系统要想有高的拓展性、维护性就必须要使用分层开发的模式。Web项目一般使用三层架构的开发模式。“通常意义上的三层架构就是将整个业务应用划分为:表现层(UI)、业务逻辑层(BLL)、数据访问层(DAL)7。”各层分工明确，每层都针对具体的问题处理不同流程，所以校园门户网站也采用三层开发的模式。3.3.1 表现层“在分层软件系统中,表现层用于接收用户指令和数据输入,是系统中的重要组成部分8。”表现层采用MVC的设计模式，在校园门户网站系统中M指的是javabean，V指的是Html前
25、台显示界面，C指的是Controller，Controller负责筛选用户请求资源和路径并且调用业务逻辑层的接口来进行对业务模块流程的控制并且与前台页面进行数据交互。如图3-14所示图3-14表现层简图3.3.2 业务逻辑层“业务逻辑层代码中混杂各种数据库调用语句,严重影响系统的可扩展性、可复用性、可维护性。9”为了解决这个问题，各界开发者将业务逻辑层与数据访问层单独分离开来，掌管各自的功能，分工更加细化。在软件开发的体系结构中，业务逻辑层是有关键作用的，它处于表现层和业务层之间，用于处理繁琐的业务逻辑并且将处理结果返回表现层或数据访问层，再由表现层通过控制器的一系列操作后返回给显示层，这样显
26、示层就不可以直接操作数据库，必须经过表示层的控制器进行筛选后调用相应的业务逻辑层的指定方法进行业务逻辑处理，再操作数据库。这样一来，系统的层次清晰明确，系统拓展性，复用性，健壮性大大提高。本系统的业务逻辑层目录如图3-15所示：图3-15业务逻辑层简图3.3.3 数据访问层数据访问层（Data Access）也叫持久层，它的作用是访问数据库并且将经业务逻辑层处理后的数据持久化到数据库中，同时也可以从数据库中取出数据提交给上一层处理，也就是业务逻辑层。数据经过业务逻辑层的处理后提交到表现层。“所以在分层架构中最为重要的一层就是DAO层，DAO完成了业务对象到关系数据库的转换。8”系统使用了Myb
27、atis作为数据访问层的框架，提高了系统的复用性、可扩展性。并在一定程度上减少冗余的代码。 第4章 系统实现4.1用户浏览模块设计用户浏览模块主要是大家都能够看到的页面，里面分为首页，新闻快讯，校园概况，校园风采，学生天地，通知公告和招揽。这个模块包含了校园门户网站的基本功能。4.1.1首页首页是进入网站第一个看到的页面，在主体部分使用了轮播图展示学校象征性图片和使用子导航的方法将模块里的每个功能入口分成不同区域。可以让浏览者进站后清楚定位每个功能入口的位置，提高用户的体验感，增强交互性。首页设计效果如下图：图4-1首页4.1.2新闻快讯新闻快讯主要是报道校内新闻，以及当前的有关教育改革等的实
28、时新闻，可以快速提供给浏览者相关信息。新闻快讯功能在首页的子导航栏上，浏览者只需点击新闻快讯链接即可到达新闻标题列表页面，新闻标题列表页面会对新闻标题数据进行分页，提供页面选择按钮，并且在左下方提示浏览者新闻快讯总共页面。然后浏览者可点击有关的标题列表项链接进入到新闻内容详情，即可了解到新闻相关信息。 如下图：图4-2 新闻标题列表页面图4-3 新闻内容详情页面4.1.3校园概况校园概况主要是先浏览者展示学校的大概情况，浏览者可以通过校园概况迅速了解这个学校的信息。校园概况功能在首页的子导航栏上，浏览者只需点击校园概况链接即可到达校园概况标题列表页面，校园概况标题列表页面会对校园概况标题数据进
29、行分页，提供页码选择按钮，并且在左下方提示浏览者校园概况总共页码。然后浏览者可点击有关的标题列表项链接进入到校园概况详情，即可了解到校园概况信息。如下图：图4-4 校园概况标题列表页面图4-5 校园概况内容详情页面4.1.4校园风采校园风采主要是先浏览者展示学校的风采事件，浏览者可以通过校园风采了解到这个学校的风光。校园风采功能在首页的子导航栏上，浏览者只需点击校园风采链接即可到达校园风采标题列表页面，校园风采标题列表页面会对校园风采标题数据进行分页，提供页码选择按钮，并且在左下方提示浏览者校园风采总共页码。然后浏览者可点击有关的标题列表项链接进入到校园风采详情，即可了解到校园风采信息。如下图
30、：图4-6 校园风采标题列表页面图4-7 校园风采内容详情页面4.1.5学生天地学生天地主要是向浏览者展示学生的学习、宿舍、娱乐生活，浏览者可以通过学生天地了解到这个学校的学生的基本生活。学生天地功能在首页的子导航栏上，浏览者只需点击学生天地链接即可到达学生天地标题列表页面，学生天地标题列表页面会对学生天地标题数据进行分页，提供页码选择按钮，并且在左下方提示浏览者学生天地总共页码。然后浏览者可点击有关的标题列表项链接进入到学生天地详情，即可了解到学生天地信息。如下图：图4-8 学生天地标题列表页面图4-9 学生天地内容详情页面4.1.6通知公告 通知公告主要是向浏览者告知本校开学事项、放假日期、安全注意事项等等。通知通告功能在首页的子导航栏上，浏览者只需点击通知通告链接即可到达通知通告标题列表页面，通知通告标题列表页面会对通知通告标题数据进行分页，提供页码选择按钮，并且在左下方提示浏览者通知通告总共页码。然后浏览者可点击有关的标题列表项链接进入到通知通告详情，即可了解到通知通告信息。如下图： 图4-10 通知公告标题列表页面图4-11 通知公告内容详情页面4.1.7招生招聘招生招聘主要是告知浏览者本校招生要求，招生事项等等。招生招聘功能在首页的子导航栏上，浏览者只需点击通知通告链接即可到达招生招聘标题列表页面，招生招聘标题列表页面会对招生招聘标题数据进行分页，提供页码选
