计算机优秀毕业设计 全民健身电子地图的设计与实现

1、学校代码： 10128学 号： 6 本科毕业设计说明书题 目：全民健身电子地图在线服务平台的设计与实现学生姓名：张 天 佑学 院：信息工程学院系 别：计算机系专 业：计算机科学与技术班 级：计算机09-2指导教师：庄 旭 菲 讲师贾 然 工程师二 一 三 年 六 月摘 要为了解决各大城市的公共体育场馆普遍存在设施投入偏重硬件，软件环境严重缺失，信息服务不到位等一系列问题，本课题提出了一种基于Baidu Map API的全民健身电子地图在线服务平台的解决方案。该平台为市民提供了健身信息查询、场馆电子地图搜索和场馆周边信息浏览等一系列信息服务。全民健身电子地图在线服务平台采用B/S结构，使用JSP

2、+Baidu Map等技术实现，利用Oracle作为后台数据存储。平台的Web前端实现了新闻浏览、赛事集锦、场馆浏览、场馆电子地图显示、人气评论等功能，并在后台提供了前端数据维护服务。全民健身电子地图在线服务平台增强了市民的健身意识，推进了全民健身资源信息化、健身生活化，对政府合理整合健身资源，优化场馆管理有着较为重要的现实意义。本文首先阐述了课题的开发背景，并对系统进行了功能需求分析和功能定义，详细说明了全民健身电子地图在线服务平台的设计与实现，论文最后对课题进行了总结和展望。关键词：场馆信息查询；电子地图；Baidu Map APIAbstractIn order to solve the

3、 major cities of widespread public facilities into stadiums emphasis hardware, soft environment serious lack, cause a series of problems such as lacking of information services and other issues, This topic is proposed based on Baidu Map API fitness electronic map online service platform solutions. T

4、he platform provides to the public fitness information query, fitness venues electronic map search and venues surrounding information browsing and a series of information service.The national fitness electronic map online service platform u uses B/S structure; the use of technologies such as JSP Bai

5、du Map achieved using Oracle as the backend data store. The Web front-end platform realizes the news browsing, video highlights, venue information browsing, venues electronic map display, popular comments and other functions, and provides the front-end data maintenance services in the background.The

6、 national fitness electronic map platform for online services enhances public awareness of fitness, promote the national fitness information resources, fitness daily life, rational integration of government health resources; it is of great realistic significance to optimize the venue management.This

7、 article first describes the development of the subject background, and the system functional requirements analysis and function definitions, a detailed description of fitness electronic map online service platform for the design and implementation of the final papers on topics were summarized and d

8、iscussed.Keywords：Venue Information inquiry; Electronic map; Baidu Maps API目 录引 言1第一章 系统需求分析21.1 功能需求21.2 系统用例分析2第二章 系统设计42.1 总体设计42.1.1 模块划分42.1.2 总体结构42.1.3 功能描述52.1.4 功能时序图62.2 系统工作流程92.3 数据库设计102.3.1 数据库概念结构设计102.3.2 数据库逻辑结构设计112.4 运行环境14第三章 系统实现153.1 相关技术153.1.1 DWR153.1.2 过滤器153.1.3 单例设计模式153.

9、1.4 JavaScript163.1.5 数据库连接池163.2 系统实现163.2.1 系统前台163.2.2 系统后台243.3 系统调试问题及解决方法30结 论31参考文献32谢 辞33引 言随着人们生活水平的提高，人们对生活质量和身体健康有了更高的要求，希望通过加强健身锻炼来提高身体素质，但目前各大城市投入公共体育场馆设施基本上只重视硬件的投入，软件服务投入少，而且资源分布不均匀。在国内外有很多优秀的在线电子地图，如Google地图，百度地图等，这些地图信息覆盖面虽然广泛，但是没有提供专门的健身场馆信息查询服务。为此，上海市和福建省按照各自的需求，分别推出了上海市全民健身电子地图和福

