【附源码】基于HTML5的冬奥会网站的设计与实现f1ho59计算机毕设SSM

项目运行环境配置：

Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。

项目技术：

Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成，B/S模式 + Maven管理等等。

环境需要

1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。

2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;

3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可

4.硬件环境：windows 7/8/10 4G内存以上；或者 Mac OS；

5.是否Maven项目: 否；查看源码目录中是否包含pom.xml；若包含，则为maven项目，否则为非maven项目

6.数据库：MySql 5.7/8.0等版本均可；

毕设帮助，指导，本源码分享，调试部署(见文末)

3.3可行性分析

3.3.1经济可行性

本项目经济可行性，主要是考虑前期所需的投入和后期项目上线后维护费用，服务器费用和后期产生的经济效益是否能保证整个项目的运行。

在前期投入方面，由于开发工具都是开源免费的，所以开发工具花费比较小，主要是开发人力资源的投入[12]。在保证项目的质量下，这方面的支出还是比较少的。

另外项目完成交付之后，项目的推广也需要一部分支出，这部分也是非常重要的环节，用户使用数目的多少将直接决定后期的盈利。在上线时还要考虑后期管理和维护的费用。

从以上分析来看，前期的投入和后期收益，可以保证整个项目运转前提下，获得的额外盈利还是可观的。

3.3.2技术可行性

本次开发主要是为了打造区别于传统的冬奥会管理形式的网站。在网络允许条件下，用户可在任何地方任何场所进入网站浏览相关内容。软件的主要逻辑是：用户进入网站页面然后进行各种点击操作，处理用户各种点击操作请求，业务逻辑处理以及访问数据库几个过程；如果把这三个功能放在一块，代码会显得很复杂，对后期的维护很不方便。于是，笔者经过查询相关资料最终决定采用MVC设计模式，MVC模式将代码按照功能分为三层，提高扩展性和维护性[13]。

系统将采用Windows+Eclipse+MySQL+Java的组合开发完成，前端采用的是HTML5，当前技术已经被很多人采用，并被反复证明是有效成熟的，因此成功率一般比较高。此外，成熟技术经过长期使用、补充和优化，其优化度、可操作性和经济性均良好。后台数据的处理则是通过Java和ssm合作。软件把用户提交的数据经过后端系统的处理后，供以用户查看和操作。

在确定好开发环境的整个项目大致方向之后，笔者循序渐进地学习相关技术，早日完成开发。由此看来，技术可行性也是没有问题的。

3.3.3社会可行性

在这个交通便捷、信息通畅的时代，人们可以选择的管理方式渐渐多了起来，对于网络、系统的依赖也越来越大。电子信息、教学界都需要快速的发展和进步。这些行业的发展对人们有着很大的影响。对我们的祖国才能更迅速的发展起来，以完成党和国家的百年奋斗目标。而把科技发展和工业发展连接起来，二者相互推动进在目前看来是一个大的趋势。现在正是各个国家比拼各自科技的时代，这样一来，冬奥会信息管理就变得十分重要。同时，冬奥会网站大大提升了使用者的使用体验，符合当今社会的发展背景和发展方向[14]。

3.4系统用例分析

本系统分为二部分进行设计，后台主体分别是用户、管理员；其用例分别如下：

管理员用例图如图3-1所示。

图3-1 管理员用例图

用户用例图如图3-2所示。

图3-2 用户用例图

3.5软硬件需求

浏览器：IE 8.1（推荐6.0以上）

前端开发技术：HTML5

开发使用语言：Java

JDK版本：JDK_8

数据库管理系统软件：Mysql

运行平台：Windows 7

运行环境：Eclipse

3.6系统流程图

本系统登录流程图，如图3-3所示。

图3-3 登录流程图

本系统添加信息流程图，如图3-4所示。

图3-4 添加信息流程图

四 系统设计

4.1系统设计总体描述

总体上看，冬奥会网站具有注册登录、个人中心、用户信息、新闻类型、冬奥新闻、完整跟踪、精彩视频、运动员、志愿者报名、留言交流等功能模块。以下为几个主要模块简单介绍：

注册登录：提供给用户注册登录的页面，完成用户的注册登录功能。

个人中心：对个人信息进行更新。

冬奥新闻：管理员点击冬奥新闻页面查询、新增或删除冬奥新闻。

志愿者报名：管理员点击志愿者报名页面查询或删除志愿者报名。

系统总体功能结构图如下所示：

图4-1系统总体结构图

4.2数据库设计

