基于javaee的旅游交友平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)【畢業(yè)論文】

1、<p><b>　　本科畢業(yè)論文</b></p><p><b>　?。?0 屆）</b></p><p>　　畢業(yè)設(shè)計(jì)（論文）任務(wù)書</p><p>　　1 設(shè)計(jì)（論文）題目及專題： 基于JavaEE的旅游交友平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

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

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

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

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

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

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

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

12、;<p>　　畢業(yè)設(shè)計(jì)（論文）答辯記錄</p><p>　　日期： </p><p>　　學(xué)生： 學(xué)號(hào)： 班級(jí)： </p><p>　　題目：

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

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

15、　?。ê灻?lt;/b></p><p><b>　?。ê灻?lt;/b></p><p><b>　?。ê灻?lt;/b></p><p>　　答辯成績(jī)： </p><p>　　總評(píng)成績(jī)： </p><p><b>　　摘

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

17、即時(shí)聊天功能等。</p><p>　　關(guān)鍵詞:旅游;社交;信息共享;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 旅游交友平臺(tái)概述1</p><p>　　1.2 課題研究的背景1</p><p>　　1.3

21、 目的和意義1</p><p>　　1.4 本文主要研究的內(nèi)容2</p><p>　　第二章 相關(guān)工具和技術(shù)介紹3</p><p>　　2.1 JavaEE簡(jiǎn)介3</p><p>　　2.2 JPA框架3</p><p>　　2.2.1 MySQL數(shù)據(jù)庫3</p><p>

22、;　　2.2.2 JDBC技術(shù)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>　　第三章 系統(tǒng)需求分析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 數(shù)據(jù)庫設(shè)計(jì)11</p><p>　　3.3.1 數(shù)據(jù)庫設(shè)計(jì)簡(jiǎn)介11</p><p>　　3.3.2 E-R圖設(shè)計(jì)11</p><p>　　3.3.3 數(shù)據(jù)庫表設(shè)計(jì)14</p><p>　　第四章 系統(tǒng)詳細(xì)設(shè)計(jì)17</p><p&g

25、t;　　4.1 系統(tǒng)的主要架構(gòu)及開發(fā)模式17</p><p>　　4.2 系統(tǒng)前端網(wǎng)頁設(shè)計(jì)18</p><p>　　4.3 后臺(tái)模塊設(shè)計(jì)21</p><p>　　4.3.1 登陸注冊(cè)模塊21</p><p>　　4.3.2 動(dòng)態(tài)模塊24</p><p>　　4.3.3 即時(shí)聊天模塊27</

26、p><p>　　4.3.4 個(gè)人信息設(shè)置模塊30</p><p>　　4.3.5 用戶個(gè)人信息模塊34</p><p>　　第五章 總結(jié)與展望37</p><p><b>　　參考文獻(xiàn)39</b></p><p><b>　　致謝41</b></p>

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

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

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

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

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

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

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

34、　前端AngularJS框架的認(rèn)識(shí)和使用。</p><p>　　系統(tǒng)需求分析和概要設(shè)計(jì)。</p><p>　　該平臺(tái)的主要功能以及各個(gè)功能模塊的設(shè)計(jì)與實(shí)現(xiàn)。</p><p>　　第二章 相關(guān)工具和技術(shù)介紹</p><p>　　2.1 JavaEE簡(jiǎn)介</p><p>　　JavaEE(Java Platform E

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

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

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

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

39、型映射)框架，底層封裝了JDBC操作，不需要在Java中使用SQL語句，對(duì)象和數(shù)據(jù)庫表一一映射，通過操作對(duì)象來實(shí)現(xiàn)數(shù)據(jù)的增刪改查，充分體現(xiàn)了Java的面向?qū)ο蟮乃枷搿ｎ愃频目蚣苓€有TopLink、JDO等。</p><p>　　基于Hibernate的優(yōu)勢(shì)，該平臺(tái)采用該技術(shù)來映射數(shù)據(jù)庫實(shí)體類。</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提供持久化支持標(biāo)準(zhǔn)規(guī)范，它和Hibernate，TopLink，JDO等一系列ORM框架總體一致，但是這些框架的進(jìn)一步封裝，支持這些ORM框架的替換，符合面向?qū)ο蟮亩鄳B(tài)性。</p><p>　　基于JPA框架的可擴(kuò)展性等優(yōu)勢(shì)，采用Hi

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

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

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

44、選擇Spring框架的部分或全部。</p><p>　　2.4 SpringMVC框架</p><p>　　Spring Web MVC是一種基于Java的實(shí)現(xiàn)了Web MVC(Model View Controller，模型-視圖-控制器)設(shè)計(jì)模式的請(qǐng)求驅(qū)動(dòng)類型的輕量級(jí)Web框架，即使用了MVC架構(gòu)模式的思想，將Web層進(jìn)行職責(zé)解耦，基于請(qǐng)求驅(qū)動(dòng)指的就是使用請(qǐng)求-響應(yīng)模型，框架的目的就

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

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

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

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

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

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

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

52、at和Apache架設(shè)，使用MySQL數(shù)據(jù)庫，因?yàn)锳pache運(yùn)行PhpMyadmin軟件可以通過瀏覽器查看數(shù)據(jù)庫，簡(jiǎn)單方便。后臺(tái)使用當(dāng)前主流的JavaWeb框架SpringMVC、Spring、JPA。ORM框架采用JPA并且集成Hibernate框架，因?yàn)镴PA框架具有可擴(kuò)展性，如果將Hibernate換成其他ORM框架，JPA只需要改動(dòng)少量配置即可。與前端交互的MVC框架則采用SpringMVC是因?yàn)榭梢灾苯蛹傻絊pring中，

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

