計算機畢業(yè)設(shè)計全民健身電子地圖在線服務(wù)平臺的設(shè)計與實現(xiàn)

1、學校代碼： 10128學 號： 200920201076 本科畢業(yè)設(shè)計說明書題 目：全民健身電子地圖在線服務(wù)平臺的設(shè)計與實現(xiàn)學生姓名：張 天 佑學 院：信息工程學院系 別：計算機系專 業(yè)：計算機科學與技術(shù)班 級：計算機09-2指導教師：莊 旭 菲 講師賈 然 工程師二 一 三 年 六 月內(nèi)蒙古工業(yè)大學本科畢業(yè)設(shè)計說明書摘 要為了解決各大城市的公共體育場館普遍存在設(shè)施投入偏重硬件，軟件環(huán)境嚴重缺失，信息服務(wù)不到位等一系列問題，本課題提出了一種基于baidu map api的全民健身電子地圖在線服務(wù)平臺的解決方案。該平臺為市民提供了健身信息查詢、場館電子地圖搜索和場館周邊信息瀏覽等一系列信息服務(wù)。

2、全民健身電子地圖在線服務(wù)平臺采用b/s結(jié)構(gòu)，使用jsp+baidu map等技術(shù)實現(xiàn)，利用oracle作為后臺數(shù)據(jù)存儲。平臺的web前端實現(xiàn)了新聞瀏覽、賽事集錦、場館瀏覽、場館電子地圖顯示、人氣評論等功能，并在后臺提供了前端數(shù)據(jù)維護服務(wù)。全民健身電子地圖在線服務(wù)平臺增強了市民的健身意識，推進了全民健身資源信息化、健身生活化，對政府合理整合健身資源，優(yōu)化場館管理有著較為重要的現(xiàn)實意義。本文首先闡述了課題的開發(fā)背景，并對系統(tǒng)進行了功能需求分析和功能定義，詳細說明了全民健身電子地圖在線服務(wù)平臺的設(shè)計與實現(xiàn)，論文最后對課題進行了總結(jié)和展望。關(guān)鍵詞：場館信息查詢；電子地圖；baidu map apiab

3、stractin order to solve the 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 se

4、rvice platform solutions. the 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 t

5、echnologies such as jsp baidu 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 ser

6、vices in the background.the 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 optimiz

7、e the venue management.this 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 t

8、opics were summarized and discussed.keywords：venue information inquiry; electronic map; baidu maps api目 錄引 言1第一章 系統(tǒng)需求分析21.1 功能需求21.2 系統(tǒng)用例分析2第二章 系統(tǒng)設(shè)計42.1 總體設(shè)計42.1.1 模塊劃分42.1.2 總體結(jié)構(gòu)42.1.3 功能描述52.1.4 功能時序圖62.2 系統(tǒng)工作流程92.3 數(shù)據(jù)庫設(shè)計102.3.1 數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計102.3.2 數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計112.4 運行環(huán)境14第三章 系統(tǒng)實現(xiàn)153.1 相關(guān)技術(shù)153.1.1 dwr15

9、3.1.2 過濾器153.1.3 單例設(shè)計模式153.1.4 javascript163.1.5 數(shù)據(jù)庫連接池163.2 系統(tǒng)實現(xiàn)163.2.1 系統(tǒng)前臺163.2.2 系統(tǒng)后臺243.3 系統(tǒng)調(diào)試問題及解決方法30結(jié) 論31參考文獻32謝 辭33引 言隨著人們生活水平的提高，人們對生活質(zhì)量和身體健康有了更高的要求，希望通過加強健身鍛煉來提高身體素質(zhì)，但目前各大城市投入公共體育場館設(shè)施基本上只重視硬件的投入，軟件服務(wù)投入少，而且資源分布不均勻。在國內(nèi)外有很多優(yōu)秀的在線電子地圖，如google地圖，百度地圖等，這些地圖信息覆蓋面雖然廣泛，但是沒有提供專門的健身場館信息查詢服務(wù)。為此，上海市和福建

10、省按照各自的需求，分別推出了上海市全民健身電子地圖和福建全民健身電子地圖，但是對于我區(qū)卻沒有專門的全民健身電子地圖在線服務(wù)平臺。為了解決上述問題，提升我區(qū)全民身體素質(zhì)、推動全民健身，切實增強全民健身意識，提高我區(qū)廣大市民的身體健康質(zhì)量和生活水平，本課題提出基于baidu map api的全民健身電子地圖在線服務(wù)平臺的解決方案。第一章 系統(tǒng)需求分析1.1 功能需求功能需求有以下幾個方面：1. 用戶能夠注冊、登錄、修改個人信息，完成注銷等操作。2. 管理員能夠登錄、實現(xiàn)數(shù)據(jù)維護和操作員權(quán)限管理等操作。3. 能夠瀏覽、發(fā)布、刪除、修改新聞信息和賽事公告信息。4. 能夠查看、添加、回復(fù)、刪除評論信息。