10、建全民健身电子地图，但是对于我区却没有专门的全民健身电子地图在线服务平台。为了解决上述问题，提升我区全民身体素质、推动全民健身，切实增强全民健身意识，提高我区广大市民的身体健康质量和生活水平，本课题提出基于Baidu Map API的全民健身电子地图在线服务平台的解决方案。第一章 系统需求分析1.1 功能需求功能需求有以下几个方面：1. 用户能够注册、登录、修改个人信息，完成注销等操作。2. 管理员能够登录、实现数据维护和操作员权限管理等操作。3. 能够浏览、发布、删除、修改新闻信息和赛事公告信息。4. 能够查看、添加、回复、删除评论信息。5. 能够以电子地图方式显示场馆位置，进行地理坐标定位

11、，实现本地附近搜索功能。1.2 系统用例分析全民健身电子地图在线服务平台的用户分为：普通游客，注册用户和管理员三种。下面将分别描述三种用户的功能用例图：图1-1 普通游客用例图普通游客用例：享有浏览平台的新闻信息、赛事信息、场馆信息、场馆电子地图查询以及注册成会员用户等功能。图1-2 注册用户用例图注册用户用例：在普通游客享有全部功能之外，还享有评论留言、用户登录、个人信息修改和密码修改等功能。图1-3 管理员用例图系统管理员用例：享有对用户信息、其他管理员信息、新闻信息、赛事信息、场馆信息、评论信息等的管理。第二章 系统设计2.1 总体设计2.1.1 模块划分全民健身电子地图在线服务平台通过

12、其需求功能可划分如下几个模块：普通用户管理，管理员用户管理，新闻资讯，赛事公告，场馆信息，评论留言，电子地图七个模块，其总体结构模块图划分如图2-1所示。图2-1 总体功能模块图2.1.2 总体结构全民健身电子地图在线服务平台总体结构图主要介绍了平台功能模块的再划分，详细的描述了每一个模块的子功能，通过平台的总体结构图，可以很快的了平台各模块在前后台对应的各个功能，其总体划分结构图如图2-2和图2-3所示。图2-2 系统前台结构图图2-3 系统后台结构图2.1.3 功能描述全民健身电子地图按需求可将功能分为前台用户和后台管理员所对应的功能，其前台用户主要有以下功能：1. 注册用户：实现非用户的

13、注册，用户需要填写必要信息，通过前台JavaScript的校验，且用户名不能是已经注册的用户名。2. 用户登录：实现注册用户的登录，个人密码修改，个人信息修改和退出系统功能。3. 新闻浏览：用户通过新闻浏览可以查看全部新闻信息，通过每个新闻的标题链接，用户可以查看该新闻标题对应的新闻详细信息。4. 赛事公告：用户通过赛事公告可以查看最新的5条赛事信息，也可以通过赛事锦集来查看全部赛事信息，除此之外，用户可以通过每条赛事标题查看其对应的详细赛事信息。5. 场馆信息：实现显示全部场馆信息功能，用户可通过详细介绍查看每个场馆的详细信息。6. 电子地图：显示所在城市的电子地图，通过电子地图标注显示所有

14、的场馆信息（系统主要显示呼和浩特市），用户可以点击标注查看场馆详细信息，实现了到该馆的公交路线查询和附近搜索功能，还可以实现地图定位。7. 评论留言：用户通过该功能可以查看所有的评论信息，选择评论内容可查看该评论的详细信息，此外，登录的注册用户可以进行评论留言。8. 后台管理：为管理员提供后台登录的链接。后台管理员主要有以下功能：1. 管理员登录：实现系统管理员的后台登录，并且需要对管理员的账号、密码和验证码进行校验，只有通过校验者才能进入后台。2. 修改个人密码：实现在线管理员个人密码的修改。3. Admin信息管理：管理员可以对其余管理员信息管理，包括删除，添加操作。4. 注册用户管理：管