73、式文件等。</p><p>　　表4.2.1 系統(tǒng)頁面目錄和圖片樣式表</p><p><b>　　主要頁面說明：</b></p><p>　　表4.2.2 主要頁面表</p><p>　　4.2.2 前端AngularJS框架搭建和使用</p><p>　　本系統(tǒng)采用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識(shí)別該框架<html ng-app="yyw"></p><p>　　新建js文件，分別為angular的控制器，服務(wù)，過濾器，指令以及加載文件如表4.2.3 angular加載配置文件表所示:</p><p>　　表4.2.3 angular加載配置文件表<

77、/p><p>　　app.js中設(shè)置系統(tǒng)入口</p><p>　　var yyw = angular.module('yyw',[]);</p><p>　　app.js中設(shè)置路由控制</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 后臺(tái)模塊設(shè)計(jì)</p><p>　　4.3.1 登陸注冊(cè)模塊</p><p>　　4.3.1.1 新用戶注冊(cè)</p><p>　　登錄“游悠網(wǎng)”，即進(jìn)入注冊(cè)頁面。注冊(cè)時(shí)用戶需要填寫用戶名、密碼和郵箱，注冊(cè)用戶名必須唯一，不能有重復(fù)，經(jīng)過嚴(yán)格校驗(yàn)之后，判斷是否

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

90、環(huán)信WebIM賬戶。注冊(cè)頁面如圖4.1.1-1所示。</p><p>　　圖4.3.1 注冊(cè)頁面</p><p>　　使用到的類如表4.3.1 注冊(cè)新用戶模塊實(shí)現(xiàn)類所示：</p><p>　　表4.3.1 注冊(cè)新用戶模塊實(shí)現(xiàn)類</p><p><b>　　關(guān)鍵代碼實(shí)現(xiàn):</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)信服務(wù)器注冊(cè)用戶*/</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>　　//注冊(cè)成功;</b></p><p>　　console.log('環(huán)信注冊(cè)成功');</p><p><b>　　}

95、,</b></p><p>　　error : function(e) {</p><p><b>　　//注冊(cè)失敗;</b></p><p>　　console.log('環(huán)信注冊(cè)失敗');</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ī)則校驗(yàn)登陸用戶名密碼，登陸成功，則初始化環(huán)信WebIM連接，并獲取該用戶的好友，設(shè)置環(huán)信監(jiān)聽，獲取訂閱信息以及好友聊天信息，并添加到$rootScope中。然后路由跳轉(zhuǎn)到主頁面中，登陸頁面如圖4.3.2所示:</p><p>　　圖4.3.2 登陸頁面</p><p>　　使用到的類如表4.3.2 登陸模塊實(shí)現(xiàn)類所示:</p>

98、<p>　　表4.3.2 登陸模塊實(shí)現(xiàn)類</p><p><b>　　關(guān)鍵代碼實(shí)現(xiàn):</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、動(dòng)態(tài)模塊</p><p>　　4.3.2.1 概述 </p><p>　　該功能模塊可以完成用戶狀態(tài)的發(fā)表,查詢好友動(dòng)態(tài),刪除動(dòng)態(tài)和對(duì)好友狀態(tài)的評(píng)論,轉(zhuǎn)發(fā)，刪除轉(zhuǎn)發(fā),點(diǎn)贊，取消贊。</p><p>　　4.3.2.2 發(fā)表動(dòng)態(tài)</p><p>　　前端在加載主頁面的時(shí)候初始化Jquey uploadify上傳組件。在動(dòng)態(tài)發(fā)表輸入框輸入動(dòng)態(tài)

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

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

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

107、現(xiàn):</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 添加回復(fù)</p><p>　　在回復(fù)列表中，點(diǎn)擊回復(fù)按鈕，彈出回復(fù)輸入框，輸入回復(fù)內(nèi)容，點(diǎn)擊回復(fù)并發(fā)送到后臺(tái)，后臺(tái)接收該評(píng)論并插入數(shù)據(jù)庫中，以json的方式返回前端，前端

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

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

111、件發(fā)送，涂鴉以及截圖功能。</p><p>　　4.3.3.2 環(huán)信插件搭建</p><p>　　1.index.jsp中導(dǎo)入環(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 獲取添加好友請(qǐng)求</p><p>　　登陸系統(tǒng)之后，初始環(huán)信插件，設(shè)置訂票監(jiān)聽

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

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

118、;div>驗(yàn)證消息:<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 同意好友請(qǐng)求</p><p>　　為環(huán)信發(fā)送同意好友請(qǐng)求，并且將該用戶添加到好友列表中，并且在后臺(tái)記錄該好友關(guān)系。</p><p><

121、;b>　　關(guān)鍵代碼實(shí)現(xiàn):</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ā)送反加對(duì)方為好友的消息，反加消息標(biāo)識(shí)[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>　　設(shè)置聊天監(jiān)聽，為環(huán)信發(fā)送聊天推送信息，并將聊天信息記錄到后臺(tái)數(shù)據(jù)庫中，監(jiān)聽到環(huán)信推送聊天信息并且將該聊天信息顯示到聊天信息列表中。如圖4.3.9 聊天信息圖所示:&