11、5. 能夠以電子地圖方式顯示場館位置，進行地理坐標定位，實現(xiàn)本地附近搜索功能。1.2 系統(tǒng)用例分析全民健身電子地圖在線服務(wù)平臺的用戶分為：普通游客，注冊用戶和管理員三種。下面將分別描述三種用戶的功能用例圖：圖1-1 普通游客用例圖普通游客用例：享有瀏覽平臺的新聞信息、賽事信息、場館信息、場館電子地圖查詢以及注冊成會員用戶等功能。圖1-2 注冊用戶用例圖注冊用戶用例：在普通游客享有全部功能之外，還享有評論留言、用戶登錄、個人信息修改和密碼修改等功能。圖1-3 管理員用例圖系統(tǒng)管理員用例：享有對用戶信息、其他管理員信息、新聞信息、賽事信息、場館信息、評論信息等的管理。第二章 系統(tǒng)設(shè)計2.1 總體設(shè)

12、計2.1.1 模塊劃分全民健身電子地圖在線服務(wù)平臺通過其需求功能可劃分如下幾個模塊：普通用戶管理，管理員用戶管理，新聞資訊，賽事公告，場館信息，評論留言，電子地圖七個模塊，其總體結(jié)構(gòu)模塊圖劃分如圖2-1所示。圖2-1 總體功能模塊圖2.1.2 總體結(jié)構(gòu)全民健身電子地圖在線服務(wù)平臺總體結(jié)構(gòu)圖主要介紹了平臺功能模塊的再劃分，詳細的描述了每一個模塊的子功能，通過平臺的總體結(jié)構(gòu)圖，可以很快的了平臺各模塊在前后臺對應(yīng)的各個功能，其總體劃分結(jié)構(gòu)圖如圖2-2和圖2-3所示。圖2-2 系統(tǒng)前臺結(jié)構(gòu)圖圖2-3 系統(tǒng)后臺結(jié)構(gòu)圖2.1.3 功能描述全民健身電子地圖按需求可將功能分為前臺用戶和后臺管理員所對應(yīng)的功能，

13、其前臺用戶主要有以下功能：1. 注冊用戶：實現(xiàn)非用戶的注冊，用戶需要填寫必要信息，通過前臺javascript的校驗，且用戶名不能是已經(jīng)注冊的用戶名。2. 用戶登錄：實現(xiàn)注冊用戶的登錄，個人密碼修改，個人信息修改和退出系統(tǒng)功能。3. 新聞瀏覽：用戶通過新聞瀏覽可以查看全部新聞信息，通過每個新聞的標題鏈接，用戶可以查看該新聞標題對應(yīng)的新聞詳細信息。4. 賽事公告：用戶通過賽事公告可以查看最新的5條賽事信息，也可以通過賽事錦集來查看全部賽事信息，除此之外，用戶可以通過每條賽事標題查看其對應(yīng)的詳細賽事信息。5. 場館信息：實現(xiàn)顯示全部場館信息功能，用戶可通過詳細介紹查看每個場館的詳細信息。6. 電子

14、地圖：顯示所在城市的電子地圖，通過電子地圖標注顯示所有的場館信息（系統(tǒng)主要顯示呼和浩特市），用戶可以點擊標注查看場館詳細信息，實現(xiàn)了到該館的公交路線查詢和附近搜索功能，還可以實現(xiàn)地圖定位。7. 評論留言：用戶通過該功能可以查看所有的評論信息，選擇評論內(nèi)容可查看該評論的詳細信息，此外，登錄的注冊用戶可以進行評論留言。8. 后臺管理：為管理員提供后臺登錄的鏈接。后臺管理員主要有以下功能：1. 管理員登錄：實現(xiàn)系統(tǒng)管理員的后臺登錄，并且需要對管理員的賬號、密碼和驗證碼進行校驗，只有通過校驗者才能進入后臺。2. 修改個人密碼：實現(xiàn)在線管理員個人密碼的修改。3. admin信息管理：管理員可以對其余管理

15、員信息管理，包括刪除，添加操作。4. 注冊用戶管理：管理員可查看所有注冊用戶的詳細信息（不包括密碼），以及刪除注冊用戶信息。5. 場館信息管理：管理員可以添加，修改和刪除場館信息。6. 電子地圖：管理員可以獲取添加場館坐標，也可以預(yù)覽添加場館在電子地圖中的位置。7. 賽事公告：管理員可以發(fā)布，修改，刪除賽事信息。8. 新聞信息：管理員可以發(fā)布，修改，刪除新聞信息。9. 評論留言：管理員可以回復(fù)、刪除用戶評論。2.1.4 功能時序圖時序圖（sequence diagram）描述了對象之間傳遞消息的時間順序，它用來表示用例中的行為順序。在全民健身電子地圖在線服務(wù)平臺中，按照每一個用例功能都可以建立