15、理员可查看所有注册用户的详细信息（不包括密码），以及删除注册用户信息。5. 场馆信息管理：管理员可以添加，修改和删除场馆信息。6. 电子地图：管理员可以获取添加场馆坐标，也可以预览添加场馆在电子地图中的位置。7. 赛事公告：管理员可以发布，修改，删除赛事信息。8. 新闻信息：管理员可以发布，修改，删除新闻信息。9. 评论留言：管理员可以回复、删除用户评论。2.1.4 功能时序图时序图（Sequence Diagram）描述了对象之间传递消息的时间顺序，它用来表示用例中的行为顺序。在全民健身电子地图在线服务平台中，按照每一个用例功能都可以建立一个时序图，而系统功能比较多，以下将列出几个典型的功能

16、时序图。1. 用户评论留言时序图用户通过自己用户名和密码登录后，将用户所有信息保存在session中，然后通过评论留言模块的“我要评论”链接进入评论页面，session中没有用户信息的游客不允许评论。用户填写完评论信息，将信息提交至数据库，更新数据成功之后给用户提示信息，评论留言时序图如图2-4所示。 图2-4 用户评论时序图2. 新闻浏览时序图用户通过新闻信息菜单可以查看所有新闻的标题信息，选择相应的标题之后获取标题ID，跳转到新闻详细页面，用户可以查看新闻详细信息，新闻浏览时序图如图2-5所示。图2-5 新闻浏览时序图3. 管理员发布新闻时序图管理员通过后台登录，登录时输入管理员账号、密码

17、及验证码。通过新闻管理添加新闻信息，添加新闻信息时需要输入新闻标题和正文，然后将新闻信息提交至数据库，更新数据库之后系统将向管理员提示添加成功，新闻发布时序图如图2-6所示。图2-6 管理员发布新闻时序图4. 管理员删除新闻信息时序图管理员登录后台以后，进入新闻管理，选择删除新闻信息，系统向管理员提示确认删除，得到管理员确认后，系统将要删除的新闻ID提交至数据库，执行删除操作，删除成功后跳转到新闻管理页面，新闻删除时序图如图2-7所示。图2-7 管理员删除新闻时序图5. 管理员修改新闻信息时序图管理员登录后台以后，选择新闻管理，再选择具体新闻，获取新闻ID跳转至新闻修改页面，管理员输入修改新闻

18、信息，提交至数据库，数据库更新成功以后向管理员提示新闻修改成功，新闻修改时序图如图2-8所示。图2-8 管理员修改新闻时序图2.2 系统工作流程全民健身电子地图在线服务平台基于B/S模式开发，采用MVC三层设计模式。包括，显示层：主要负责接收Servlet传递的内容，并且运用JavaBean，将内容通过JSP显示给用户。控制层：用过Servlet实现，负责接收所有用户的请求参数，判断请求参数是否合法，根据请求的类型调用JavaBean执行操作并将最终的处理结果交给显示层进行显示。模型层：用过JavaBean实现，按照数据库字段定义属性，提供相应字段的set和get方法。用户通过浏览器可完成在该

19、平台下的一系列操作，管理员通过后台发布和管理相关信息。平台工作流程图如图2-9所示。图2-9 全民健身电子地图服务平台工作流程图2.3 数据库设计2.3.1 数据库概念结构设计全民健身电子地图在线服务平台按照模块可划分新闻、赛事公告、场馆、用户、管理员、评论留言六个实体。E-R图能够清晰的描述各实体之间的联系，为数据库设计提供概念模型。系统E-R图如图2-10所示。图2-10 系统E-R图系统E-R图中，一个用户可以评论N条评论信息，一条评论只能由一位用户评论。一位管理员可以回复M条评论，而一条评论只能有一位管理员评论。图2-11 新闻信息E-R图新闻信息E-R图中，新闻实体和管理员实体关系为

20、：每个管理员可以发布N条新闻信息，一条新闻信息只能由一位管理员发布。图2-12 赛事公告E-R图赛事公告E-R图中，赛事实体和管理员实体关系为：每个管理员可以发布M条赛事公告信息，一条赛事公告信息只能由一位管理员发布。图2-13 场馆信息E-R图场馆E-R图中，场馆实体和管理员实体关系为：每位管理员可以发布N条场馆信息，一条场馆信息只能由一位管理员发布。2.3.2 数据库逻辑结构设计基于上面的实体关系模式，数据库表结构如下。1. 用户信息表表名：T_USER，注册用户基本信息，如表2-1所示。表2-1 用户信息表T_USER字段字段类型字段含义备注IDvarchar2(50)用户编号主键LOG

