Javaweb课程设计实验报告(共19页)_第1页
Javaweb课程设计实验报告(共19页)_第2页
Javaweb课程设计实验报告(共19页)_第3页
Javaweb课程设计实验报告(共19页)_第4页
Javaweb课程设计实验报告(共19页)_第5页
已阅读5页,还剩13页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、湖南科技大学计算机科学与工程学院WEB编程课程设计报告题目:仿QQweb即时聊天系统学 号: 姓 名: 指导老师: 完成时间: 目录1.项目概述11.1项目背景11.2项目功能11.3项目开发工具及所需的框架12.系统需求分析22.1系统任务描述22.2系统功能分析22.3系统可行性分析23.系统设计23.1数据库设计33.2系统功能模块43.3系统处理流程53.4系统模块划分54.详细设计级界面设计54.1注册登录54.2添加好友104.3一对一聊天124.4创建群以及群聊135心得体会151、项目概述1.1项目背景JavaEE方面:jsp+servlet,会简单的Struts,Spring

2、;前端方面:html,css,会使用Bootstrap前端工具开发集;数据库:熟悉jdbc与数据库的连接,会基本的增删改查SQL语句,简单使用过Hibernate。1.2项目功能注册、登录功能查看所有好友、群组查找好友、添加好友(可以附带验证消息)一对一聊天创建群组、查看群组成员、邀请好友进群群聊1.3项目开发工具及所需的框架开发工具:Intellij IDEA,前端写html,css基本样式使用Dreamweaver(修改反馈速度较快),写js并且与后端调试是使用Intellij IDEA。依赖管理:Maven数据库:MySQL后端框架:Spring MVC + Hibernate通信协议:

3、WebScoket第三方jar包:Java-WebScoekt前后端数据交互格式:json前端框架和工具:Bootstrap 这是一个非常流行的前端工具开发集,可以借助这套工具进行快速得前端开发;Layer.js 一个基于Jquery的弹出层解决方案,可以说我这个项目的前端基本就是依靠这个插件建立起来的(注意区分LayerUI和Layer.js,前者是类似于Bootstrap的前端开发工具集,后者只是一个插件,而且后者是开源的,本项目中只是用了后者)。原生javascript语法。2、系统需求分析2.1系统任务描述实现Web的点对点即时的文本消息聊天功能;实现Web的表情的发送、接收和显示功能

4、;实现Web的图片的发送、接收和显示功能;实现本地消息的存储,在离线的时候也能加载和查看历史消息;要求使用WebSocket。2.2系统功能分析聊天系统程序通常需要完成以下一些基本功能:1)登录聊天系统;2)启动服务器3)关闭服务器4)用户之间的聊天5)退出聊天室2.3系统可行性分析技术可行性:使用Swing和socket技术,可以很轻松地开发出实用、简便、高效的基于网络的即时通讯系统。因此技术上是可以实现的;经济可行性:计算机网络已经普及,因此在网络设备上不需要进行大的投入。本系统需要一个MySQL数据库服务器,由于并发使用人数比较少,tomcat可以作为web服务器,所以成本很低。操作可行

5、性:只要一台以上计算机连接在同一个局域网内,本系统就可以安装使用,所以操作上完全不存在问题。如果要实现internet上通讯,只需要将服务器端运行在一个有固定IP的公网上就可以。综上所述,即时Java即时通讯系统是可行的。3、系统设计系统设计是本系统开发的重要阶段,它直接影响目标系统的质量,是整个开发工作的核心。系统设计阶段主要任务是:在系统分析提出的逻辑模型的基础上,科学合理地进行物理模型设计。3.1数据库设计本系统主要涉及的主要实体及其属性和关系表有:用户表User_main(用户ID,用户名,用户昵称,用户是否在线),如下表:用户详细信息表user_detail(用户ID,用户名,用户昵

6、称,用户密码,用户的邮箱地址,用户的手机号,用户注册的时间),如下表:聊天记录表message(接收方ID,发送方ID,内容,发送时间),如下表:群组表group_main(群ID,群名,群主ID,群创建时间,群介绍,群人数,群成员),如下表;用户、群关系表user_group_relation(用户ID,群ID,群等级,群用户昵称,用户加群时间),如下表;用户好友关系表user_relation(用户A的ID,用户B的ID,加好友的时间),如下表;3.2系统功能模块3.3系统的处理流程3.4系统模块划分服务器:数据库访问(dao)业务逻辑处理(Service)请求控制(Controller)