16、一個時序圖，而系統(tǒng)功能比較多，以下將列出幾個典型的功能時序圖。1. 用戶評論留言時序圖用戶通過自己用戶名和密碼登錄后，將用戶所有信息保存在session中，然后通過評論留言模塊的“我要評論”鏈接進入評論頁面，session中沒有用戶信息的游客不允許評論。用戶填寫完評論信息，將信息提交至數(shù)據(jù)庫，更新數(shù)據(jù)成功之后給用戶提示信息，評論留言時序圖如圖2-4所示。 圖2-4 用戶評論時序圖2. 新聞瀏覽時序圖用戶通過新聞信息菜單可以查看所有新聞的標題信息，選擇相應(yīng)的標題之后獲取標題id，跳轉(zhuǎn)到新聞詳細頁面，用戶可以查看新聞詳細信息，新聞瀏覽時序圖如圖2-5所示。圖2-5 新聞瀏覽時序圖3. 管理員發(fā)布新

17、聞時序圖管理員通過后臺登錄，登錄時輸入管理員賬號、密碼及驗證碼。通過新聞管理添加新聞信息，添加新聞信息時需要輸入新聞標題和正文，然后將新聞信息提交至數(shù)據(jù)庫，更新數(shù)據(jù)庫之后系統(tǒng)將向管理員提示添加成功，新聞發(fā)布時序圖如圖2-6所示。圖2-6 管理員發(fā)布新聞時序圖4. 管理員刪除新聞信息時序圖管理員登錄后臺以后，進入新聞管理，選擇刪除新聞信息，系統(tǒng)向管理員提示確認刪除，得到管理員確認后，系統(tǒng)將要刪除的新聞id提交至數(shù)據(jù)庫，執(zhí)行刪除操作，刪除成功后跳轉(zhuǎn)到新聞管理頁面，新聞刪除時序圖如圖2-7所示。圖2-7 管理員刪除新聞時序圖5. 管理員修改新聞信息時序圖管理員登錄后臺以后，選擇新聞管理，再選擇具體新

18、聞，獲取新聞id跳轉(zhuǎn)至新聞修改頁面，管理員輸入修改新聞信息，提交至數(shù)據(jù)庫，數(shù)據(jù)庫更新成功以后向管理員提示新聞修改成功，新聞修改時序圖如圖2-8所示。圖2-8 管理員修改新聞時序圖2.2 系統(tǒng)工作流程全民健身電子地圖在線服務(wù)平臺基于b/s模式開發(fā)，采用mvc三層設(shè)計模式。包括，顯示層：主要負責接收servlet傳遞的內(nèi)容，并且運用javabean，將內(nèi)容通過jsp顯示給用戶?？刂茖樱河眠^servlet實現(xiàn)，負責接收所有用戶的請求參數(shù)，判斷請求參數(shù)是否合法，根據(jù)請求的類型調(diào)用javabean執(zhí)行操作并將最終的處理結(jié)果交給顯示層進行顯示。模型層：用過javabean實現(xiàn)，按照數(shù)據(jù)庫字段定義屬性，提供

19、相應(yīng)字段的set和get方法。用戶通過瀏覽器可完成在該平臺下的一系列操作，管理員通過后臺發(fā)布和管理相關(guān)信息。平臺工作流程圖如圖2-9所示。圖2-9 全民健身電子地圖服務(wù)平臺工作流程圖2.3 數(shù)據(jù)庫設(shè)計2.3.1 數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計全民健身電子地圖在線服務(wù)平臺按照模塊可劃分新聞、賽事公告、場館、用戶、管理員、評論留言六個實體。e-r圖能夠清晰的描述各實體之間的聯(lián)系，為數(shù)據(jù)庫設(shè)計提供概念模型。系統(tǒng)e-r圖如圖2-10所示。圖2-10 系統(tǒng)e-r圖系統(tǒng)e-r圖中，一個用戶可以評論n條評論信息，一條評論只能由一位用戶評論。一位管理員可以回復(fù)m條評論，而一條評論只能有一位管理員評論。圖2-11 新聞信息

20、e-r圖新聞信息e-r圖中，新聞實體和管理員實體關(guān)系為：每個管理員可以發(fā)布n條新聞信息，一條新聞信息只能由一位管理員發(fā)布。圖2-12 賽事公告e-r圖賽事公告e-r圖中，賽事實體和管理員實體關(guān)系為：每個管理員可以發(fā)布m條賽事公告信息，一條賽事公告信息只能由一位管理員發(fā)布。圖2-13 場館信息e-r圖場館e-r圖中，場館實體和管理員實體關(guān)系為：每位管理員可以發(fā)布n條場館信息，一條場館信息只能由一位管理員發(fā)布。2.3.2 數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計基于上面的實體關(guān)系模式，數(shù)據(jù)庫表結(jié)構(gòu)如下。1. 用戶信息表表名：t_user，注冊用戶基本信息，如表2-1所示。表2-1 用戶信息表t_user字段字段類型字段