21、INNAMEvarchar2(50)用户登录名唯一键，非空LOGINPWvarchar2(50)用户登录密码非空NAMEvarchar2(50)用户姓名SEXvarchar2(50)用户性别男，女EMAILvarchar2(50)电子邮件非空ADDRESSnvarchar2(100)用户地址2. 场馆信息表表名：T_GUAN，场馆基本信息如表2-2所示。表2-2 场馆信息表T_GUAN字段字段类型字段含义备注IDvarchar2(50)场馆编号主键MINGCHENGnvarchar2(255)场馆名称非空DIZHInvarchar2(255)场馆地址DIANHUAnvarchar2(255)场

22、馆电话JIESHAOvarchar2(2000)场馆介绍FUJIANvarchar2(50)照片附件JINGDUnumber(12,6)场馆经度非空WEIDUnumber(12,6)场馆纬度非空USERNAMEvarchar2(50)场馆添加者外键其中，USERNAME为T_ADMIN表的唯一键。3. 新闻信息表表名：T_NEWS，新闻信息如表2-3所示。表2-3 新闻信息表T_NEWS字段字段类型字段含义备注IDvarchar2(50)新闻编号主键TITLEvarchar2(50)新闻标题非空CONTENTvarchar2(2000)新闻内容SHIJIANvarchar2(50)发布时间US

23、ERNAMEvarchar2(50)新闻发布者外键其中，USERNAME为T_ADMIN表的唯一键。4. 赛事公告表表名：T_GONGGAO，赛事公告信息如表2-4所示。表2-4 赛事公告表T_GONGGAO字段字段类型字段含义备注ID varchar2(50)赛事编号主键TITLEvarchar2(50)赛事标题非空CONTENTvarchar2(2000)赛事内容SHIJIANvarchar2(50)发布时间USERNAMEvarchar2(50)赛事发布者外键其中，USERNAME为T_ADMIN表的唯一键。5. 管理员信息表表名：T_ADMIN，管理员表如表2-5所示。表2-5 管理员

24、表T_ADMIN字段字段类型字段含义备注USERIDnumber(10)管理员编号主键，自增USERNAMEvarchar2(50)管理员账号唯一键，非空USERPWvarchar2(50)管理员密码非空其中主键USERID使用触发器，插入数据主键按序列实现自增。6. 评论留言表表名：T_LIUYAN，评论留言信息如表2-6所示。表2-6 评论留言表T_LIUYAN字段字段类型字段含义备注ID varchar2(50)评论编号主键NEIRONGvarchar2(776)评论内容非空LIUYANSHIvarchar2(50)评论时间LOGINNAMEvarchar2(50)评论用户外键HUIFU

25、varchar2(50)回复内容HUIFUSHIvarchar2(50)回复时间USERNAMEvarchar2(50)回复管理员外键2.4 运行环境操作系统：Microsoft Windows Server 2003/2008，Linux（服务器版）。数据库：Oracle 10g及以上。服务器：Tomcat 7.0。JDK：JDK 1.6。第三章 系统实现3.1 相关技术3.1.1 DWRDWR（Direct Web Remoting）是一个用于改善Web页面与Java类交互的远程服务器端Ajax开源框架，实现局部刷新页面的效果。这个框架的最大优点就是可以在JavaScript中调用Java

26、方法，传递参数，并且可以得到返回值。本课题中大量的使用了该技术。dwr.xml文件配置如下： 其中：标签配置了JavaScript可访问的Java类，标签使DWR自动在Java和JavaScript之间调整数据类型转换。3.1.2 过滤器过滤器是以一种组件形式绑定到Web应用程序中，采用链式方式处理。所有的请求将首先交给过滤器处理，然后再访问相应的Web资源。系统中使用了两个Filter，分别是编码过滤（EncodingFilter）和后台登录验证过滤（adminLoginFilter）。编码验证：将所有请求信息通过编码过滤。后台登录过滤：将对访问后台的所有文件进行session中管理员信息过

