Javaweb課程設(shè)計(jì)實(shí)驗(yàn)報(bào)告

1、湖南科技大學(xué)計(jì)算機(jī)科學(xué)與工程學(xué)院WEB編程課程設(shè)計(jì)報(bào)告題目：仿QQweb即時(shí)聊天系統(tǒng)學(xué) 號(hào)： 姓 名： 指導(dǎo)老師： 完成時(shí)間： 目錄1.項(xiàng)目概述11.1項(xiàng)目背景11.2項(xiàng)目功能11.3項(xiàng)目開(kāi)發(fā)工具及所需的框架12.系統(tǒng)需求分析22.1系統(tǒng)任務(wù)描述22.2系統(tǒng)功能分析22.3系統(tǒng)可行性分析23.系統(tǒng)設(shè)計(jì)23.1數(shù)據(jù)庫(kù)設(shè)計(jì)33.2系統(tǒng)功能模塊43.3系統(tǒng)處理流程53.4系統(tǒng)模塊劃分54.詳細(xì)設(shè)計(jì)級(jí)界面設(shè)計(jì)54.1注冊(cè)登錄54.2添加好友104.3一對(duì)一聊天124.4創(chuàng)建群以及群聊135心得體會(huì)151、項(xiàng)目概述1.1項(xiàng)目背景JavaEE方面：jsp+servlet，會(huì)簡(jiǎn)單的Struts，Spring

2、；前端方面:html，css，會(huì)使用Bootstrap前端工具開(kāi)發(fā)集；數(shù)據(jù)庫(kù):熟悉jdbc與數(shù)據(jù)庫(kù)的連接，會(huì)基本的增刪改查SQL語(yǔ)句，簡(jiǎn)單使用過(guò)Hibernate。1.2項(xiàng)目功能注冊(cè)、登錄功能查看所有好友、群組查找好友、添加好友（可以附帶驗(yàn)證消息）一對(duì)一聊天創(chuàng)建群組、查看群組成員、邀請(qǐng)好友進(jìn)群群聊1.3項(xiàng)目開(kāi)發(fā)工具及所需的框架開(kāi)發(fā)工具:Intellij IDEA，前端寫(xiě)html，css基本樣式使用Dreamweaver（修改反饋速度較快），寫(xiě)js并且與后端調(diào)試是使用Intellij IDEA。依賴(lài)管理：Maven數(shù)據(jù)庫(kù)：MySQL后端框架：Spring MVC + Hibernate通信協(xié)議：

3、WebScoket第三方j(luò)ar包:Java-WebScoekt前后端數(shù)據(jù)交互格式：json前端框架和工具:Bootstrap 這是一個(gè)非常流行的前端工具開(kāi)發(fā)集，可以借助這套工具進(jìn)行快速得前端開(kāi)發(fā)；Layer.js 一個(gè)基于Jquery的彈出層解決方案，可以說(shuō)我這個(gè)項(xiàng)目的前端基本就是依靠這個(gè)插件建立起來(lái)的（注意區(qū)分LayerUI和Layer.js，前者是類(lèi)似于Bootstrap的前端開(kāi)發(fā)工具集，后者只是一個(gè)插件，而且后者是開(kāi)源的，本項(xiàng)目中只是用了后者）。原生javascript語(yǔ)法。2、系統(tǒng)需求分析2.1系統(tǒng)任務(wù)描述實(shí)現(xiàn)Web的點(diǎn)對(duì)點(diǎn)即時(shí)的文本消息聊天功能；實(shí)現(xiàn)Web的表情的發(fā)送、接收和顯示功能

4、；實(shí)現(xiàn)Web的圖片的發(fā)送、接收和顯示功能；實(shí)現(xiàn)本地消息的存儲(chǔ)，在離線(xiàn)的時(shí)候也能加載和查看歷史消息；要求使用WebSocket。2.2系統(tǒng)功能分析聊天系統(tǒng)程序通常需要完成以下一些基本功能：1)登錄聊天系統(tǒng)；2)啟動(dòng)服務(wù)器3)關(guān)閉服務(wù)器4)用戶(hù)之間的聊天5)退出聊天室2.3系統(tǒng)可行性分析技術(shù)可行性：使用Swing和socket技術(shù)，可以很輕松地開(kāi)發(fā)出實(shí)用、簡(jiǎn)便、高效的基于網(wǎng)絡(luò)的即時(shí)通訊系統(tǒng)。因此技術(shù)上是可以實(shí)現(xiàn)的；經(jīng)濟(jì)可行性：計(jì)算機(jī)網(wǎng)絡(luò)已經(jīng)普及，因此在網(wǎng)絡(luò)設(shè)備上不需要進(jìn)行大的投入。本系統(tǒng)需要一個(gè)MySQL數(shù)據(jù)庫(kù)服務(wù)器，由于并發(fā)使用人數(shù)比較少，tomcat可以作為web服務(wù)器，所以成本很低。操作可行