21、含義備注idvarchar2(50)用戶編號主鍵loginnamevarchar2(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

22、)場館地址dianhuanvarchar2(255)場館電話jieshaovarchar2(2000)場館介紹fujianvarchar2(50)照片附件jingdunumber(12,6)場館經(jīng)度非空weidunumber(12,6)場館緯度非空usernamevarchar2(50)場館添加者外鍵其中，username為t_admin表的唯一鍵。3. 新聞信息表表名：t_news，新聞信息如表2-3所示。表2-3 新聞信息表t_news字段字段類型字段含義備注idvarchar2(50)新聞編號主鍵titlevarchar2(50)新聞標題非空contentvarchar2(2000)新聞

23、內(nèi)容shijianvarchar2(50)發(fā)布時間usernamevarchar2(50)新聞發(fā)布者外鍵其中，username為t_admin表的唯一鍵。4. 賽事公告表表名：t_gonggao，賽事公告信息如表2-4所示。表2-4 賽事公告表t_gonggao字段字段類型字段含義備注id varchar2(50)賽事編號主鍵titlevarchar2(50)賽事標題非空contentvarchar2(2000)賽事內(nèi)容shijianvarchar2(50)發(fā)布時間usernamevarchar2(50)賽事發(fā)布者外鍵其中，username為t_admin表的唯一鍵。5. 管理員信息表表名：t

24、_admin，管理員表如表2-5所示。表2-5 管理員表t_admin字段字段類型字段含義備注useridnumber(10)管理員編號主鍵，自增usernamevarchar2(50)管理員賬號唯一鍵，非空userpwvarchar2(50)管理員密碼非空其中主鍵userid使用觸發(fā)器，插入數(shù)據(jù)主鍵按序列實現(xiàn)自增。6. 評論留言表表名：t_liuyan，評論留言信息如表2-6所示。表2-6 評論留言表t_liuyan字段字段類型字段含義備注id varchar2(50)評論編號主鍵neirongvarchar2(776)評論內(nèi)容非空liuyanshivarchar2(50)評論時間login

25、namevarchar2(50)評論用戶外鍵huifuvarchar2(50)回復(fù)內(nèi)容huifushivarchar2(50)回復(fù)時間usernamevarchar2(50)回復(fù)管理員外鍵2.4 運行環(huán)境操作系統(tǒng)：microsoft windows server 2003/2008，linux（服務(wù)器版）。數(shù)據(jù)庫：oracle 10g及以上。服務(wù)器：tomcat 7.0。jdk：jdk 1.6。第三章 系統(tǒng)實現(xiàn)3.1 相關(guān)技術(shù)3.1.1 dwrdwr（direct web remoting）是一個用于改善web頁面與java類交互的遠程服務(wù)器端ajax開源框架，實現(xiàn)局部刷新頁面的效果。這個框架

26、的最大優(yōu)點就是可以在javascript中調(diào)用java方法，傳遞參數(shù)，并且可以得到返回值。本課題中大量的使用了該技術(shù)。dwr.xml文件配置如下： 其中：標簽配置了javascript可訪問的java類，標簽使dwr自動在java和javascript之間調(diào)整數(shù)據(jù)類型轉(zhuǎn)換。3.1.2 過濾器過濾器是以一種組件形式綁定到web應(yīng)用程序中，采用鏈式方式處理。所有的請求將首先交給過濾器處理，然后再訪問相應(yīng)的web資源。系統(tǒng)中使用了兩個filter，分別是編碼過濾（encodingfilter）和后臺登錄驗證過濾（adminloginfilter）。編碼驗證：將所有請求信息通過編碼過濾。后臺登錄過濾：

27、將對訪問后臺的所有文件進行session中管理員信息過濾，如果session中存在管理員信息將對請求放行，如果管理員信息不存在，則在服務(wù)器端自動跳轉(zhuǎn)到后臺登錄界面。3.1.3 單例設(shè)計模式單例設(shè)計模式是軟件設(shè)計中常用的一種設(shè)計模式。其核心結(jié)構(gòu)中只包含一個被稱為單例類的特殊類。通過單例模式可以保證在系統(tǒng)中，一個類只有一個實例而且該實例易于外界訪問，從而方便對實例個數(shù)進行控制并節(jié)約系統(tǒng)資源。3.1.4 javascriptjavascript是基于對象和事件驅(qū)動的客戶端腳本語言，廣泛的用于web客戶端腳本開發(fā)，能夠給html網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作。在本系統(tǒng)中，大部分客戶端校驗都使

28、用了javascript技術(shù)，這樣能夠減輕服務(wù)器端負擔，便于用戶交互。本系統(tǒng)中的電子地圖也是采用百度地圖javascript api實現(xiàn)，它提供了一套由javascript編寫的應(yīng)用程序接口，能夠在線創(chuàng)建功能豐富、交互性強的電子地圖，還提供了一些強大應(yīng)用功能的開源庫，此外還支持html5特性。3.1.5 數(shù)據(jù)庫連接池數(shù)據(jù)庫連接池為解決資源頻繁的分配和釋放等問題，而為數(shù)據(jù)庫連接創(chuàng)建一個“緩沖池”，在資源重用、系統(tǒng)響應(yīng)速度、資源分配、連接管理方面有重要的意義。系統(tǒng)數(shù)據(jù)庫連接采dbcp數(shù)據(jù)庫連接池，配置信息在jdbccperties文件中，其配置信息如圖3-1所示。圖3-1 數(shù)據(jù)庫

