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

1、精選優(yōu)質(zhì)文檔-傾情為你奉上湖南科技大學(xué)計(jì)算機(jī)科學(xué)與工程學(xué)院WEB編程課程設(shè)計(jì)報(bào)告題目：仿QQweb即時(shí)聊天系統(tǒng)學(xué) 號： 姓 名： 指導(dǎo)老師： 完成時(shí)間： 專心-專注-專業(yè)目錄1.項(xiàng)目概述11.1項(xiàng)目背景11.2項(xiàng)目功能11.3項(xiàng)目開發(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ù)庫設(shè)計(jì)33.2系統(tǒng)功能模塊43.3系統(tǒng)處理流程53.4系統(tǒng)模塊劃分54.詳細(xì)設(shè)計(jì)級界面設(shè)計(jì)54.1注冊登錄54.2添加好友104.3一對一聊天124.4創(chuàng)建群以及群聊135心得體會(huì)151、項(xiàng)目概述1.1項(xiàng)目背景JavaEE方面：jsp+serv

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

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

4、能；實(shí)現(xiàn)Web的表情的發(fā)送、接收和顯示功能；實(shí)現(xiàn)Web的圖片的發(fā)送、接收和顯示功能；實(shí)現(xiàn)本地消息的存儲(chǔ)，在離線的時(shí)候也能加載和查看歷史消息；要求使用WebSocket。2.2系統(tǒng)功能分析聊天系統(tǒng)程序通常需要完成以下一些基本功能：1)登錄聊天系統(tǒng)；2)啟動(dòng)服務(wù)器3)關(guān)閉服務(wù)器4)用戶之間的聊天5)退出聊天室2.3系統(tǒng)可行性分析技術(shù)可行性：使用Swing和socket技術(shù)，可以很輕松地開發(fā)出實(shí)用、簡便、高效的基于網(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ù)庫服務(wù)器，由于并發(fā)使用人數(shù)比較少，tomcat可

5、以作為web服務(wù)器，所以成本很低。操作可行性：只要一臺以上計(jì)算機(jī)連接在同一個(gè)局域網(wǎng)內(nèi)，本系統(tǒng)就可以安裝使用，所以操作上完全不存在問題。如果要實(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)開發(fā)的重要階段，它直接影響目標(biāo)系統(tǒng)的質(zhì)量，是整個(gè)開發(fā)工作的核心。系統(tǒng)設(shè)計(jì)階段主要任務(wù)是：在系統(tǒng)分析提出的邏輯模型的基礎(chǔ)上，科學(xué)合理地進(jìn)行物理模型設(shè)計(jì)。3.1數(shù)據(jù)庫設(shè)計(jì)本系統(tǒng)主要涉及的主要實(shí)體及其屬性和關(guān)系表有：用戶表User_main（用戶ID，用戶名，用戶昵稱，用戶是否在線），如下表：用戶詳細(xì)信息表use

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

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

8、Name).value; user.userPassword = document.getElementById(userPassword).value; if(user.userName = ) layer.msg(用戶名不能為空,icon:2); return; else if(user.userName.length = 12) layer.msg(用戶名長度不能超過12個(gè)字符,icon:2); return; else if(user.userPassword = ) layer.msg(密碼不能為空,icon:2); return; var loginResult = null; $

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

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

11、Service.getUser(userName); 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 res

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

13、getElementById(userNickName).value; user.userPassword = document.getElementById(userPassword).value; if(user.userName = ) layer.msg(用戶名不能為空,icon:2); return; else if(user.userName.length = 12) layer.msg(用戶名長度不能超過12個(gè)字符,icon:2); return; if(user.userNickName = ) layer.msg(昵稱不能為空,icon:2); return; else if

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

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

16、(registerResult = fail) layer.msg(服務(wù)器異常,icon:2);對服務(wù)器的注冊請求控制核心代碼如下: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); us

17、erDetail.setUserDetailNickName(userNickName); userDetail.setUserDetailPassword(userPassword); userDetail.setUserDetailRole(0); Date date = new Date(); Timestamp timestamp = new Timestamp(date.getTime(); userDetail.setUserRegisterTime(timestamp); userDetail.setUserMailNumber(); userDetail.setUserPhon

18、eNumber(); this.userDetailService.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;注冊之后直接跳到登錄界面，這時(shí)就可以登錄了，登錄進(jìn)入主界面主界面有聊天窗口，有好友列表，群組列表4.2添加好友先注冊登錄兩個(gè)賬號，如下圖然后在添加好友添加之后就建立好友關(guān)系，如圖，雙方在線可以實(shí)現(xiàn)即時(shí)聊天4.3一對一聊天接下來就可以實(shí)現(xiàn)一對一的聊天了4.4創(chuàng)建群以及群聊創(chuàng)建群包括群名稱，群描述，點(diǎn)擊建立群組之后群就建好了會(huì)彈出對話框，建立群組成功，并生成一個(gè)隨機(jī)的群id然后就可以邀請好友進(jìn)群了好友會(huì)收到系統(tǒng)消息，如圖；進(jìn)群之后，可以查看群人員接著就可以進(jìn)行群聊了，如下圖；5、心得體會(huì)接觸這個(gè)題目