4.2.1 数据库系统

构建一个冬奥会网站数据库是必不可少的，而我们使用的是MySQL关系数据库，开发工具是时下热门的Navicat for MySQL开发。MySQL有着信息卓越、服务稳定并且开源，可以不用担心费用问题，对于个人的管理及维护上也十分便捷，Navicat有着简洁的界面和稳定的开发环境，还拥有着优秀的图形用户界面。

4.2.2数据库实体及属性

冬奥新闻实体属性图，如图4-2所示。

图4-2冬奥新闻实体属性图

用户信息实体属性图，如图4-3所示。

图4-3用户信息实体属性图

志愿者报名实体属性图，如图4-4所示。

图4-4志愿者报名实体属性图

5.1 前台功能模块的实现

当游客打开系统的网址后，首先看到的就是首页界面。在这里，游客能够看到冬奥会网站的导航条显示首页、冬奥新闻、完整跟踪、精彩视频、完整风采、运动员、留言交流、通知公告、后台管理、个人中心。系统首页界面如图5-1所示：

图5-1系统首页界面

在系统首页点击中间的注册/登录按钮，然后页面跳转到注册登录界面，后来输入信息完成后，单击注册或者登录操作，如图5-2所示：

图5-2用户注册、用户登录界面

用户点击冬奥新闻，在冬奥新闻页面的搜索栏输入新闻标题，进行查询，然后查看新闻标题、封面、新闻类型、发布时间、来源，还可以查看新闻内容、收藏或者评论等操作；如图5-3所示：

图5-3冬奥新闻页面

用户点击完整跟踪，在完整跟踪页面的搜索栏输入事件标题进行查询，然后查看事件标题、封面、跟踪赛事、比赛时间、更新时间，还可以收藏等操作；如图5-4所示：

图5-4完整跟踪页面

用户点击精彩视频，在精彩视频页面的搜索栏输入视频名称、赛事名称进行查询，然后查看视频名称、封面、赛事名称、视频、发布时期，还可以收藏或赞一下等操作；如图5-5所示：

图5-5精彩视频页面

在个人中心页面可以输入个人详细信息，进行信息更新操作，还可以对我的发布、我的收藏进行详细操作，如图5-6所示：

  图5-6 个人中心界面

5.2 管理员功能的实现

管理员登录，通过登录页面填写用户名和密码后选择角色，点击登录操作，如图5-7所示。

图5-7管理员登录界面图

管理员登录进入系统可以查看首页、个人中心、用户管理、新闻类型管理、冬奥新闻管理、完整跟踪管理、精彩视频管理、运动员管理、志愿者报名管理、留言交流、系统管理等功能进行详细操作，如图5-8所示。

图5-8管理员功能界面图

管理员点击用户管理；在用户管理页面输入用户账号、用户姓名、头像、性别、手机号码、邮箱、身份证号进行查询，新增或删除用户信息等操作；如图5-9所示。

图5-9用户管理界面图

管理员点击新闻类型管理；在新闻类型管理页面输入新闻类型信息等信息，进行查询，新增或删除新闻类型等操作；如图5-10所示。

图5-10新闻类型管理界面图

管理员点击冬奥新闻管理；在冬奥新闻管理页面输入新闻标题、封面、新闻类型、发布时间、来源等信息，进行查询，新增或删除冬奥新闻等操作；如图5-11所示。

图5-11冬奥新闻管理界面图

管理员点击完整跟踪管理；在完整跟踪管理页面输入事件标题、封面、跟踪赛事、比赛时间、更新时间等信息，进行查询，新增或删除完整跟踪等操作；如图5-12所示。

图5-12完整跟踪管理界面图

管理员点击精彩视频管理；在精彩视频管理页面输入视频名称、封面、赛事名称、视频、发布时期等信息，进行查询，新增或删除精彩视频等操作；如图5-13所示。

图5-13精彩视频管理界面图

5.3 用户功能的实现

用户点击后台管理，然后页面跳转到系统主页面可以查看首页、个人中心、志愿者报名管理等功能进行详细操作，如图5-14所示。

    图5-14用户功能界面

用户点击志愿者报名管理；在志愿者报名管理页面对用户账号、用户姓名、性别、手机号码、身份证号、政治面貌、民族、最高学历、个人简介、报名时间、审核回复、审核状态等信息，进行查询、新增或删除志愿者报名等操作；如图5-15所示。

图5-15志愿者报名管理界面图

JAVA毕设帮助，指导，源码分享，调试部署