29、連接池dbcp配置信息3.2 系統(tǒng)實現(xiàn)3.2.1 系統(tǒng)前臺系統(tǒng)前臺主要有用戶登錄、賽事公告、新聞瀏覽、賽事錦集、場館信息、用戶注冊、電子地圖、評論留言等模塊，下面將詳細介紹各模塊運行效果和實現(xiàn)過程，全民健身電子地圖在線服務(wù)平臺的前臺運行界面如圖3-2所示。圖3-2 系統(tǒng)首頁1. 用戶登錄用戶登錄為用戶提供注冊用戶的登錄功能，用戶需通過用戶名和密碼校驗后才能登錄，由userlogin.jsp頁面實現(xiàn)。用戶點擊“登錄”按鈕時首先會對用戶賬戶進行數(shù)據(jù)校驗，通過數(shù)據(jù)校驗后調(diào)用toolservice類的login（）方法，對用戶名和密碼在t_user表里查找，若不存在，提示用戶輸入錯誤；若存在，則跳轉(zhuǎn)到

30、登錄后的界面，并將用戶的全部信息保存在session之中，用戶成功登錄界面如圖3-3所示。圖3-3 用戶登錄修改個人密碼由userpw.jsp頁面實現(xiàn)。用戶必須輸入原始密碼、新密碼和確認密碼。當用戶點擊修改時，會首先對用戶填寫的原始密碼和session中的密碼以及新密碼和確認密碼是否相同進行數(shù)據(jù)校驗，通過校驗后調(diào)toolservice類的userpwedit()方法修改用戶密碼。修改個人密碼界面如圖3-4所示。圖3-4 修改個人密碼修改個人信息由頁面usermodifyinfo.jsp實現(xiàn)，該頁面首先會將session中保存的個人信息顯示在修改頁面上，當用戶修改完信息提交時，會對用戶填寫的信息

31、進行必要的校驗：如郵件格式、必填項等，通過校驗后調(diào)用toolservice類的usermodifyinfo（）方法修改個人信息，個人信息修改成功之后系統(tǒng)將重新從數(shù)據(jù)庫里面讀取個人信息，更新session。修改個人信息界面如圖3-5所示。圖3-5 個人信息修改2. 用戶注冊用戶注冊由userreg.jsp頁面實現(xiàn)，用戶注冊填寫完信息提交后，系統(tǒng)先將用戶填寫的信息進行前臺校驗，通過前臺校驗后，系統(tǒng)將填寫的用戶名在數(shù)據(jù)庫中查找，如果存在則給出用戶提示重新填寫用戶名；若通過后臺邏輯校驗，則將數(shù)據(jù)添加到數(shù)據(jù)庫，提示用戶注冊成功。用戶注冊界面如圖3-6所示。、圖3-6 新用戶注冊當添加信息錯誤時系統(tǒng)會提示

32、用戶。如郵箱格式不正確、用戶名已被注冊。出錯提示如圖3-7所示。圖3-7 郵箱格式和用戶賬號錯誤提示3. 新聞信息新聞資訊newsall.jsp頁面列出所有表t_news中的新聞信息。用戶可以選擇新聞標題查看其詳細新聞信息，系統(tǒng)將獲取相應(yīng)新聞標題的id參數(shù)傳遞至新聞servlet news中，newsdetailqian()通過獲取id參數(shù)，查詢對應(yīng)id的新聞詳細信息，放在request中并跳至newsdetailqian.jsp頁面顯示詳細的新聞信息，新聞詳細信息界面如圖3-8所示。圖3-8 新聞詳細信息4. 賽事錦集當用戶選擇首頁的賽事錦集時，先跳至servlet中，獲取全部賽事信息，然后

33、跳至頁面gonggaoall.jsp并顯示，賽事錦集界面如圖3-9所示。圖3-9 賽事信息用戶選擇賽事標題，系統(tǒng)將賽事標題對應(yīng)的id傳遞至servlet中，通過其gonggaodetailqian（）方法查詢獲取賽事id對應(yīng)的詳細賽事信息，存放至request中并跳到頁面gonggaodetailqian.jsp顯示，賽事詳細信息如圖3-10所示。圖3-10 賽事詳細信息5. 場館信息場館信息羅列了平臺下所有場館信息。當用戶選擇首頁的場館信息時，系統(tǒng)將從場館的servlet中查詢出全部的場館信息并存放至request中，并在guanall.jsp頁面顯示，全部場館信息如圖3-11所示。圖3-1

34、1 全部場館信息選擇“詳細介紹”后，系統(tǒng)將獲取對場館id，將參數(shù)傳遞至場館guan servlet中，guan對應(yīng)的guandetailqian（）方法將獲取參數(shù)id，查詢表t_guan中對應(yīng)id的場館信息，將結(jié)果存放至request中，并跳轉(zhuǎn)至guandetailqian.jsp顯示場館的詳細信息，場館詳細信息界面如圖3-12所示。圖3-12 場館詳細信息6. 評論留言用戶選擇首頁評論留言時，系統(tǒng)將調(diào)用liuyan servlet中的liuyanall方法，從數(shù)據(jù)庫中按時間順序查找全部評論留言信息，并將這些信息存放至list中，通過request將信息傳遞給liuyanall.jsp頁面。當