27、滤，如果session中存在管理员信息将对请求放行，如果管理员信息不存在，则在服务器端自动跳转到后台登录界面。3.1.3 单例设计模式单例设计模式是软件设计中常用的一种设计模式。其核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证在系统中，一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数进行控制并节约系统资源。3.1.4 JavaScriptJavaScript是基于对象和事件驱动的客户端脚本语言，广泛的用于Web客户端脚本开发，能够给HTML网页添加动态功能，比如响应用户的各种操作。在本系统中，大部分客户端校验都使用了JavaScript技术，这样能够减轻服务器端负担

28、，便于用户交互。本系统中的电子地图也是采用百度地图JavaScript API实现，它提供了一套由JavaScript编写的应用程序接口，能够在线创建功能丰富、交互性强的电子地图，还提供了一些强大应用功能的开源库，此外还支持HTML5特性。3.1.5 数据库连接池数据库连接池为解决资源频繁的分配和释放等问题，而为数据库连接创建一个“缓冲池”，在资源重用、系统响应速度、资源分配、连接管理方面有重要的意义。系统数据库连接采DBCP数据库连接池，配置信息在JdbcCperties文件中，其配置信息如图3-1所示。图3-1 数据库连接池DBCP配置信息3.2 系统实现3.2.1 系统

29、前台系统前台主要有用户登录、赛事公告、新闻浏览、赛事锦集、场馆信息、用户注册、电子地图、评论留言等模块，下面将详细介绍各模块运行效果和实现过程，全民健身电子地图在线服务平台的前台运行界面如图3-2所示。图3-2 系统首页1. 用户登录用户登录为用户提供注册用户的登录功能，用户需通过用户名和密码校验后才能登录，由userLogin.jsp页面实现。用户点击“登录”按钮时首先会对用户账户进行数据校验，通过数据校验后调用toolService类的login（）方法，对用户名和密码在T_user表里查找，若不存在，提示用户输入错误；若存在，则跳转到登录后的界面，并将用户的全部信息保存在session之

30、中，用户成功登录界面如图3-3所示。图3-3 用户登录修改个人密码由userPw.jsp页面实现。用户必须输入原始密码、新密码和确认密码。当用户点击修改时，会首先对用户填写的原始密码和session中的密码以及新密码和确认密码是否相同进行数据校验，通过校验后调toolService类的userPwEdit()方法修改用户密码。修改个人密码界面如图3-4所示。图3-4 修改个人密码修改个人信息由页面userModifyInfo.jsp实现，该页面首先会将session中保存的个人信息显示在修改页面上，当用户修改完信息提交时，会对用户填写的信息进行必要的校验：如邮件格式、必填项等，通过校验后调用t

31、oolService类的userModifyInfo（）方法修改个人信息，个人信息修改成功之后系统将重新从数据库里面读取个人信息，更新session。修改个人信息界面如图3-5所示。图3-5 个人信息修改2. 用户注册用户注册由userReg.jsp页面实现，用户注册填写完信息提交后，系统先将用户填写的信息进行前台校验，通过前台校验后，系统将填写的用户名在数据库中查找，如果存在则给出用户提示重新填写用户名；若通过后台逻辑校验，则将数据添加到数据库，提示用户注册成功。用户注册界面如图3-6所示。、图3-6 新用户注册当添加信息错误时系统会提示用户。如邮箱格式不正确、用户名已被注册。出错提示如图3

32、-7所示。图3-7 邮箱格式和用户账号错误提示3. 新闻信息新闻资讯newsAll.jsp页面列出所有表T_news中的新闻信息。用户可以选择新闻标题查看其详细新闻信息，系统将获取相应新闻标题的ID参数传递至新闻Servlet News中，newsDetailQian()通过获取ID参数，查询对应ID的新闻详细信息，放在request中并跳至newsDetailQian.jsp页面显示详细的新闻信息，新闻详细信息界面如图3-8所示。图3-8 新闻详细信息4. 赛事锦集当用户选择首页的赛事锦集时，先跳至Servlet中，获取全部赛事信息，然后跳至页面gonggaoAll.jsp并显示，赛事锦集界

