基于javaee的旅游交友平臺的設計與實現【畢業(yè)論文】

1、<p><b>　　本科畢業(yè)論文</b></p><p><b>　　（20 屆）</b></p><p>　　畢業(yè)設計（論文）任務書</p><p>　　1 設計（論文）題目及專題： 基于JavaEE的旅游交友平臺的設計與實現

2、</p><p>　　2 學生設計（論文）時間：自 開題 開始至 2015 年 5 月 31 日止</p><p>　　3 設計（論文）所用資源和參考資料：</p><p>　　[1] (美)Bruce Eckel.Thinking in Java [M], Prentice Hall出版,2006-2-20</p><p>　　[2

3、] 約翰遜, Spring框架高級編程[M]. 機械工業(yè)出版社,2006.</p><p>　　[3] 李剛.輕量級JavaEE企業(yè)應用實戰(zhàn) [M]. 電子工業(yè)出版社,2014</p><p>　　[4] 施伯樂,丁寶康,汪衛(wèi).數據庫系統教程（第三版）[M].高等教育出版社,2008.</p><p>　　[5]（美）格羅夫 著,章小莉等譯. SQL完全手冊（第二版

4、）[M].電子工業(yè)出版社,2006.</p><p>　　[6] 賀松平.基于MVC模式的B/S架構的研究及應用[M].武漢:華中科技大學,2006.</p><p>　　[7](美) Brad Green.AngularJS開發(fā)下一代Web應用[M],電子工業(yè)出版社,2013</p><p>　　4 設計（論文）應完成的主要內容：</p><p

5、>　　本文主要研究的內容是一個類微博的旅游交友平臺的設計與實現，模塊分為)用戶登陸注冊、類微博動態(tài)的發(fā)表、轉發(fā)、評論和點贊、好友即時聊天功能、用戶個人信息設置和用戶個人主頁面功能設計</p><p>　　5 提交設計（論文）形式（設計說明與圖紙或論文等）及要求：</p><p>　　每人刻錄光盤一張，含有畢業(yè)設計的代碼和論文電子稿和答辯PPT，與畢業(yè)論文一同上交。</p>

6、<p>　　6 發(fā)題時間： 2014 年 12 月 30 日</p><p>　　指導教師： （簽名）</p><p>　　學 生： （簽名）</p><p>　　畢業(yè)設計（論文）指導人評語</p><p>　　[主要對學生畢業(yè)設計（論

7、文）的工作態(tài)度，研究內容與方法，工作量，文獻應用，創(chuàng)新性，實用性，科學性，文本（圖紙）規(guī)范程度，存在的不足等進行綜合評價]</p><p>　　郭飛鵬同學在畢業(yè)設計過程中，學習態(tài)度較端正，在各方面表現良好。</p><p>　　該同學所選的課題較難，工作量偏大，使用JavaEE技術，采用MySQL數據庫，熟練地整合Hibernate，JPA，Spring，Spring Web MVC，An

8、gularJS等多種架構框架，開發(fā)了交友旅游平臺，實現了較完整的功能模塊，其系統運行情況正常，對于老師交予的任務全部完成。論文結構較好，層次較清晰，設計合理，論文規(guī)范，格式符合畢業(yè)論文要求，論文觀點正確，材料充實，圖表正確，論據教充分。</p><p>　　論文反映了該學生有較強的查找資料能力，和分析解決問題的能力，論文達到了本科畢業(yè)生要求，建議允許該同學進行答辯。</p><p>　　指

9、導人： （簽名）</p><p><b>　　年 月 日</b></p><p>　　指導人評定成績： </p><p>　　畢業(yè)設計（論文）評閱人評語</p><p>　　[主要對學生畢業(yè)設計（論文）的文本格式、圖紙規(guī)范程度，工作量，研究內容與方法，實用性與科學性，結論和存在的

10、不足等進行綜合評價]</p><p>　　郭同學所選的課題難，工作量大，使用JavaEE技術對旅游交友平臺進行細致地開發(fā)，主要實現了用戶登陸模塊、注冊模塊、個人信息設置模塊、好友動態(tài)、用戶個人主頁和即時聊天模塊，其系統運行情況良好，對于老師交予的任務全部完成。</p><p>　　提交的論文結構合理，格式規(guī)范，層次清晰，觀點正確，材料很充實，圖表符合規(guī)范，論據充分。</p>

11、<p>　　提交的設計和論文反映了該生理論基礎知識扎實，能比較熟練地運用所學知識，具有較強地分析和解決問題的能力，完全達到了本科畢業(yè)生的有關要求。</p><p>　　評閱人： （簽名）</p><p><b>　　年 月 日</b></p><p>　　評閱人評定成績： </p>

12、;<p>　　畢業(yè)設計（論文）答辯記錄</p><p>　　日期： </p><p>　　學生： 學號： 班級： </p><p>　　題目：

13、 </p><p>　　提交畢業(yè)設計（論文）答辯委員會下列材料：</p><p>　　1 設計（論文）說明書共頁</p><p>　　2 設計（論文）圖 紙共頁</p><p>　　3 指導人、評閱人評語共頁</p><p>　　畢業(yè)設計（論文）答辯委

14、員會評語：</p><p>　　[主要對學生畢業(yè)設計（論文）的研究思路，設計（論文）質量，文本圖紙規(guī)范程度和對設計（論文）的介紹，回答問題情況等進行綜合評價]</p><p>　　答辯委員會主任： （簽名）</p><p>　　委員： （簽名）</p><p><b>