35、用戶要評論時，首先將檢查session中用戶信息是否存在，若存在，將顯示添加評論界面liuyanadd.jsp；若不存在，提示用戶登錄，評論信息界面如圖3-13所示。圖3-13 評論留言信息當用戶選擇評論標題時，系統(tǒng)將獲取評論信息id，并將id參數(shù)傳遞至評論留言servlet中，調(diào)用liuyandetail（）函數(shù)從數(shù)據(jù)庫中獲取相應(yīng)的評論信息，存放至request中并跳至liuyandetail.jsp頁面，顯示評論和回復(fù)內(nèi)容，時間以及評論者和回復(fù)者等，詳細評論信息界面如圖3-14所示。圖3-14 評論詳細信息7. 電子地圖電子地圖顯示了平臺下數(shù)據(jù)庫中所有的場館，并且在所在城市（本平臺主要顯示

36、呼和浩特市）的地圖中標注出場館的詳細信息，用戶能夠清晰的查看場館在地圖中的位置，并提供附近查找、公交路線查詢等服務(wù)。除此之外還提供了基于瀏覽器的定位功能，電子地圖界面如圖3-15所示。圖3-15 電子地圖其中紅色的標注點是場館位置，藍色的標注點為定位。1) 電子地圖的實現(xiàn)系統(tǒng)中在線電子地圖是通過百度地圖javascript api實現(xiàn)的，使用時需要加載百度地圖javascript api 的js文件，在1.5版本中需要使用key值，如: 0) for(var i = 0; i data.length; i+) createinfowindow(datai); 其中mapshow()是tools

37、ervice類中查詢?nèi)繄鲳^信息的方法，將返回的信息放到list中返回給guninfo(data)，data接受了返回的list值，createinfowindow(datai)接收每個場館信息并在地圖中創(chuàng)建具有百度地圖樣式的信息窗口。3) 創(chuàng)建百度地圖樣式的信息窗口百度樣式的信息窗口提供了窗口信息顯示、附近查找、路線查詢、短信服務(wù)等功能。在本系統(tǒng)中使用了百度樣式信息窗口來顯示場館信息，由百度地圖javascript開源庫bmaplib的檢索信息窗口searchinfowindow類實現(xiàn)。實現(xiàn)過程：首先向地圖中添加覆蓋物，通過addoverlay添加marker標記，用icon類顯示標記的自定

38、義圖片，當用戶點擊該標記圖片時，觸發(fā)窗口事件，然后顯示場館信息窗口。在該窗口上可以查看的場館信息包括：名稱、地址、電話、簡介、場館圖片等，此外還可以基于該場館進行公交路線查詢、附近查找、短信發(fā)送信息等。其關(guān)鍵代碼如下：marker.addeventlistener(click, function(e)/點擊觸發(fā)事件 searchinfowindow.open(marker); );4) 實現(xiàn)定位功能系統(tǒng)的定位功能是基于瀏覽器的定位，使用html5中用于定位的 geolocation。geolocation允許用戶在 web 應(yīng)用程序中共享他們的地理位置，通過瀏覽器感知用戶的地理位置。html5

39、 geolocation 位置信息構(gòu)成：緯度、經(jīng)度，以及獲得這些數(shù)據(jù)的途徑（gps、ip 地址、rfid、wifi、藍牙 mac 地址、gsm/cdma 卡 id 等）。若用戶瀏覽器支持該html5新特性，并且允許web程序共享其地理位置，則調(diào)用geolocation類的getcurrentposition（）獲取用戶的位置信息，在地圖中標記并顯示用戶的位置信息，定位流程圖如圖3-16所示。圖3-16 地圖定位流程圖3.2.2 系統(tǒng)后臺全民健身電子地圖在線服務(wù)平臺的后臺運行效果如圖3-18所示。圖3-18 系統(tǒng)后臺界面系統(tǒng)后臺頁面布局使用frameset框架，提供了管理員個人信息修改，添加和管

40、理其他管理員，注冊用戶管理，場館信息添加和管理，獲取場館坐標和查看電子地圖，賽事公告發(fā)布和管理，新聞信息發(fā)布和管理，評論留言管理。下面將詳細介紹主要模塊的實現(xiàn)過程。1. 注冊用戶管理管理員對注冊用戶進行管理，包括刪除、查看詳細信息等。系統(tǒng)得到注冊用戶管理請求時，從用戶servlet的usermana方法獲取全部的注冊用戶信息，并跳轉(zhuǎn)到usermana.jsp頁面顯示。當管理員選擇刪除用戶時，系統(tǒng)將向管理員發(fā)出確認刪除信息提示，得到確認后將執(zhí)行用戶servlet的userdel方法，進行刪除操作，注冊用戶管理界面如圖3-22所示。圖3-22 注冊用戶管理管理員可以查看用戶的詳細信息，系統(tǒng)將通過i