33、面如图3-9所示。图3-9 赛事信息用户选择赛事标题，系统将赛事标题对应的ID传递至Servlet中，通过其gonggaoDetailQian（）方法查询获取赛事ID对应的详细赛事信息，存放至request中并跳到页面gonggaoDetailQian.jsp显示，赛事详细信息如图3-10所示。图3-10 赛事详细信息5. 场馆信息场馆信息罗列了平台下所有场馆信息。当用户选择首页的场馆信息时，系统将从场馆的Servlet中查询出全部的场馆信息并存放至request中，并在guanAll.jsp页面显示，全部场馆信息如图3-11所示。图3-11 全部场馆信息选择“详细介绍”后，系统将获取对场馆I

34、D，将参数传递至场馆Guan Servlet中，Guan对应的guanDetailQian（）方法将获取参数ID，查询表T_guan中对应ID的场馆信息，将结果存放至request中，并跳转至guanDetailQian.jsp显示场馆的详细信息，场馆详细信息界面如图3-12所示。图3-12 场馆详细信息6. 评论留言用户选择首页评论留言时，系统将调用Liuyan Servlet中的liuyanAll方法，从数据库中按时间顺序查找全部评论留言信息，并将这些信息存放至List中，通过request将信息传递给liuyanAll.jsp页面。当用户要评论时，首先将检查session中用户信息是否存

35、在，若存在，将显示添加评论界面liuyanAdd.jsp；若不存在，提示用户登录，评论信息界面如图3-13所示。图3-13 评论留言信息当用户选择评论标题时，系统将获取评论信息ID，并将ID参数传递至评论留言Servlet中，调用liuyanDetail（）函数从数据库中获取相应的评论信息，存放至request中并跳至liuyanDetail.jsp页面，显示评论和回复内容，时间以及评论者和回复者等，详细评论信息界面如图3-14所示。图3-14 评论详细信息7. 电子地图电子地图显示了平台下数据库中所有的场馆，并且在所在城市（本平台主要显示呼和浩特市）的地图中标注出场馆的详细信息，用户能够清晰

36、的查看场馆在地图中的位置，并提供附近查找、公交路线查询等服务。除此之外还提供了基于浏览器的定位功能，电子地图界面如图3-15所示。图3-15 电子地图其中红色的标注点是场馆位置，蓝色的标注点为定位。1) 电子地图的实现系统中在线电子地图是通过百度地图JavaScript API实现的，使用时需要加载百度地图JavaScript API 的JS文件，在1.5版本中需要使用key值，如:。调用API命名空间BMap的Map类初始化地图，并且需要指定显示地图的HTML容器，通常使用div容器展现地图，使用Point类创建地图的中心点，setMinZoom设置地图的最小缩放等级。2) 在电子地图中获取

37、场馆信息部分代码如下：function getGuanInfo() toolService.mapShow(gunInfo); function gunInfo(data) if(data.length 0) for(var i = 0; i data.length; i+) createInfoWindow(datai); 其中mapShow()是toolService类中查询全部场馆信息的方法，将返回的信息放到List中返回给gunInfo(data)，data接受了返回的List值，createInfoWindow(datai)接收每个场馆信息并在地图中创建具有百度地图样式的信息窗口。3

38、) 创建百度地图样式的信息窗口百度样式的信息窗口提供了窗口信息显示、附近查找、路线查询、短信服务等功能。在本系统中使用了百度样式信息窗口来显示场馆信息，由百度地图JavaScript开源库BMapLib的检索信息窗口SearchInfoWindow类实现。实现过程：首先向地图中添加覆盖物，通过addOverlay添加Marker标记，用Icon类显示标记的自定义图片，当用户点击该标记图片时，触发窗口事件，然后显示场馆信息窗口。在该窗口上可以查看的场馆信息包括：名称、地址、电话、简介、场馆图片等，此外还可以基于该场馆进行公交路线查询、附近查找、短信发送信息等。其关键代码如下：marker.add