15、　?。ê灻?lt;/b></p><p><b>　?。ê灻?lt;/b></p><p><b>　?。ê灻?lt;/b></p><p>　　答辯成績： </p><p>　　總評成績： </p><p><b>　　摘

16、 要</b></p><p>　　隨著“互聯網+”概念的提出，催生了互聯網+旅游這種新的經濟模式。在經過分析研究各種旅游平臺的特色以及優(yōu)劣，結合傳統旅游平臺和交友平臺現狀以及存在的問題，提出研究該課題的意義以及所要研究的內容，并實現和建立了一個款基于JavaEE和旅游、交友為一體的平臺，該平臺實現了旅游與互聯網的有機結合。其主要功能包括用戶登陸注冊、發(fā)表旅游動態(tài)、評論回復動態(tài)、轉發(fā)動態(tài)、個人信息設置和

17、即時聊天功能等。</p><p>　　關鍵詞:旅游;社交;信息共享;JavaEE</p><p><b>　　ABSTRACT</b></p><p>　　With the concept of the “Internet +”, Internet + tourism this new economic model is bringed. In

18、 through the analysis of various tourism platform characteristics and advantages and disadvantages, combined with the traditional tourism platform and SNS that they have current situation and existing problems, propose t

19、his protject’s research and sense , established a platform which is based JavaEE. Its main function includes the user login registration, the publication of tourism dynamics, comments </p><p>　　Keywords: to

20、urism;SNS; Information Sharing;JavaEE</p><p><b>　　目 錄</b></p><p>　　第一章 前 言1</p><p>　　1.1 旅游交友平臺概述1</p><p>　　1.2 課題研究的背景1</p><p>　　1.3

21、 目的和意義1</p><p>　　1.4 本文主要研究的內容2</p><p>　　第二章 相關工具和技術介紹3</p><p>　　2.1 JavaEE簡介3</p><p>　　2.2 JPA框架3</p><p>　　2.2.1 MySQL數據庫3</p><p>

22、;　　2.2.2 JDBC技術3</p><p>　　2.2.3 Hibernate框架3</p><p>　　2.2.4 JPA框架3</p><p>　　2.3 Spring框架4</p><p>　　2.4 SpringMVC框架4</p><p>　　2.5 AngularJS框架5&l

23、t;/p><p>　　2.6 Maven工具5</p><p>　　第三章 系統需求分析7</p><p><b>　　3.1 概述7</b></p><p>　　3.2 需求分析7</p><p>　　3.2.1 可行性分析7</p><p>　　3.2.

24、2 功能模塊7</p><p>　　3.3 數據庫設計11</p><p>　　3.3.1 數據庫設計簡介11</p><p>　　3.3.2 E-R圖設計11</p><p>　　3.3.3 數據庫表設計14</p><p>　　第四章 系統詳細設計17</p><p&g

25、t;　　4.1 系統的主要架構及開發(fā)模式17</p><p>　　4.2 系統前端網頁設計18</p><p>　　4.3 后臺模塊設計21</p><p>　　4.3.1 登陸注冊模塊21</p><p>　　4.3.2 動態(tài)模塊24</p><p>　　4.3.3 即時聊天模塊27</

26、p><p>　　4.3.4 個人信息設置模塊30</p><p>　　4.3.5 用戶個人信息模塊34</p><p>　　第五章 總結與展望37</p><p><b>　　參考文獻39</b></p><p><b>　　致謝41</b></p>

27、<p><b>　　第一章 前 言</b></p><p>　　1.1 旅游交友平臺概述</p><p>　　2015年政府首次提出“互聯網+”的概念，并且將制定“互聯網+”行動計劃。其目的是加速傳統產業(yè)和互聯網行業(yè)的深度融合，促進經濟的快速發(fā)展，加速產業(yè)結構的調整和升級。而我們這個平臺，正是傳統旅游行業(yè)與互聯網的深度融合。該平臺是一個類似微博的平臺，

28、以旅游、交友為主題，用戶可以發(fā)表類似微博的旅游動態(tài)，用戶之間可以互動交流，也可以使用系統中即時聊天的功能互動聊天。我們不再依賴朋友或者旅行團等，便可以享受旅行給我們帶來的快樂。分享，交友，有助于人脈資源的積累，而且更多的是使信息的傳播更加多元化，更加便捷化，以及更加有趣化。</p><p>　　1.2 課題研究的背景</p><p>　　“互聯網+”行動計劃的提出以及實施所帶來的社會性效

29、應，使得我們看到了另一個互聯網時代的到來。當前創(chuàng)新型公司的出現，無不跟互聯網扯上關系。我們可以發(fā)現，傳統的旅游行業(yè)正在進行著一場互聯網變革，各大互聯網公司正在積極的搶占該市場，只為在該市場價值中分一杯羹。比如去哪兒網，阿里的去啊系統等，都在改變著旅游行業(yè)的創(chuàng)新性變革。他們都在積極的為各大旅游景點做互聯網式的營銷，卻忽略了用戶才是主體，用戶需要信息的傳播而不是旅游信息跟令人眼花繚亂的價錢信息綁定。用戶需要自媒體式的一種平臺來傳播更有價值的

30、旅游信息，而正是這種需求，將旅游和交友聯系到了一起，綁定旅游和交友，該平臺稱為了自媒體平臺。</p><p>　　在互聯網式的旅游市場中，我們有這樣的需求如下幾點所示。</p><p>　　(1)以用戶主導，從用戶的需求和用戶的感受出發(fā)，圍繞用戶為中心來設計平臺。在當今騰訊QQ和新浪微博大行其道的今天，我們抓住用戶的習慣，結合旅游設計類</p><p>　　似騰訊Q

