洛 阳 理 工 学 院
课 程 设 计 报 告
课程名称 Java web程序开发入门 专 业 计算机应用技术 _ 班 级 _ 学 号 _ 姓 名 完成日期 _
目录
第一 总体设计 ....................................................................................................... 4
、设计目的：......................................................................................................... 4 设计题目：............................................................................................................. 4 .设计要求：............................................................................................................ 4
第二设计内容： ..................................................................................................... 5
题目一................................................................................................................... 5
服务器启动...................................................................................................... 5 下载安装JDK ................................................................................................. 6 下载Eclipse安装包 ........................................................................................ 7 题目二..................................................................................................................... 8
分析.................................................................................................................. 8 用户注册设计思想.......................................................................................... 9 用户注册功能实现.......................................................................................... 9 题目三................................................................................................................... 15
聊天室设计思想............................................................................................ 15 聊天室模块划分............................................................................................ 15 系统功能结构图.............................................................. 错误!未定义书签。 chatroom的模块设计分析 ......................................................................... 16 的关键技术.................................................................... 错误!未定义书签。 代码设计...................................................................................................... 17 聊天室功能实现.......................................................................................... 20 题目四................................................................................................................... 21
开发环境：.................................................................................................... 21 系统分析：.................................................................... 错误!未定义书签。 功能实现：...................................................................... 错误!未定义书签。
第三 实训心得 ....................................................................... 错误!未定义书签。
第一 总体设计
、设计目的：
１、培养学生运用所学课程《Web程序设计(Java)》的理论知识和技能解决实际问题的能力，使学生在系统开发中得到Java Web编程方法及技能的综合训练。
2、培养学生调查研究、查阅技术文献以及编写技术报告的能力。
设计题目：
1．下载并安装JDK、Tomcat、MySQL和Eclipse，完成Java Web应用程序开发环境的搭建。
2．使用JSP Model2模型，开发一个用户注册模块，要求：使用Servlet、JSP和Java Bean技术；界面友好；具有用户输入校验功能，并且在用户输入错误时给出出错信息。
3．使用JSP和JavaScript技术实现一个网络聊天室，功能要求具备一个使用用户昵称登录的页面，在聊天主窗口左侧有当时在线成员列表（建议采用AJAX技术），通过鼠标可以选择说话的对象（不允许自己对自己说话），在聊天时可以设置说话时表情，输入说话的内容，单击发送按钮完成会话的发送，会话内容实时显示在聊天主窗口内，包括发言人姓名、聊天对象姓名 、聊天内容和会话发起的时间，选作的功能是将会话内容保存在数据库中。
.设计要求：
1.对于每个题目，应完成代码编制和调试，保证功能完全实现。 2.编写程序要求利用Eclipse开发工具调试通过。 3设计完成后，需要写成一份实训报告。
第二 设计内容：
题目一 服务器启动
Tomcat服务器启动后，在浏览器的地址栏中输入访问 Tomcat服务器，如果浏览器中的显示界面如图所示，则说明 Tomcat服务器安装成功。如图1图2
图1
图2
下载安装JDK
双击图中的JDK图标，开始安装JDK
下一步，选择开发工具在下一步
安装成功
下载Eclipse安装包
解压eclipse安装包，打开安装文件，直接下一步安装，点击安装完成
即可。双击图1中的图标即可安装运行。
图1
图2
选择上图2中的OK后，即安装成功。
题目二 分析
开发一个用户注册模块，使用JSP Model2模型。JSP Model2架构模型采用JSP+Servlet+JavaBean的技术，此技术将原本的JSP页面中的流程控制代码提取出来，封装到Servlet中，从而实现真个程序页面显示、流程控制和业务逻辑分离。实际上JSP Model2模型就是MVC设计模型，其中控制器的角色是由Servlet实现的，视图的角色是由JSP页面实现，模型的角色是由JavaBean
实现。图是描述Model2的工作原理。
JSP Model模型是一种MVC模式。由于MVC模式中的功能模式中的功能模块相互独立，并且使用该模式的软件具有极高的可维护性、可扩展性和可复用性。
按照JSP Model2的模型思想编写一个用户注册的程序，该程序中包含两个JSP 页面register. jsp和、一个Servlet类、两个JavaBean类和、一个访问数据库的辅助类，这些组件的关系如图9-8
总体结构图：
用户注册设计思想
用户注册功能实现
① 先实现用户注册界面点击注册后进入ControllerServlet跳转页面，然后跳转到登录成功页面，
② 开始实现注册的功能，定义用户类UserBean,用来封装用户的信息，类中定义三个String类型的属性name、password和email。代码没如下：
③ 创建一个类，类定义4个String类型的属性name、password、password2和email属性以及一个Map类型的成员变量error,其中name, password,password2和email属性用于引用注册表单页面传入的用户名、密码、确认密码和email信息，error成员变量用于封装表单验证时的错误信息，主要部分代码如下：
public boolean validate(){
boolean flag=true;
if (name==null||().equals(\"\")){ }
(\"name\",\"请输入姓名.\"); flag=false;
if (passwod==null||().equals(\"\")){ }
(\"password\",\"请输入密码.\"); flag=false;
else if()>12||()<6){
(\"password\", \"请输入6-12个字符.\"); flag=false;
if (passwod!=null&&!(password2)) {
}
}
}
(\"password2\", \"两次输入的密码不匹配.\"); flag=false;
if (email==null||().equals(\"\")) { }
else if (!(\"[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\\\.[a-zA-Z0-9_-]+)+\")){ }
(\"email\", \"邮箱格式错误.\"); flag=false;
(\"email\",\"请输入邮箱.\" ); flag=false;
return flag;
④ 创建一个模拟数据库类，。主要实现两个功能，第一个功能是定义一个HashMap集合uesrs,用于模拟数据库，并向数据库中存入了两条信息，第二个功能是定义了getUser()方法和insertUser()方法来操作数据库，其中getUser()方法用于获取数据库中的用户信息，insertUser()方法用户数据库中插入的用户信息，需要注意的是，在insertUser()方法进行信息插入操作之前会判断数据库中是否存在同名的信息，如果存在则不执行插入操作，方法返回false，反之表示插入操作成功，方法返回true.主要功能代码如下：
p
⑤ 创建的对象用于封装表单提交的信息。当对RegisterFormBean对象进行校验时，如果校验失败，程序就会跳转的注册页面，让用户重新填写注册信息。如果校验通过，那么注册的信息就会封装到UserBean对象中，并通过DBUtil的intertUser()对象插入到数据库。intertUser()方法有一个boolean类型的返回值，如果返回为false，表示插入操作失败，程序跳转到注册页面；分之，程序跳转到,表示用户登录成功。主要代码如下：
public class ControllerServlet extends HttpServlet{
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
}
throws ServletException, IOException {
(req, resp);
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException { (\"Content-type\", \"text/html;charset=GBK\"); (\"GBK\");
String name=(\"name\");
String passwod=(\"password\"); String passwod2=(\"password2\"); String email=(\"email\");
RegisterFormBean formBean=new RegisterFormBean(); (name); (passwod); (passwod2); (email); if(!()){
(\"formBean\", formBean); (\"/\").forward(req, resp); return; }
UserBean userBean=new UserBean(); (name); (passwod); (email);
boolean b=().insertUser(userBean); if(!b){
(\"DBMes\", \"你注册的用户已存在\"); (\"formBean\", formBean); (\"/\").forward(req, resp); return; }
().print(\"恭喜你注册成功，3秒钟自动跳转\"); ().setAttribute(\"userBean\", userBean); (\"refresh\", \"3;url=\"); } }
⑥ 基本功能已经实现，下面开始验证是否成功，在eclipse中重启tomcat服务器，在浏览器中输，
下面开始实现注册的功能，分别在姓名，密码，确认密码和邮箱中输入你的信息，确认无误后，点击错误，会进入跳转页面如图1，最后跳转到登录成功页图2。
图1
、
图2
题目三 聊天室设计思想
在 ChatRoom 下新建包 dao,在包里新建 class DBOper 和 sqlccww；在 luanma 包里新建 class StringUtils；在 model 包里新建 class sqlcc 和 UserInfo;在 servlet 包 里新建 Messages 和 UserListener。在 WebContent 里新建 、、 ,, 、 、 、 ,, 文件，其 中 dao 包里新建的 class DBOper 和 sqlccww 是有关数据库的定义； luanma 包里新 建的 class StringUtils 用来处理中文乱码问题；model 包里新建的 class sqlcc 和 UserInfo 是定义数据库变量的模板和用户信息；servlet 包里新建的 Messages 和 UserListener 是用来处理发送的信息和实现用户在线登陆的程序； 为登陆 索引提示信息； 为登陆页面、 提示登陆成功信息； 在线信息； 退出信息； 发送消息、 安全登录提示信息、 设置聊天内容的主要处理程序。最后要设置 文件。 以上设置完成后在 SQLyog Ultimate 里新建数据库 zyh，在数据库 zyh 里新 建表 sqlcc，在表里完成列名，主键等相关设置。
聊天室模块划分
该聊天室系统主要分为如下几个功能模块，如下所示： ● 用户无需注册即可登录聊天室。
● 系统可以监视每个用户的进入和离开，并且显示相关信息。 ● 用户可以对所有人或者指定的某一个人发送聊天内容。 ● 用户可以实时查看聊天室内的聊天内容。 ● 聊天文字可以选择不同的颜色。
● 管理员可以将不遵守聊天室规章的用户踢出聊天室。
系统功能结构图
chatroom的模块设计分析
登陆进入页面 用户在线列表 表情选择 ,, 处理程序 等处理程序 ；蓝色开朗，红色热情、桃色浪漫，烟雨蒙蒙等
聊天信息保存到数据库 退出聊天室
和 等处理程序 和 safe,jsp 等处理程序
的关键技术
Ajax 重构技术
在 Ajax 应用中，JavaScript 是主体，所以一个 Ajax 应用系统的性能问题也 就是 JavaScript 代码的性能问题。JavaScript 并不是一个高性能的语言，它不能像 C 语言那样进行快速的计算；JavaScript 中的对象也不是轻量级 的，特别是 DOM 元素，它们通常都会占用大量的内存；不同的 Web 浏览器都包含缺陷，很容易造 成内存泄露； 成熟的 Ajax 应用的 JavaScript 代码量将远
远超过传统 Web 应用的代 码量。上述种种情况都会导致 JavaScript 出现性能问题。 随着 Ajax 应用程序的不断扩展， 将会有越来越多的 JavaScript 代码应用到 Ajax 中，这可能导致许多意想不到的问题。因此有必要对 Ajax 代码进行重构。下面将 介绍实现 Ajax 重构的基本步骤。 创建一个单独的 JS 文件，名称为 ，并且在该文件中编写重构 Ajax 所需的代码。 那 么 ， 在 需 要 应 用 Ajax 的 页 面 中 应 用 以 下 的 语 句 包 含 JS 文 件 “”。 在应用 Ajax 的页面中编写错误处理的方法，使用 function onerror(),function getCheckCodel()是实例化 Ajax 对象的方法，而 function deal_getCheckCode()则是 回调函数。
代码设计
A．设计用户登录界面，使用户输入用户名能够进入聊天室
<%@page contentType=\"text/html\" pageEncoding=\"UTF-8\" %>
B．显示用户登录信息，判断用户是否登录，以及在聊天室中显示登录时间，设置用户登录页面过期时间。
<%@page contentType=\"text/html\" pageEncoding=\"UTF-8\" %> <%@ page import=\".*\"%> <%@ page import=\"\"%> <%@ page import=\"\"%> <%
String username=(\"username\"); oLocaleString());
过聊天
室登录界面进入聊天室，设置聊天心情，聊天对象，聊天内容输入的实现，以及发送功能的实现可以设置如下相关功能：
聊天室功能实现
在编程环境中运行，输入用户名guo,进入聊天室，在浏览器地址输入进入登录界面，输入用户名上线，如图1所示
图1
在聊天室中选择聊天对象，聊天心情，填写聊天内容发送，在另一个页面中也可以接收到用户信息，如图2：
图2
题目四
使用Servlet、JSP和JavaScript技术实现一个照片上传模块，功能要求能够上传照片（建议使用Servlet技术和Common File Upload库），可以选择照片的裁剪功能（建议使用JavaScript技术），当照片经过上传和裁剪后可以在线浏览。
开发环境：
JDK、Tomcat、MySQL和Eclipse
系统分析：
系统要实现的功能是有效性判断以及相关对象的关联关系，涉及到程序的算法，JAVA web中的对象认识： 1. 整体风格
2. 系统要实现的功能：用户交互功能 3. 控件之间的逻辑关系 4. 程序算法
5. 客户端开发技术中对象的认识 6. 界面设计：有效性、交互性 7. 代码设计：
剪裁图片的代码如下：
用判断函数equals,来比较servlet请求转发的值是否与设定值相等，从而实现
js的触发，其代码如下：
<%
%>
} else if (!\"\".equals(picUrl) && \"2\".equals(step)) {
} else if (!\"\".equals(picUrl) && \"3\".equals(step)) { Step2();
功能实现：
ZoomImageDemo程序，出现如下页面:
单击上传图片,进入选择上传照片界面，点击浏览，选择要上传的照片，如下图所示：
选择的要上传的照片，拖动照片或单击照片下方的放大、缩小按钮剪裁你满意的头像，剪裁完成后，点击保存头像，保存后的头像如下图所示：
打开浏览器，实现在线浏览保存后上传的照片，操作结果如下图所示：
第三 实训心得
为了提高我们的实践能力，让我们学以致用，能够灵活的运用所学的知识，本课设进行本学期最后的JSP课程设计，在老师的帮助下，我们有了很大的进步。通过实训周对应用程序的练习，我对本学期java web 课程的学习有了更深刻的总结。在开发软件过程中，首先思考要实现整个程序需要的各个模块和其中用到的JSP语言级别操作符、JavaBean、数据库等。用流程图的形式展现我的基本编程思想，能够保持思想的清晰，有利于工作的进行。在编辑程序代码时反复不断的改进以达到预期的效果。在进行调试时，要有耐心，利用所学的知识点不断地完善。
通过此次课程设计，我认识到开发一项好的软件不是一件简单的事，它使我可以更加熟练的掌握了这门课程的基础知识，对它的应用有了深层次的理解，大大的提高了我的动手能力，切实的学习到了很多解决问题的能力。我相信只要努力坚持不懈，就没有做不到的事。
因篇幅问题不能全部显示，请点此查看更多更全内容