5、性：只要一臺(tái)以上計(jì)算機(jī)連接在同一個(gè)局域網(wǎng)內(nèi)，本系統(tǒng)就可以安裝使用，所以操作上完全不存在問(wèn)題。如果要實(shí)現(xiàn)internet上通訊，只需要將服務(wù)器端運(yùn)行在一個(gè)有固定IP的公網(wǎng)上就可以。綜上所述，即時(shí)Java即時(shí)通訊系統(tǒng)是可行的。3、系統(tǒng)設(shè)計(jì)系統(tǒng)設(shè)計(jì)是本系統(tǒng)開(kāi)發(fā)的重要階段，它直接影響目標(biāo)系統(tǒng)的質(zhì)量，是整個(gè)開(kāi)發(fā)工作的核心。系統(tǒng)設(shè)計(jì)階段主要任務(wù)是：在系統(tǒng)分析提出的邏輯模型的基礎(chǔ)上，科學(xué)合理地進(jìn)行物理模型設(shè)計(jì)。3.1數(shù)據(jù)庫(kù)設(shè)計(jì)本系統(tǒng)主要涉及的主要實(shí)體及其屬性和關(guān)系表有：用戶(hù)表User_main（用戶(hù)ID，用戶(hù)名，用戶(hù)昵稱(chēng)，用戶(hù)是否在線(xiàn)），如下表：用戶(hù)詳細(xì)信息表user_detail(用戶(hù)ID，用戶(hù)名，用戶(hù)昵

6、稱(chēng)，用戶(hù)密碼，用戶(hù)的郵箱地址，用戶(hù)的手機(jī)號(hào)，用戶(hù)注冊(cè)的時(shí)間)，如下表：聊天記錄表message（接收方ID，發(fā)送方ID，內(nèi)容，發(fā)送時(shí)間），如下表：群組表group_main(群ID，群名，群主ID，群創(chuàng)建時(shí)間，群介紹，群人數(shù)，群成員)，如下表；用戶(hù)、群關(guān)系表user_group_relation(用戶(hù)ID，群ID，群等級(jí)，群用戶(hù)昵稱(chēng)，用戶(hù)加群時(shí)間)，如下表；用戶(hù)好友關(guān)系表user_relation(用戶(hù)A的ID，用戶(hù)B的ID，加好友的時(shí)間)，如下表；3.2系統(tǒng)功能模塊3.3系統(tǒng)的處理流程3.4系統(tǒng)模塊劃分服務(wù)器：數(shù)據(jù)庫(kù)訪問(wèn)(dao)業(yè)務(wù)邏輯處理（Service）請(qǐng)求控制（Controller）

7、通信服務(wù)器端（WebSocket Server）Web端：前端UI邏輯處理(js)通信客戶(hù)端（WebSocket Client）4、詳細(xì)設(shè)計(jì)及界面設(shè)計(jì)4.1注冊(cè)、登錄首先進(jìn)去的是歡迎界面，歡迎界面有登錄和注冊(cè)兩種選項(xiàng)點(diǎn)擊登錄，即進(jìn)入登錄界面，登錄時(shí)將對(duì)用戶(hù)名進(jìn)行檢測(cè)，如果用戶(hù)名為空、數(shù)據(jù)庫(kù)內(nèi)不存在當(dāng)前的登錄的用戶(hù)名、用戶(hù)名正確但是密碼錯(cuò)誤等情況時(shí)將會(huì)彈出錯(cuò)誤提醒窗口用戶(hù)名以及密碼檢測(cè)核心代碼如下：function checkLogin() var user = ; user.userName = document.getElementById(userName).value; user.use