31、Q和新浪微博的產品。</p><p>　　(2)用戶需要互動交流才能體現自媒體效應，抓住旅游行業(yè)的痛點，以即時聊天的</p><p>　　方式互動交流，為廣大驢友提供一個交友平臺。</p><p>　　(3)界面新穎又符合用戶的行為習慣，擁有良好的用戶體驗。</p><p>　　1.3 目的和意義</p><p>　

32、　開發(fā)旅游交友平臺的目的在于 ：“互聯網+”計劃也在漸漸啟動和實行，傳統旅游行業(yè)正在通過互聯網化振興，我們需要響應該計劃的號召，為廣大喜歡旅游的朋友們提供一個簡單方便的交友平臺。</p><p>　　開發(fā)該平臺的意義在于：旅游以互聯網式的交友方式加速平臺的自媒體化，促進信息和人脈的積累，給用戶帶來視覺上的體驗和對該平臺的可信度。</p><p>　　1.4 本文主要研究的內容</p

33、><p>　　結合上述研究背景，本文主要研究的內容是基于JavaEE編程語言與MySQL數據庫的旅游交友平臺，實現用戶登陸模注冊模塊、個人信息設置模塊、好友動態(tài)、用戶個人主頁和即時聊天模塊四個模塊的設計。分為如下幾個部分來研究該平臺的設與實現計：</p><p>　　后臺使用JavaEE為編程語言，SpringMVC、Spring、JPA框架的優(yōu)劣。</p><p>　

34、　前端AngularJS框架的認識和使用。</p><p>　　系統需求分析和概要設計。</p><p>　　該平臺的主要功能以及各個功能模塊的設計與實現。</p><p>　　第二章 相關工具和技術介紹</p><p>　　2.1 JavaEE簡介</p><p>　　JavaEE(Java Platform E

35、nterprise Edition，Java企業(yè)版),是Java的一種開發(fā)平臺。Java有JavaSE(Java Platform Standard Edition，Java標準版)，JavaEE，JavaME(Java Platform Micro Edition，Java微型版)，三種平臺，而JavaEE是一種用來開發(fā)Web應用平臺。當前世界開發(fā)Web主流的技術有Java、Microsoft.NET等。該旅游交友平臺采用Java是因

36、為Java的可移植性強、并發(fā)性好、開源框架多如Apache等開源框架，功能強大，運行速度快，可以快速迭代，適合做大中型的Web應用。</p><p>　　2.2 JPA框架 </p><p>　　2.2.1 MySQL數據庫</p><p>　　SQL(Structured Query Language，結構化查詢語言)語言是數據庫操作指令集，是針對數據庫的操作

37、語言。幾乎所有的數據庫都支持SQL語言。常用的數據庫有Oracle、MySQL、SQL Server等。MySQL數據庫屬中型數據庫，體積小，速度快，非常適合應用于開發(fā)中小型應用程序。因此該平臺選擇使用MySQL數據庫。</p><p>　　2.2.2 JDBC技術</p><p>　　JDBC(Java Data Base Connectivity，Java數據庫連接)是Java執(zhí)行數

38、據庫SQL語句的一組API(Application Programming Interface，應用程序編程接口)，它規(guī)定了如何建立數據庫連接并且如何進行增刪查改操作，很方便快速的進行數據庫操作。 </p><p>　　2.2.3 Hibernate框架</p><p>　　Hibernate框架是一個使用Java語言編寫的ORM(Object/Relation Mapping，對象關系

39、型映射)框架，底層封裝了JDBC操作，不需要在Java中使用SQL語句，對象和數據庫表一一映射，通過操作對象來實現數據的增刪改查，充分體現了Java的面向對象的思想。類似的框架還有TopLink、JDO等。</p><p>　　基于Hibernate的優(yōu)勢，該平臺采用該技術來映射數據庫實體類。</p><p>　　2.2.4 JPA框架</p><p>　　JPA

40、(Java Persistence API，Java持久化接口)框架是由EJB 3.0(Enterprise JavaBean，Java企業(yè)Bean)軟件專家組開發(fā)。JPA為POJO提供持久化支持標準規(guī)范，它和Hibernate，TopLink，JDO等一系列ORM框架總體一致，但是這些框架的進一步封裝，支持這些ORM框架的替換，符合面向對象的多態(tài)性。</p><p>　　基于JPA框架的可擴展性等優(yōu)勢，采用Hi

41、bernate框架實現的JPA框架來開發(fā)該平臺。</p><p>　　2.3 Spring框架</p><p>　　Spring是使用Java語言編寫的一個分層架構，允許開發(fā)者使用哪個組件。它的最核心的兩個特點是DI（Dependecy Injection，依賴注入）和IOC（Inversion of Control，控制反轉），講JavaBean實體類交給Spring來管理，使開發(fā)者可

42、以拋開業(yè)務對象的創(chuàng)建等問題。</p><p>　　Spring框架的優(yōu)點主要有如下幾點。</p><p>　　使用Spring框架的IOC容器，將對象之間的依賴關系交給Spring框架，降低組件之間的耦合性，讓我們更專注于應用邏輯。</p><p>　　可以提供眾多服務，事務管理，WS等。</p><p>　　AOP的很好支持，方便面向切面編