39、EventListener(click, function(e)/点击触发事件 searchInfoWindow.open(marker); );4) 实现定位功能系统的定位功能是基于浏览器的定位，使用HTML5中用于定位的 Geolocation。Geolocation允许用户在 Web 应用程序中共享他们的地理位置，通过浏览器感知用户的地理位置。HTML5 Geolocation 位置信息构成：纬度、经度，以及获得这些数据的途径（GPS、IP 地址、RFID、WiFi、蓝牙 MAC 地址、GSM/CDMA 卡 ID 等）。若用户浏览器支持该HTML5新特性，并且允许Web程序共享其地理位置

40、，则调用Geolocation类的getCurrentPosition（）获取用户的位置信息，在地图中标记并显示用户的位置信息，定位流程图如图3-16所示。图3-16 地图定位流程图3.2.2 系统后台全民健身电子地图在线服务平台的后台运行效果如图3-18所示。图3-18 系统后台界面系统后台页面布局使用frameset框架，提供了管理员个人信息修改，添加和管理其他管理员，注册用户管理，场馆信息添加和管理，获取场馆坐标和查看电子地图，赛事公告发布和管理，新闻信息发布和管理，评论留言管理。下面将详细介绍主要模块的实现过程。1. 注册用户管理管理员对注册用户进行管理，包括删除、查看详细信息等。系统

41、得到注册用户管理请求时，从用户Servlet的userMana方法获取全部的注册用户信息，并跳转到userMana.jsp页面显示。当管理员选择删除用户时，系统将向管理员发出确认删除信息提示，得到确认后将执行用户Servlet的userDel方法，进行删除操作，注册用户管理界面如图3-22所示。图3-22 注册用户管理管理员可以查看用户的详细信息，系统将通过ID从数据库中查找用户信息，并跳转至userXinxi.jsp页面显示，用户详细信息如图3-23所示。图3-23 用户详细信息2. 场馆信息管理场馆信息管理罗列了系统中所有的场馆信息，可以进行场馆信息的添加、修改和删除操作。系统得到场馆信息

42、管理请求时，从场馆Servlet的guanMana方法中获取全部的场馆信息存放至request中，在guanMana.jsp页面进行显示。场馆管理界面如图3-24所示。图3-24 场馆信息管理修改场馆信息。首先系统根据场馆ID参数查询场馆信息，保存在request中，跳至页面guanModi.jsp显示，当管理员修改完信息提交时，系统将进行数据校验，通过校验后，将更新信息提交至数据库，场馆信息修改界面如图3-25所示。图3-25 场馆信息修改添加新场馆信息。管理员填写场馆信息提交时，系统将对这些数据进行校验，通过校验后，系统调用场馆Servlet的guanAdd方法将信息添加至数据库中。其中上

43、传场馆图片使用SmartUpload文件上传组件，实现图片数据的相关校验，包括：大小控制在10k-200k内，格式为jpg和gif等。场馆图片成功上传后，系统将对文件重新命名，即采用项目绝对路径加时间戳。在数据库中存放的是图片路径。添加新场馆界面如图3-26所示。图3-26 新场馆信息添加3. 获取场馆坐标和查看电子地图获取场馆坐标，是指管理员在不知道场馆具体坐标时，可以在地图上在线获取场馆经纬度坐标值。当管理员点击地图时，系统监听地图点击，将点击处的经纬度显示给管理员。添加场馆信息后还可以在线预览电子地图，从数据库中读取所有的场馆信息，并在地图上标注。获取经纬度坐标界面如图3-27所示。图3

44、-27 获取场馆经纬度4. 赛事公告管理赛事公告管理提供了全部赛事信息的修改、删除以及新赛事的添加。当系统收到赛事公告管理请求时，调用赛事公告Servlet的gonggaoMana方法，获取全部赛事信息，存放至request中并在gonggaoMana.jsp页面显示。管理员选择删除时，系统将发出删除提示，得到删除确认后将要删除赛事的ID传递给Servlet的gonggaoDel方法，执行删除操作，删除成功后跳转至管理页，赛事公告管理界面如图3-28所示。图3-28 赛事公告管理添加赛事信息。管理员提交新赛事信息时，系统将对数据进行校验，通过校验后，调用赛事公告Servlet的gonggaoA