8、rPassword = document.getElementById(userPassword).value; if(user.userName = ) layer.msg(用戶(hù)名不能為空,icon:2); return; else if(user.userName.length = 12) layer.msg(用戶(hù)名長(zhǎng)度不能超過(guò)12個(gè)字符,icon:2); return; else if(user.userPassword = ) layer.msg(密碼不能為空,icon:2); return; var loginResult = null; $.ajax( async : false,

9、 /設(shè)置同步 type : POST, url : $cp/doLogin, data : user, dataType : json, success : function(result) loginResult = result.result; , error : function(result) layer.alert(查詢(xún)用戶(hù)錯(cuò)誤););if(loginResult = success) layer.msg(登錄成功,icon:1); window.location.href=$cp/main;else if(loginResult = unexist) layer.msg(是不是用戶(hù)

10、名記錯(cuò)了？,icon:2);else if(loginResult = wrong) layer.msg(密碼不對(duì)哦，再想想,icon:2);else if(loginResult = fail) layer.msg(服務(wù)器異常,icon:2);對(duì)服務(wù)器的登錄請(qǐng)求控制的核心代碼如下；ResponseBodypublic Map doLogin(String userName, String userPassword, HttpSession httpSession) String result = fail; User user = this.userService.getUser(userN

11、ame); UserDetail userDetail = this.userDetailService.getUserDetail(userName); if (user != null) if (Objects.equals(userDetail.getUserDetailPassword(), userPassword) httpSession.setAttribute(currentUser, user); result = success; else result = wrong; else result = unexist; Map results = new HashMap();

12、 results.put(result, result); if (result.equals(success) results.put(user, JSON.toJSON(user); return results;接下來(lái)是注冊(cè)界面，注冊(cè)包括用戶(hù)名、昵稱(chēng)和密碼的注冊(cè)，如果用戶(hù)名已被注冊(cè)時(shí)將會(huì)彈出提醒對(duì)話(huà)框 function checkRegister() var user = ; user.userName = document.getElementById(userName).value; user.userNickName = document.getElementById(userNi

13、ckName).value; user.userPassword = document.getElementById(userPassword).value; if(user.userName = ) layer.msg(用戶(hù)名不能為空,icon:2); return; else if(user.userName.length = 12) layer.msg(用戶(hù)名長(zhǎng)度不能超過(guò)12個(gè)字符,icon:2); return; if(user.userNickName = ) layer.msg(昵稱(chēng)不能為空,icon:2); return; else if(user.userNickName.le

14、ngth = 15) layer.msg(用戶(hù)名長(zhǎng)度不能超過(guò)15個(gè)字符,icon:2); return; else if(user.userPassword = ) layer.msg(密碼不能為空,icon:2); return; else if(user.userPassword.length= 20) layer.msg(密碼長(zhǎng)度不能超過(guò)20個(gè)字符,icon:2); return; var registerResult = null; $.ajax( async : false, /設(shè)置同步 type : POST, url : $cp/doRegister, data : user,

15、dataType : json, success : function(result) registerResult = result.result; , error : function(result) layer.alert(查詢(xún)用戶(hù)錯(cuò)誤););if(registerResult = success) layer.msg(注冊(cè)成功,icon:1); window.location.href=$cp/login;else if(registerResult = exist) layer.msg(這個(gè)用戶(hù)名已經(jīng)被占用啦！,icon:2);else if(registerResult = fai

16、l) layer.msg(服務(wù)器異常,icon:2);對(duì)服務(wù)器的注冊(cè)請(qǐng)求控制核心代碼如下:public Map doRegister(String userName, String userNickName, String userPassword) String result = fail; if (this.userService.getUser(userName) = null) UserDetail userDetail = new UserDetail(); userDetail.setUserDetailName(userName); userDetail.setUserDetai

17、lNickName(userNickName); userDetail.setUserDetailPassword(userPassword); userDetail.setUserDetailRole(0); Date date = new Date(); Timestamp timestamp = new Timestamp(date.getTime(); userDetail.setUserRegisterTime(timestamp); userDetail.setUserMailNumber(); userDetail.setUserPhoneNumber(); this.userD

18、etailService.addUserDetail(userDetail); userDetail = this.userDetailService.getUserDetail(userName); User user = new User(userDetail); this.userService.addUser(user); result = success; else result = exist; Map results = new HashMap(); results.put(result, result); return results;注冊(cè)之后直接跳到登錄界面，這時(shí)就可以登錄了，登錄進(jìn)入主界面主界面有聊天窗口，有好友列表，群組列表4.2添加好友先注冊(cè)登錄兩個(gè)賬號(hào)，如下圖然后在添加好友添加之后就建立好友關(guān)系，如圖，雙方在線(xiàn)可以實(shí)現(xiàn)即時(shí)聊天4.3一對(duì)一聊天接下來(lái)就可以實(shí)現(xiàn)一對(duì)一的聊天了4.4創(chuàng)建群以及群聊創(chuàng)建群包括群名稱(chēng)，群描述，點(diǎn)擊建立群組之后群就建好了會(huì)彈出對(duì)話(huà)框，建立群組成功，并生成一個(gè)隨機(jī)的群id然后就可以邀請(qǐng)好友進(jìn)群了好友會(huì)收到系統(tǒng)消息，如圖；進(jìn)群之后，可以查看群人員接著就可以進(jìn)行群聊了，如下圖；5、心得體會(huì)接觸這個(gè)題目時(shí)，就意識(shí)到這