43、程。</p><p>　　對主流的框架提供了很好的集成支持，如Hibernate,Struts2,JPA等。</p><p>　　Spring 框架DI機制降低了業(yè)務對象替換的復雜性。</p><p>　　Spring框架屬于低侵入，代碼污染極低。</p><p>　　Spring框架的高度可開放性，并不強制依賴于Spring，開發(fā)者可以自由

44、選擇Spring框架的部分或全部。</p><p>　　2.4 SpringMVC框架</p><p>　　Spring Web MVC是一種基于Java的實現了Web MVC(Model View Controller，模型-視圖-控制器)設計模式的請求驅動類型的輕量級Web框架，即使用了MVC架構模式的思想，將Web層進行職責解耦，基于請求驅動指的就是使用請求-響應模型，框架的目的就

45、是幫助我們簡化開發(fā)，Spring Web MVC也是要簡化我們日常Web開發(fā)的。同類型的框架有Struts，Struts2等。</p><p>　　SpringMVC框架和Struts2對比如下。</p><p>　　(1)機制：SpringMVC的入口是servlet，而Struts2是filter，這樣就導致了二者的機制不同，這里就牽涉到servlet和filter的區(qū)別了。</

46、p><p>　　(2)性能：SpringMVC會稍微比Struts2快。SpringMVC是基于method（方法）的設計，而Struts2是基于class（類），每個請求對應一個action，而SpringMVC基于方法，粒度更細，但要小心把握像在servlet控制數據一樣。SpringMVC是方法級別的攔截，攔截到方法后根據參數上的注解，把request數據注入進去，在SpringMVC中，一個方法對應一個req

47、uest上下文。而Struts2框架是類級別的攔截，每次來了請求就創(chuàng)建一個Action，然后調用setter getter方法把request中的數據注入；Struts2實際上是通過setter getter方法與request打交道的；Struts2中，一個Action對象對應一個request上下文。</p><p>　　(3)設計思想上：Struts2更加符合OOP的編程思想， Spring就比較謹慎，在s

48、ervlet上擴展。</p><p>　　基于SpringMVC的優(yōu)勢，采用SpringMVC開發(fā)該平臺。</p><p>　　2.5 AngularJS框架</p><p>　　AngularJS框架是一個純前端的MVC框架，為了克服HTML在構建應用上的不足而設計的。AngularJS框架試圖成為Web應用中的一種端對端的解決方案。這意味著它不只是你的Web應

49、用中的一個小部分，還是一個完整的端對端的解決方案。它的突出功能有雙向數，路由控制，過濾器，指令，控制器以及服務等。</p><p>　　2.6 Maven工具</p><p>　　Maven是基于項目對象模型(ProjectObjectModel，POM)，可以通過一小段描述信息來管理項目的構建，報告和文檔的軟件項目管理工具。該平臺中，主要用于Jar包的管理和集成。</p>

50、<p>　　第三章 系統需求分析</p><p><b>　　3.1 概述</b></p><p>　　在軟件工程中，需求分析指的是在建立一個新的或改變一個現存的電腦系統時描寫新系統的目的、范圍、定義和功能時所要做的所有的工作。需求分析是軟件工程中的一個關鍵過程。在這個過程中，系統分析員和軟件工程師確定顧客的需要。只有在確定了這些需要后他們才能夠分析和

51、尋求新系統的解決方法。</p><p><b>　　3.2 需求分析</b></p><p>　　3.2.1 可行性分析</p><p>　　3.2.1.1 技術可行性分析</p><p>　　考慮到系統的可移植性和開發(fā)的容易程度，采用JavaEE平臺而棄用Microsoft .Net平臺。Web服務器使用Tomc

52、at和Apache架設，使用MySQL數據庫，因為Apache運行PhpMyadmin軟件可以通過瀏覽器查看數據庫，簡單方便。后臺使用當前主流的JavaWeb框架SpringMVC、Spring、JPA。ORM框架采用JPA并且集成Hibernate框架，因為JPA框架具有可擴展性，如果將Hibernate換成其他ORM框架，JPA只需要改動少量配置即可。與前端交互的MVC框架則采用SpringMVC是因為可以直接集成到Spring中，

53、通過注解的方式，直接配置請求路徑而不需要配置類似Struts2的action，這樣的話缺點是侵入性會大一點，MVC框架就可以替換。</p><p>　　綜上所述，這些技術是可以實現該平臺的開發(fā)，技術上是可行的。</p><p>　　3.2.1.2 經濟可行性分析</p><p>　　該平臺使用Tomcat和Apache架設服務器，并且是個小型的應用，流量訪問上沒有

54、太大壓力。目前數據庫和Web服務器是架設在不同PC上的，這樣減小了服務器端內存的消耗，運行在局域網內。</p><p>　　3.2.2 功能模塊</p><p>　　3.2.2.1 基本功能</p><p><b>　　用戶的登陸注冊。</b></p><p>　　發(fā)表動態(tài)以及圖片上傳，動態(tài)的評論、轉發(fā)和點贊等。&

55、lt;/p><p><b>　　用戶查看功能。</b></p><p><b>　　好友搜索、添加。</b></p><p><b>　　即時通訊(IM)。</b></p><p>　　3.2.2.2 系統功能結構圖</p><p>　　系統功能模塊分為登

56、錄注冊模塊、即時聊天模塊、動態(tài)模塊、個人信息設置模塊和用戶查看模塊。功能模塊圖如圖3.2.1所示。</p><p>　　圖3.2.1系統功能結構圖</p><p>　　3.2.2.3. 系統功能分析</p><p>　　(1)注冊功能流程分析</p><p>　　用戶注冊功能對用戶名、密碼和郵箱進行校驗判斷是否正確，然后確定是否注冊成功。流程

