java实验报告范文 [Javaweb课程设计实验报告]

 1、项目概述

 1.1项目背景

 JavaEE方面:jsp+servlet,会简单的Struts,Spring;?

 前端方面:html,css,会使用Bootstrap前端工具开发集;

 数据库:熟悉jdbc与数据库的连接,会基本的增删改查SQL语句,简单使用过Hibernate。

 1.2项目功能

 注册、登录功能

 查看所有好友、群组

 查找好友、添加好友(可以附带验证消息)

 一对一聊天

 创建群组、查看群组成员、邀请好友进群

 群聊

 1.3项目开发工具及所需的框架

 开发工具:Intellij IDEA,前端写html,css基本样式使用Dreamweaver(修改反馈速度较快),写js并且与后端调试是使用Intellij IDEA。

 依赖管理:Maven?

 数据库:MySQL?

 后端框架:Spring MVC + Hibernate

 通信协议:WebScoket?

 第三方jar包:Java-WebScoekt

 前后端数据交互格式:json

 前端框架和工具:Bootstrap 这是一个非常流行的前端工具开发集,可以借助这套工具进行快速得前端开发;

 Layer.js 一个基于Jquery的弹出层解决方案,可以说我这个项目的前端基本就是依靠这个插件建立起来的(注意区分LayerUI和Layer.js,前者是类似于Bootstrap的前端开发工具集,后者只是一个插件,而且后者是开源的,本项目中只是用了后者)。

 原生javascript语法。

 2、系统需求分析

  2.1系统任务描述

 实现Web的点对点即时的文本消息聊天功能;

 实现Web的表情的发送、接收和显示功能;

 实现Web的图片的发送、接收和显示功能;

 实现本地消息的存储,在离线的时候也能加载和查看历史消息;

 要求使用WebSocket。

  2.2系统功能分析

  聊天系统程序通常需要完成以下一些基本功能:

 1)登录聊天系统;

 2)启动服务器

 3)关闭服务器

 4)用户之间的聊天

 5)退出聊天室

  2.3系统可行性分析

 技术可行性:使用Swing和socket技术,可以很轻松地开发出实用、简便、高效的基于网络的即时通讯系统。因此技术上是可以实现的;

 经济可行性:计算机网络已经普及,因此在网络设备上不需要进行大的投入。本系统需要一个MySQL数据库服务器,由于并发使用人数比较少,tomcat可以作为web服务器,所以成本很低。

  操作可行性:只要一台以上计算机连接在同一个局域网内,本系统就可以安装使用,所以操作上完全不存在问题。如果要实现internet上通讯,只需要将服务器端运行在一个有固定IP的公网上就可以。

 综上所述,即时Java即时通讯系统是可行的。

 3、系统设计

 系统设计是本系统开发的重要阶段,它直接影响目标系统的质量,是整个开发工作的核心。系统设计阶段主要任务是:在系统分析提出的逻辑模型的基础上,科学合理地进行物理模型设计。

  3.1数据库设计

  本系统主要涉及的主要实体及其属性和关系表有:

 用户表User_main(用户ID,用户名,用户昵称,用户是否在线),如下表:

 用户详细信息表user_detail(用户ID,用户名,用户昵称,用户密码,用户的邮箱地址,用户的手机号,用户注册的时间),如下表:

 

  聊天记录表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)

 通信服务器端(WebSocket Server)

  Web端:?

 前端UI

 逻辑处理(js)

 通信客户端(WebSocket Client)

 4、详细设计及界面设计

  4.1注册、登录

  首先进去的是欢迎界面,欢迎界面有登录和注册两种选项

 点击登录,即进入登录界面,登录时将对用户名进行检测,如果用户名为空、数据库内不存在当前的登录的用户名、用户名正确但是密码错误等情况时将会弹出错误提醒窗口

 用户名以及密码检测核心代码如下:

  function checkLogin(){

  var user = {};

  user.userName = document.getElementById("userName").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;

  }

  else if(user.userPassword == ''){

  layer.msg('密码不能为空',{icon:2});

  return;

  }

  var loginResult = null;

  $.ajax({

  async : false, //设置同步

  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('是不是用户名记错了?',{icon:2});

 }

 else if(loginResult == 'wrong'){

  layer.msg('密码不对哦,再想想~',{icon:2});

 }

 else if(loginResult == 'fail'){

  layer.msg('服务器异常',{icon:2});

 }

 对服务器的登录请求控制的核心代码如下;

 @ResponseBody

 public Map<String, Object> doLogin(String userName, String userPassword, HttpSession httpSession) {

  String result = "fail";

  User user = this.userService.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<String, Object> results = new HashMap();

  results.put("result", result);

  if (result.equals("success")) {

  results.put("user", JSON.toJSON(user));

  }

  return results;

 接下来是注册界面,注册包括用户名、昵称和密码的注册,如果用户名已被注册时将会弹出提醒对话框

  <script type="text/javascript">

  function checkRegister(){

  var user = {};

  user.userName = document.getElementById("userName").value;

  user.userNickName = document.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个字符',{icon:2});

  return;

  }

  if(user.userNickName == ''){

  layer.msg('昵称不能为空',{icon:2});

  return;

  }

  else if(user.userNickName.length >= 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,

  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 == 'fail'){

  layer.msg('服务器异常',{icon:2});

 }

  对服务器的注册请求控制核心代码如下:

  public Map<String, Object> doRegister(String userName, String userNickName, String userPassword) {

  String result = "fail";

  if (this.userService.getUser(userName) == null) {

  UserDetail userDetail = new UserDetail();

  userDetail.setUserDetailName(userName);

  userDetail.setUserDetailNickName(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.userDetailService.addUserDetail(userDetail);

  userDetail = this.userDetailService.getUserDetail(userName);

  User user = new User(userDetail);

  this.userService.addUser(user);

  result = "success";

  } else {

  result = "exist";

  }

  Map<String, Object> results = new HashMap();

  results.put("result", result);

  return results;

 注册之后直接跳到登录界面,这时就可以登录了,登录进入主界面主界面有聊天窗口,有好友列表,群组列表

 4.2添加好友

  先注册登录两个账号,如下图

  然后在添加好友

 添加之后就建立好友关系,如图,双方在线可以实现即时聊天

 4.3一对一聊天

  接下来就可以实现一对一的聊天了

 

  4.4创建群以及群聊

  创建群包括群名称,群描述,点击建立群组之后群就建好了

  会弹出对话框,建立群组成功,并生成一个随机的群id

  然后就可以邀请好友进群了

  好友会收到系统消息,如图;

 进群之后,可以查看群人员

  接着就可以进行群聊了,如下图;

 5、心得体会

 接触这个题目时,就意识到这个题目难度还是比较大的,所以刚开始并没有急于着手敲代码。开始做这个项目时就把项目构思了一下,比如把项目分为哪几个模块,弄清楚各个模块的依赖关系,然后弄清楚从哪里入手,从哪里开始做,一步一步来完成。首先这个项目的后端框架是SpringMVC+Hibernate,然后一步一步查资料寻找和学习通信和前端相关的知识和解决方案。首先遇到的就是服务端无法随Tomcat服务器启动而开启,这个问题通过自定义一个Servlet,在web.xml配置之后,继承HttpServlet,在init()方法中开启ServerSocket?,成功配置Servlet,使ServerSocket可以随Tomcat启动而开启。还有一个比较棘手的问题,要数通信模块实现这一块,socket无法连接,这个问题没有解决这个程序基本上判了死刑,无法连接但是又不报错,所以很难找出问题。最后还是找同学帮忙找出来的问题,改了很多地方,但是还是有一些没有搞清楚的地方。主要牵涉到运行环境、软件版本不同以及所需的依赖包的不同以及各种jar包的加载等等方面的问题。前端的设计还好,网上可以找到很多漂亮的前端模板可以省去很多时间去搞界面的设计以及css样式的设计。

 总的来说,这次课程设计还是有一点收获的。即时一开始做这个题目时知道的东西很少,但是只要花时间踏实地去学习去研究,肯问别人,最后还是能在一定程度上做出来,也许并不是那么的尽善尽美,最后的成果和学到的东西让我感觉这些都是值得的。

推荐访问:课程设计 实验 报告 Javaweb