45、dd方法向数据库添加信息，赛事公告添加界面如图3-29所示。图3-29 赛事公告添加选择查看详细内容，系统将该赛事信息的ID参数传递至赛事公告Servlet的gonggaoDetailHou方法，并根据ID查询赛事信息，将结果存放至request后跳转至 gonggaoDetailHou.jsp页面，显示赛事的详细信息，后台赛事详细信息界面如图3-30所示。图3-30 赛事详细信息修改赛事信息。系统得到修改请求后，在后台通过ID查询相应的赛事信息，将信息传至修改页面，管理员修改完信息提交后，系统通过后台Servlet将信息更新至数据库中，赛事信息修改界面如图3-31所示。图3-31 赛事信息修

46、改5. 新闻信息管理实现方法与“赛事公告管理”模块类似，不再赘述。新闻信息管理界面如图3-23所示。图3-32 新闻信息管理6. 评论留言管理评论留言列举了全部评论信息，管理员可以删除和回复评论信息。系统收到评论管理请求时，评论Servlet的liuyanMana方法查询全部的评论信息，跳转至管理页面liuyanMana.jsp显示。当管理员选择删除该评论时，系统会向管理员确认，当得到确认后，系统将调用Servlet的liuyanDel方法通过ID进行删除，删除成功后将跳至管理页面，评论留言管理界面如图3-36所示。图3-36 评论留言管理管理员选择回复评论时，系统将弹出回复对话框，提交回复内

47、容后，系统将进行校验。通过校验后将回复信息添加至数据库中，管理员评论回复界面如图3-37所示。图3-37 评论留言信息回复3.3 系统调试问题及解决方法在课题的设计开发中，遇到了诸多问题，现总结如下。1. 编码问题在系统开发过程中，编码问题是比较常见的，一般都会在每一个JSP或者Servlet中都要重复编写“request.setCharacterEncoding(“UTF-8”);”语句。造成大量代码重复。解决方法是通过过滤器实现编码过滤功能。2. 使用JavaScript调用java方法在系统的开发过程中有大量的这样问题：例如验证码的校验，验证码由后台Servlet产生并放在session

48、中，所以在前台校验时，会产生从session中取出的验证码值和后台产生验证码值不同步问题；在电子地图显示场馆信息时，电子地图要想标记所有场馆，必须从数据库中读取全部的场馆信息，然后将场馆信息通过JavaScript调用并显示。以上说明存在JavaScript中调用Java类的方法问题，在本课题中通过DWR可以实现从客户端用JavaScript轻松调用Java类的方法，并且能够获取返回值。3. 页面布局页面布局问题是Web开发中常见的问题，存在旧版本兼容问题和不同浏览器的显示问题。对于旧版本兼容问题：每个浏览器的版本对CSS支持不同，产生的效果也不相同。其次是不同浏览器的表现，例如现在流行的主流

49、浏览器IE与FireFox，二者的核心架构上有明显的区别，虽都是Web标准开发，对于Web的表现上，难免会有部分区别，导致了部分CSS在两个浏览器中的显示会有所不同。解决上述问题的方法是在每个浏览器下进行CSS样式调试。结 论全民健身电子地图在线服务平台可以汇集所有的健身信息，极大地方便了广大市民的健身，有利于政府部门优化、整合健身资源，通过该平台能很好的展示城市全民健身的良好风貌。1. 系统特点全民健身电子地图在线服务平台采用JSP、Servlet和JavaScript技术实现，系统总体页面是按照div + css进行布局设计。在安全方面，系统采用前台对数据进行JavaScript校验，减少了服务器端压力；在数据库中对数据操作进行了相应约束，所以有更好的安全性。在数据交互方面，系统数据连接使用数据库连接池，提高了资源重用，优化了系统响应速度。2. 存在问题由于技术和时间方