57、圖如圖3.2.2所示。</p><p>　　圖3.2.2 注冊流程圖</p><p>　　(2)登錄模塊流程分析</p><p>　　用戶輸入賬號密碼，判斷是否正確，確定是否登錄成功。流程如圖3.2.3所示。</p><p>　　圖3.2.3 登錄流程圖</p><p><b>　　(3)動態(tài)模塊分析<

58、/b></p><p>　　該模塊用戶是以動態(tài)為主體，用戶可以發(fā)表類似微博的動態(tài)、評論和轉發(fā)動態(tài)、點贊以及回復動態(tài)。模塊圖如圖3.2.4所示。</p><p>　　圖3.2.4 動態(tài)模塊圖</p><p>　　(4)用戶個人信息設置模塊分析</p><p>　　該模塊用戶可以設置自己的個人信息例如郵箱、出生日期、密碼等。模塊圖如圖3.2

59、.5所示。</p><p>　　圖3.2.5 用戶個人信息設置模塊圖</p><p>　　(5)即時聊天模塊分析</p><p>　　該模塊采用環(huán)信第三方插件，可以對聊天信息即時推送到自己的Web服務器中，就可以接收聊天信息并處理。該模塊功能如圖3.2.6所示。</p><p>　　圖3.2.6 即時聊天模塊圖</p><

60、p>　　3.3 數據庫設計</p><p>　　3.3.1 數據庫設計簡介</p><p>　　數據庫設計(Database Design)通常是指對于一個給定的應用環(huán)境，構造其最優(yōu)的數據庫模式，并建立數據庫及其應用系統，使其能夠有效地存儲相關數據，滿足各種用戶的應用需求，根據用戶的要求，在某一個具體的數據庫管理系統上，設計數據庫的結構和建立數據庫的過程[5]。</p>

61、;<p>　　3.3.2 E-R圖設計</p><p>　　E-R圖也就是實體-聯系圖(Entity Relationship Diagram)，它提供了表示實體型、屬性和聯系的方法，可用來描述現實世界的概念模型。下面將對系統實體圖進行簡要的敘述。</p><p>　　如圖3.3.1 用戶實體屬性圖，描述了用戶的自有屬性，用戶擁有id、用戶名、密碼、頭像、Email、聯系方

62、式、生日、性別和身份證屬性。</p><p>　　圖3.3.1 用戶實體屬性圖</p><p>　　如圖3.3.2，動態(tài)有id、用戶ID、動態(tài)內容、圖片路徑和轉發(fā)用戶ID屬性。</p><p>　　圖3.3.2 動態(tài)實體屬性圖</p><p>　　如圖3.3.3好友關系實體屬性圖所示，好友關系有id、用戶A id、用戶B id、好友備注和分組

63、id。</p><p>　　圖3.3.3 好友關系實體屬性圖</p><p>　　如圖3.3.4所示，該實體表示系統內的好友分組，屬性有分子ID和分組名。</p><p>　　圖3.3.4 好友分組實體屬性圖</p><p>　　如圖3.3.5所示，評論和回復是同一個實體，當被評論人為空的時候，則認為是評論動態(tài)，否則認為是回復評論人。 <

64、;/p><p>　　圖3.3.5 評論回復實體屬性圖</p><p>　　如圖3.3.6所示，是各個實體之間的聯系圖，用戶可以發(fā)表多條動態(tài)，并且添加多條評論回復，多個用戶之間可以點對地單聊。</p><p>　　圖3.3.6 實體聯系ER圖</p><p>　　3.3.3 數據庫表設計 </p><p>　　該平臺數據庫

65、中有6個表，分別為用戶表、好友分組表、動態(tài)表、評論回復表、點贊表和聊天歷史記錄表。表名分別為yyw_user、yyw_friendgroup、yyw_state、yyw_praise、yyw_replay和yyw_chathistory。</p><p>　　用戶表中字段分別是ID、用戶名、密碼、郵箱、性別、地址和聯系方式、身份證和個人信息簡介。字段名、類型、長度、約束和備注如表3.3.1所示。</p>

66、;<p>　　表3.3.1 用戶表</p><p>　　好友分組表中字段分別是ID和分組名。分組名唯一不重復字段名、類型、長度、約束和備注如表3.3.2所示。</p><p>　　表3.3.2 好友分組表</p><p>　　動態(tài)表中字段分別是動態(tài)ID、用戶id、動態(tài)時間、動態(tài)內容、轉發(fā)自動態(tài)id和圖片路徑。字段名、類型、長度、約束和備注如表3.3.3

67、所示。</p><p>　　表3.3.3 動態(tài)表</p><p>　　點贊表中字段分別是ID、動態(tài)id和用戶ID。字段名、類型、長度、約束和備注如表3.3.4所示。</p><p>　　表3.3.4 點贊表</p><p>　　評論回復表中字段分別是ID、動態(tài)id、評論人和被評論人。字段名、類型、長度、約束和備注如表3.3.5所示。</

68、p><p>　　表3.3.5 評論回復表</p><p>　　聊天記錄表中字段分別是ID、收件人、發(fā)件人、聊天內容和時間。字段名、類型、長度、約束和備注如表3.3.6所示。</p><p>　　表3.3.6 聊天記錄表</p><p>　　第四章 系統詳細設計</p><p>　　4.1 系統的主要架構及開發(fā)模式<