41、d從數(shù)據(jù)庫中查找用戶信息，并跳轉(zhuǎn)至userxinxi.jsp頁面顯示，用戶詳細信息如圖3-23所示。圖3-23 用戶詳細信息2. 場館信息管理場館信息管理羅列了系統(tǒng)中所有的場館信息，可以進行場館信息的添加、修改和刪除操作。系統(tǒng)得到場館信息管理請求時，從場館servlet的guanmana方法中獲取全部的場館信息存放至request中，在guanmana.jsp頁面進行顯示。場館管理界面如圖3-24所示。圖3-24 場館信息管理修改場館信息。首先系統(tǒng)根據(jù)場館id參數(shù)查詢場館信息，保存在request中，跳至頁面guanmodi.jsp顯示，當管理員修改完信息提交時，系統(tǒng)將進行數(shù)據(jù)校驗，通過校驗后

42、，將更新信息提交至數(shù)據(jù)庫，場館信息修改界面如圖3-25所示。圖3-25 場館信息修改添加新場館信息。管理員填寫場館信息提交時，系統(tǒng)將對這些數(shù)據(jù)進行校驗，通過校驗后，系統(tǒng)調(diào)用場館servlet的guanadd方法將信息添加至數(shù)據(jù)庫中。其中上傳場館圖片使用smartupload文件上傳組件，實現(xiàn)圖片數(shù)據(jù)的相關(guān)校驗，包括：大小控制在10k-200k內(nèi)，格式為jpg和gif等。場館圖片成功上傳后，系統(tǒng)將對文件重新命名，即采用項目絕對路徑加時間戳。在數(shù)據(jù)庫中存放的是圖片路徑。添加新場館界面如圖3-26所示。圖3-26 新場館信息添加3. 獲取場館坐標和查看電子地圖獲取場館坐標，是指管理員在不知道場館具體

43、坐標時，可以在地圖上在線獲取場館經(jīng)緯度坐標值。當管理員點擊地圖時，系統(tǒng)監(jiān)聽地圖點擊，將點擊處的經(jīng)緯度顯示給管理員。添加場館信息后還可以在線預(yù)覽電子地圖，從數(shù)據(jù)庫中讀取所有的場館信息，并在地圖上標注。獲取經(jīng)緯度坐標界面如圖3-27所示。圖3-27 獲取場館經(jīng)緯度4. 賽事公告管理賽事公告管理提供了全部賽事信息的修改、刪除以及新賽事的添加。當系統(tǒng)收到賽事公告管理請求時，調(diào)用賽事公告servlet的gonggaomana方法，獲取全部賽事信息，存放至request中并在gonggaomana.jsp頁面顯示。管理員選擇刪除時，系統(tǒng)將發(fā)出刪除提示，得到刪除確認后將要刪除賽事的id傳遞給servlet的

44、gonggaodel方法，執(zhí)行刪除操作，刪除成功后跳轉(zhuǎn)至管理頁，賽事公告管理界面如圖3-28所示。圖3-28 賽事公告管理添加賽事信息。管理員提交新賽事信息時，系統(tǒng)將對數(shù)據(jù)進行校驗，通過校驗后，調(diào)用賽事公告servlet的gonggaoadd方法向數(shù)據(jù)庫添加信息，賽事公告添加界面如圖3-29所示。圖3-29 賽事公告添加選擇查看詳細內(nèi)容，系統(tǒng)將該賽事信息的id參數(shù)傳遞至賽事公告servlet的gonggaodetailhou方法，并根據(jù)id查詢賽事信息，將結(jié)果存放至request后跳轉(zhuǎn)至 gonggaodetailhou.jsp頁面，顯示賽事的詳細信息，后臺賽事詳細信息界面如圖3-30所示。圖

45、3-30 賽事詳細信息修改賽事信息。系統(tǒng)得到修改請求后，在后臺通過id查詢相應(yīng)的賽事信息，將信息傳至修改頁面，管理員修改完信息提交后，系統(tǒng)通過后臺servlet將信息更新至數(shù)據(jù)庫中，賽事信息修改界面如圖3-31所示。圖3-31 賽事信息修改5. 新聞信息管理實現(xiàn)方法與“賽事公告管理”模塊類似，不再贅述。新聞信息管理界面如圖3-23所示。圖3-32 新聞信息管理6. 評論留言管理評論留言列舉了全部評論信息，管理員可以刪除和回復(fù)評論信息。系統(tǒng)收到評論管理請求時，評論servlet的liuyanmana方法查詢?nèi)康脑u論信息，跳轉(zhuǎn)至管理頁面liuyanmana.jsp顯示。當管理員選擇刪除該評論時，