7、通信服务器端(WebSocket Server)Web端:前端UI逻辑处理(js)通信客户端(WebSocket Client)4、详细设计及界面设计4.1注册、登录首先进去的是欢迎界面,欢迎界面有登录和注册两种选项点击登录,即进入登录界面,登录时将对用户名进行检测,如果用户名为空、数据库内不存在当前的登录的用户名、用户名正确但是密码错误等情况时将会弹出错误提醒窗口用户名以及密码检测核心代码如下:function checkLogin() var user = ; user.userName = document.getElementById(userName).value; user.use

8、rPassword = document.getElementById(userPassword).value; if(user.userName = ) layer.msg(用户名不能为空,icon:2); return; else if(user.userName.length = 12) layer.msg(用户名长度不能超过12个字符,icon:2); return; else if(user.userPassword = ) layer.msg(密码不能为空,icon:2); return; var loginResult = null; $.ajax( async : false,

9、 /设置同步 type : POST, url : $cp/doLogin, data : user, dataType : json, success : function(result) loginResult = result.result; , error : function(result) layer.alert(查询用户错误););if(loginResult = success) layer.msg(登录成功,icon:1); window.location.href=$cp/main;else if(loginResult = unexist) layer.msg(是不是用户

10、名记错了?,icon:2);else if(loginResult = wrong) layer.msg(密码不对哦,再想想,icon:2);else if(loginResult = fail) layer.msg(服务器异常,icon:2);对服务器的登录请求控制的核心代码如下;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;接下来是注册界面,注册包括用户名、昵称和密码的注册,如果用户名已被注册时将会弹出提醒对话框 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(用户名不能为空,icon:2); return; else if(user.userName.length = 12) layer.msg(用户名长度不能超过12个字符,icon:2); return; if(user.userNickName = ) layer.msg(昵称不能为空,icon:2); return; else if(user.userNickName.le

14、ngth = 15) layer.msg(用户名长度不能超过15个字符,icon:2); return; else if(user.userPassword = ) layer.msg(密码不能为空,icon:2); return; else if(user.userPassword.length= 20) layer.msg(密码长度不能超过20个字符,icon:2); return; var registerResult = null; $.ajax( async : false, /设置同步 type : POST, url : $cp/doRegister, data : user,

15、dataType : json, success : function(result) registerResult = result.result; , error : function(result) layer.alert(查询用户错误););if(registerResult = success) layer.msg(注册成功,icon:1); window.location.href=$cp/login;else if(registerResult = exist) layer.msg(这个用户名已经被占用啦!,icon:2);else if(registerResult = fai

16、l) layer.msg(服务器异常,icon:2);对服务器的注册请求控制核心代码如下: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;注册之后直接跳到登录界面,这时就可以登录了,登录进入主界面主界面有聊天窗口,有好友列表,群组列表4.2添加好友先注册登录两个账号,如下图然后在添加好友添加之后就建立好友关系,如图,双方在线可以实现即时聊天4.3一对一聊天接下来就可以实现一对一的聊天了4.4创建群以及群聊创建群包括群名称,群描述,点击建立群组之后群就建好了会弹出对话框,建立群组成功,并生成一个随机的群id然后就可以邀请好友进群了好友会收到系统消息,如图;进群之后,可以查看群人员接着就可以进行群聊了,如下图;5、心得体会接触这个题目时,就意识到这

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论