69、;/p><p>　　平臺的搭建依賴于其使用的架構，而旅游交友平臺這種基于Web的系統，傳統的C/S架構已經不能滿足大量用戶的訪問和操作，B/S架構則是應用于Web開發(fā)，它將大量的數據處理工作交給服務器端來處理，用戶無需關系項目的部署，只需要一個瀏覽器就可使用Web服務。而這種Web架構，使用MVC設計模式規(guī)范項目開發(fā)，簡單直觀。</p><p>　　4.1.1 基于B/S的體系結構</

70、p><p>　　B/S體系結構中分為三層體系。分別為瀏覽器，Web服務器，數據庫。用戶通瀏覽器，可以訪問分布在不同地方的Web服務器，請求服務器為其服務，服務器查詢數據庫獲得返回數據，并返回給用戶瀏覽器。這種三層體系結構如圖4.1.1-1所示。 </p><p>　　圖4.1.1 B/S三層架構示意圖</p><p>　　這種架構體系優(yōu)勢在于，減輕了客戶端的壓力，并且不

71、需要客戶自己下載安裝客戶端，客戶端只是一個普通的瀏覽器，全部工作重心在Web服務器上面。</p><p>　　4.1.2 基于MVC的應用開發(fā)模型</p><p>　　傳統的開發(fā)模型將頁面、數據、控制都放到一起來處理，增加了開發(fā)人員的工作。MVC的提出，是對開發(fā)人員的解放。該模式將業(yè)務、邏輯和顯示分開處理，歸為不同的模塊開發(fā)，消除了各個模塊的混亂，更具有條理性。邏輯示意圖如圖4.1.2和

72、圖4.1.3所示:</p><p>　　圖4.1.2 應用服務器之上采用MVC開發(fā)的邏輯示意圖</p><p>　　圖4.1.3 MVC業(yè)務流程示意圖</p><p>　　4.2 系統前端網頁設計</p><p>　　4.2.1 頁目錄結構及功能說明</p><p>　　webapp目錄下為本系統的頁面文件和圖片樣

73、式文件等。</p><p>　　表4.2.1 系統頁面目錄和圖片樣式表</p><p><b>　　主要頁面說明：</b></p><p>　　表4.2.2 主要頁面表</p><p>　　4.2.2 前端AngularJS框架搭建和使用</p><p>　　本系統采用AngularJS前端該框

74、架，通過index.jsp加載該框架。</p><p><b>　　框架搭建:</b></p><p>　　在index.jsp中加載js文件 <script src="/YYW_V1/static/lib/angular.js"></script><script src="/YYW_V1/static/

75、lib/angular-animate.js"></script><script src="/YYW_V1/static/lib/angular-ui-router.min.js"></script><script src="/YYW_V1/static/lib/angular-resource.min.js"></scri

76、pt></p><p>　　使用ng-app使得angular識別該框架<html ng-app="yyw"></p><p>　　新建js文件，分別為angular的控制器，服務，過濾器，指令以及加載文件如表4.2.3 angular加載配置文件表所示:</p><p>　　表4.2.3 angular加載配置文件表<

77、/p><p>　　app.js中設置系統入口</p><p>　　var yyw = angular.module('yyw',[]);</p><p>　　app.js中設置路由控制</p><p>　　oller:loginReg</p><p><b>　　})</b></

78、p><p>　　.state('home',{</p><p>　　url:"/home",</p><p>　　templateUrl:"/YYW_V1/yyw_page/home.html",</p><p><b>　　})</b></p><

79、p>　　.state('home.mypage',{</p><p>　　url:"/mypage",</p><p>　　templateUrl:"/YYW_V1/yyw_page/main/mypage.html"</p><p><b>　　})</b></p>