46、系統(tǒng)會向管理員確認，當?shù)玫酱_認后，系統(tǒng)將調(diào)用servlet的liuyandel方法通過id進行刪除，刪除成功后將跳至管理頁面，評論留言管理界面如圖3-36所示。圖3-36 評論留言管理管理員選擇回復(fù)評論時，系統(tǒng)將彈出回復(fù)對話框，提交回復(fù)內(nèi)容后，系統(tǒng)將進行校驗。通過校驗后將回復(fù)信息添加至數(shù)據(jù)庫中，管理員評論回復(fù)界面如圖3-37所示。圖3-37 評論留言信息回復(fù)3.3 系統(tǒng)調(diào)試問題及解決方法在課題的設(shè)計開發(fā)中，遇到了諸多問題，現(xiàn)總結(jié)如下。1. 編碼問題在系統(tǒng)開發(fā)過程中，編碼問題是比較常見的，一般都會在每一個jsp或者servlet中都要重復(fù)編寫“request.setcharacterencodi

47、ng(“utf-8”);”語句。造成大量代碼重復(fù)。解決方法是通過過濾器實現(xiàn)編碼過濾功能。2. 使用javascript調(diào)用java方法在系統(tǒng)的開發(fā)過程中有大量的這樣問題：例如驗證碼的校驗，驗證碼由后臺servlet產(chǎn)生并放在session中，所以在前臺校驗時，會產(chǎn)生從session中取出的驗證碼值和后臺產(chǎn)生驗證碼值不同步問題；在電子地圖顯示場館信息時，電子地圖要想標記所有場館，必須從數(shù)據(jù)庫中讀取全部的場館信息，然后將場館信息通過javascript調(diào)用并顯示。以上說明存在javascript中調(diào)用java類的方法問題，在本課題中通過dwr可以實現(xiàn)從客戶端用javascript輕松調(diào)用java類

48、的方法，并且能夠獲取返回值。3. 頁面布局頁面布局問題是web開發(fā)中常見的問題，存在舊版本兼容問題和不同瀏覽器的顯示問題。對于舊版本兼容問題：每個瀏覽器的版本對css支持不同，產(chǎn)生的效果也不相同。其次是不同瀏覽器的表現(xiàn)，例如現(xiàn)在流行的主流瀏覽器ie與firefox，二者的核心架構(gòu)上有明顯的區(qū)別，雖都是web標準開發(fā)，對于web的表現(xiàn)上，難免會有部分區(qū)別，導致了部分css在兩個瀏覽器中的顯示會有所不同。解決上述問題的方法是在每個瀏覽器下進行css樣式調(diào)試。結(jié) 論全民健身電子地圖在線服務(wù)平臺可以匯集所有的健身信息，極大地方便了廣大市民的健身，有利于政府部門優(yōu)化、整合健身資源，通過該平臺能很好的展示

49、城市全民健身的良好風貌。1. 系統(tǒng)特點全民健身電子地圖在線服務(wù)平臺采用jsp、servlet和javascript技術(shù)實現(xiàn)，系統(tǒng)總體頁面是按照div + css進行布局設(shè)計。在安全方面，系統(tǒng)采用前臺對數(shù)據(jù)進行javascript校驗，減少了服務(wù)器端壓力；在數(shù)據(jù)庫中對數(shù)據(jù)操作進行了相應(yīng)約束，所以有更好的安全性。在數(shù)據(jù)交互方面，系統(tǒng)數(shù)據(jù)連接使用數(shù)據(jù)庫連接池，提高了資源重用，優(yōu)化了系統(tǒng)響應(yīng)速度。2. 存在問題由于技術(shù)和時間方面的原因，系統(tǒng)還沒有進行多瀏覽器兼容調(diào)試，目前只實現(xiàn)了firefox和ie瀏覽器中的調(diào)試，其他瀏覽器還有待測試；系統(tǒng)在向服務(wù)器提交數(shù)據(jù)時，主要采用javascript進行數(shù)據(jù)合法

50、性校驗，如果用戶在瀏覽器上禁止javascript腳本運行，會導致一些運行錯誤以及有些功能不能正常使用。以上問題需要在下一步的開發(fā)中進行進一步的完善。參考文獻1 李興華，王月清java web開發(fā)實戰(zhàn)經(jīng)典北京清華大學出版社20102 孫風棟主編oracle 10g數(shù)據(jù)庫基礎(chǔ)教程北京清華大學出版社20103 張朝明oracle 入門很簡單北京清華大學出版社20114 郝安林，王偉平等jsp從入門到精通北京電子工業(yè)出版社2009 5 盧翰，王國輝jsp項目開發(fā)案例全程實錄北京清華大學出版社20116 劉淳java web應(yīng)用開發(fā)北京中國水利水電出版社20127 郭克華主編javaee程序設(shè)計與應(yīng)用

51、開發(fā)北京清華大學出版社20118 胡添javascript完全自學手冊北京機械工業(yè)出版社20099 楊貴，楊興21天學通javascript北京電子工業(yè)出版社200910 鄭莉，劉兆宏java語言程序設(shè)計案例教程北京清華大學出版社201011 direct web remoting documentation/dwr/documentation/index.html12 budi kurniawan java for the web with servlets, jsp, and ejb: a developers guide to j2ee solutionsne