80、<p>　　.state('home.mypage.friendsstate',{</p><p>　　url:"/states",</p><p><b>　　views:{</b></p><p>　　'headview':{</p><p>　　temp

81、lateUrl:"/YYW_V1/yyw_page/main/head.html"</p><p><b>　　},</b></p><p>　　'friendstatesview':{</p><p>　　templateUrl:"/YYW_V1/yyw_page/main/state.html&

82、quot;,</p><p>　　controller:'initFriendStatesController'</p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　})</b></p>&l

83、t;p>　　.state('setting',{</p><p>　　url:"/mysetting",</p><p>　　templateUrl:"/YYW_V1/yyw_page/settings/myinfo_setting.html"</p><p><b>　　})</b>

84、;</p><p>　　.state('user',{</p><p>　　url:"/user",</p><p>　　templateUrl:"/YYW_V1/yyw_page/main/user.html",</p><p><b>　　})</b></

85、p><p>　　.state('user.detail',{</p><p>　　url:"/:userName",</p><p><b>　　views:{</b></p><p>　　'headview':{</p><p>　　templat

86、eUrl:"/YYW_V1/yyw_page/main/head.html",</p><p><b>　　},</b></p><p>　　'statesview':{</p><p>　　templateUrl:"/YYW_V1/yyw_page/main/state.html",&l

87、t;/p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　})</b></p><p>　　$urlRouterProvider.otherwise("/login");</p><p>

88、;<b>　　}]);</b></p><p>　　4.3 后臺模塊設計</p><p>　　4.3.1 登陸注冊模塊</p><p>　　4.3.1.1 新用戶注冊</p><p>　　登錄“游悠網”，即進入注冊頁面。注冊時用戶需要填寫用戶名、密碼和郵箱，注冊用戶名必須唯一，不能有重復，經過嚴格校驗之后，判斷是否

89、注冊成功。注冊成功之后，是我們網站的一個歡迎新用戶的頁面，這里有我們網站對客戶衷心的祝福以及我們的服務理念，注冊的用戶名和密碼將寫入數據庫，存入用戶密碼表，注冊郵箱存入用戶詳細信息表。用戶詳細信息的補充需要登錄后在用戶設置頁面里完成，沒有把詳細信息放在注冊時填寫，也是為了保證界面的簡潔和美觀。為了方便以后用戶頭像、動態(tài)插入圖片以及聊天記錄等的存儲，在注冊成功后會在服務器為每個用戶創(chuàng)建一個文件夾，以用戶名來命名,然后前端通知環(huán)信IM，注冊

90、環(huán)信WebIM賬戶。注冊頁面如圖4.1.1-1所示。</p><p>　　圖4.3.1 注冊頁面</p><p>　　使用到的類如表4.3.1 注冊新用戶模塊實現類所示：</p><p>　　表4.3.1 注冊新用戶模塊實現類</p><p><b>　　關鍵代碼實現:</b></p><p>　

91、　$scope.register = function(){</p><p>　　var userName = $scope.regusername;</p><p>　　var password=$scope.regpassword;</p><p>　　var email = $scope.regemail;</p><p>　　cons

92、ole.log('username:'+userName + ' password' + password + ' email' + email);</p><p>　　registerService.register({userName:userName,password:password,email:email},function(data){</p

93、><p>　　alert(data.key);</p><p>　　/*在環(huán)信服務器注冊用戶*/</p><p>　　var options = {</p><p>　　username : userName,</p><p>　　password : password,</p><p>　　app

94、Key : '612123456#yywchat',</p><p>　　success : function(result) {</p><p><b>　　//注冊成功;</b></p><p>　　console.log('環(huán)信注冊成功');</p><p><b>　　}

95、,</b></p><p>　　error : function(e) {</p><p><b>　　//注冊失敗;</b></p><p>　　console.log('環(huán)信注冊失敗');</p><p><b>　　}</b></p><

96、p><b>　　};</b></p><p>　　Easemob.im.Helper.registerUser(options);</p><p><b>　　});</b></p><p><b>　　}</b></p><p>　　4.3.1.2 用戶登陸</

97、p><p>　　通過一系列規(guī)則校驗登陸用戶名密碼，登陸成功，則初始化環(huán)信WebIM連接，并獲取該用戶的好友，設置環(huán)信監(jiān)聽，獲取訂閱信息以及好友聊天信息，并添加到$rootScope中。然后路由跳轉到主頁面中，登陸頁面如圖4.3.2所示:</p><p>　　圖4.3.2 登陸頁面</p><p>　　使用到的類如表4.3.2 登陸模塊實現類所示:</p>

98、<p>　　表4.3.2 登陸模塊實現類</p><p><b>　　關鍵代碼實現:</b></p><p>　　@RequestMapping("/findUserByUserName")</p><p>　　@ResponseBody</p><p>　　public User find

99、UserByUserName(String userName){</p><p>　　User u = userService.findUserByUserName(userName);</p><p><b>　　return u;</b></p><p><b>　　}</b></p><p>

100、　　public User validateUser(User u) {</p><p>　　String login = u.getUserName();</p><p>　　if( login == null){</p><p>　　login = u.getEmail();</p><p><b>　　}</b>&

101、lt;/p><p>　　User u1 = userDao.findUserByLogin(login);</p><p>　　if(u1 == null){ //用戶不存在</p><p>　　return null;</p><p><b>　　}</b></p><p>　　if(u1.get

102、Password().equals(u.getPassword())){</p><p>　　return u1;</p><p><b>　　}</b></p><p>　　return null;</p><p><b>　　}</b></p><p>　　4.3.2

103、動態(tài)模塊</p><p>　　4.3.2.1 概述 </p><p>　　該功能模塊可以完成用戶狀態(tài)的發(fā)表,查詢好友動態(tài),刪除動態(tài)和對好友狀態(tài)的評論,轉發(fā)，刪除轉發(fā),點贊，取消贊。</p><p>　　4.3.2.2 發(fā)表動態(tài)</p><p>　　前端在加載主頁面的時候初始化Jquey uploadify上傳組件。在動態(tài)發(fā)表輸入框輸入動態(tài)

104、文字內容，點擊添加圖片，啟動Jquery uploadify組件，將選中的圖片上傳到后臺文件服務器中，上傳成功后將圖片路徑返回到前端，并為前端作用域中該動態(tài)賦值，點擊發(fā)表按鈕，將該動態(tài)發(fā)送到后臺，插入數據庫中，添加成功，返回被持久化的該動態(tài)對象并添加到$rootScope作用域中好友動態(tài)隊列中，顯示在頁面中。如圖所示，為發(fā)表動態(tài)的界面</p><p>　　圖4.3.3 發(fā)表動態(tài)頁面</p><

105、p>　　發(fā)表成功，動態(tài)顯示到動態(tài)欄中，如圖所示:</p><p>　　圖4.3.4發(fā)表動態(tài)成功頁面 </p><p>　　使用到的類如表4.3.3 發(fā)表動態(tài)實現類所示:</p><p>　　表4.3.3 發(fā)表動態(tài)實現類</p><p>　　4.3.2.3 評論動態(tài)</p><p>　　在該動態(tài)的div中點擊添加

106、評論，使用ng-if顯示該動態(tài)評論輸入框以及該動態(tài)的所有評論和回復。在評論輸入框中輸入評論文本信息，點擊評論，發(fā)送后臺，后臺接收該評論并插入數據庫中，以json的方式返回前端，前端接收該評論并顯示在回復列表中。界面如圖所示:</p><p>　　圖4.3.5 評論頁面</p><p>　　表4.3.6 評論動態(tài)實現類</p><p><b>　　關鍵代碼實

107、現:</b></p><p>　　@Repository</p><p>　　public interface IReplayDao extends BaseDao<Replay>{</p><p>　　@Query("from Replay where stateId=?1")</p><p>　

108、　List<Replay> findReplays(String stateId);</p><p><b>　　}</b></p><p>　　4.3.2.4 添加回復</p><p>　　在回復列表中，點擊回復按鈕，彈出回復輸入框，輸入回復內容，點擊回復并發(fā)送到后臺，后臺接收該評論并插入數據庫中，以json的方式返回前端，前端

109、接收該評論并顯示在回復列表中。</p><p>　　圖4.3.6回復頁面</p><p>　　回復和評論實現是一樣的，只是針對的回復對象不一樣而已。</p><p>　　4.3.2.5 轉發(fā)動態(tài)</p><p>　　在動態(tài)列表中，點擊轉發(fā)按鈕，并發(fā)送到后臺，后臺接收該評論并插入數據庫中，以json的方式返回前端，前端接收該評論并顯示在動態(tài)列

110、表中。轉發(fā)如圖4.3.7所示:</p><p>　　圖4.3.7 轉發(fā)功能圖</p><p>　　4.3.3 即時聊天模塊</p><p>　　4.3.3.1 概述</p><p>　　該模塊使用環(huán)信即時通訊云技術，實現即時通訊技術。該插件是一款優(yōu)秀的即時通訊插件，可以快速集成到自己APP或者WebIM上，可以實現單聊，多聊，表情發(fā)送，文

111、件發(fā)送，涂鴉以及截圖功能。</p><p>　　4.3.3.2 環(huán)信插件搭建</p><p>　　1.index.jsp中導入環(huán)信js插件</p><p>　　<!--加載環(huán)信webIM --></p><p>　　<script type='text/javascript' src='/YYW_

112、V1/static/lib/webim/strophe-custom-2.0.0.js'></script></p><p>　　<script type='text/javascript' src='/YYW_V1/static/lib/webim/json2.js'></script></p><p>　

113、　<script type="text/javascript" src="/YYW_V1/static/lib/webim/easemob.im-1.0.5.js"></script></p><p>　　2.controller.js中建立webim鏈接</p><p>　　$rootScope.conn = new Eas

114、emob.im.Connection(); //建立環(huán)信連接</p><p><b>　　3.初始化環(huán)信連接</b></p><p>　　$rootScope.conn.init({</p><p>　　onOpened : function() {}//建立連接后</p><p>　　onPresence : func

115、tion (message){}//接收訂閱信息</p><p>　　onTextMessage : function(message){}//接收聊天文本信息</p><p><b>　　});</b></p><p>　　4.3.3.2 獲取添加好友請求</p><p>　　登陸系統之后，初始環(huán)信插件，設置訂票監(jiān)聽

116、，在好友請求方法中，獲取請求并在頁面中顯示。</p><p>　　4.3.3.3 添加好友請求</p><p>　　為環(huán)信發(fā)送添加好友請求,之后刷新驗證消息列表，如圖4.3.8所示:</p><p>　　圖4.3.8 好友請求驗證圖</p><p><b>　　關鍵代碼實現:</b></p><p&

117、gt;　　handlePresence = function (e){</p><p>　　$scope.friendsreqs.push(e);//將請求添加到好友請求驗證列表中</p><p><b>　　return;</b></p><p><b>　　}</b></p><p>　　<

118、;div>驗證消息:<ul><li ng-repeat="req in friendsreqs"></p><p>　　<div style="background-color:red;margin-top:5px;"></p><p>　　from:{{req.from}}</p><

119、p>　　to:{{req.to}}</p><p>　　status:{{req.status}}</p><p>　　<span><a href="javascript:void(0)" ng-click="agreeAddFriend(req.from)">同意</a></span></

120、p><p><b>　　…</b></p><p>　　</div></li></ul></p><p>　　4.3.3.4 同意好友請求</p><p>　　為環(huán)信發(fā)送同意好友請求，并且將該用戶添加到好友列表中，并且在后臺記錄該好友關系。</p><p><

121、;b>　　關鍵代碼實現:</b></p><p>　　$scope.agreeAddFriend =function(to){</p><p>　　console.log('同意添加好友');</p><p>　　$rootScope.conn.subscribed({</p><p><b>　　

122、to : to,</b></p><p>　　message : "[resp:true]"//同意后發(fā)送反加對方為好友的消息，反加消息標識[resp:true]</p><p><b>　　});</b></p><p>　　var user={name:to};</p><p>　　$

123、rootScope.friendsLists.push(user);</p><p><b>　　}</b></p><p>　　4.3.3.5 發(fā)送聊天信息</p><p>　　設置聊天監(jiān)聽，為環(huán)信發(fā)送聊天推送信息，并將聊天信息記錄到后臺數據庫中，監(jiān)聽到環(huán)信推送聊天信息并且將該聊天信息顯示到聊天信息列表中。如圖4.3.9 聊天信息圖所示:&