《javaweb課設(shè)報告》由會員分享，可在線閱讀，更多相關(guān)《javaweb課設(shè)報告（24頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、
洛 陽 理 工 學 院
課 程 設(shè) 計 報 告
課程名稱 Java web程序開發(fā)入門
專 業(yè) 計算機應用技術(shù) _
班 級 _
學 號 _
姓 名
完成日期 _
目錄
第一 總體設(shè)計 4
1.1、設(shè)計目的： 4
1.2設(shè)計題目： 4
1.3.設(shè)計要求： 4
第二設(shè)計內(nèi)容
2、： 5
2.1 題目一 5
2.1.1Tomcat服務器啟動 5
2.1.2下載安裝JDK 6
2.1.3下載Eclipse安裝包 7
2.2題目二 8
2.2.1分析 8
2.2.2用戶注冊設(shè)計思想 9
2.2.3用戶注冊功能實現(xiàn) 9
2.3題目三 15
2.3.1聊天室設(shè)計思想 15
2.3.2聊天室模塊劃分 15
2.3.3系統(tǒng)功能結(jié)構(gòu)圖 16
2.3.4 chatroom的模塊設(shè)計分析 16
2.3.5ChatRoom 的關(guān)鍵技術(shù) 16
2.3.6 代碼設(shè)計 17
2.3.7 聊天室功能實現(xiàn) 20
2.4題目四 21
2.4.1開發(fā)環(huán)境： 21
2
3、.4.2 系統(tǒng)分析： 21
2.4.3功能實現(xiàn)： 22
第三 實訓心得 24
第一 總體設(shè)計
1.1、設(shè)計目的：
１、培養(yǎng)學生運用所學課程《Web程序設(shè)計(Java)》的理論知識和技能解決實際問題的能力，使學生在系統(tǒng)開發(fā)中得到Java Web編程方法及技能的綜合訓練。
2、培養(yǎng)學生調(diào)查研究、查閱技術(shù)文獻以及編寫技術(shù)報告的能力。
1.2設(shè)計題目：
1．下載并安裝JDK、Tomcat、MySQL和Eclipse，完成Java Web應用程序開發(fā)環(huán)境的搭建。
2．使用JSP Model2模型，開發(fā)一個用戶注冊模塊，要求：使用Servlet、JSP和Java B
4、ean技術(shù)；界面友好；具有用戶輸入校驗功能，并且在用戶輸入錯誤時給出出錯信息。
3．使用JSP和JavaScript技術(shù)實現(xiàn)一個網(wǎng)絡聊天室，功能要求具備一個使用用戶昵稱登錄的頁面，在聊天主窗口左側(cè)有當時在線成員列表（建議采用AJAX技術(shù)），通過鼠標可以選擇說話的對象（不允許自己對自己說話），在聊天時可以設(shè)置說話時表情，輸入說話的內(nèi)容，單擊發(fā)送按鈕完成會話的發(fā)送，會話內(nèi)容實時顯示在聊天主窗口內(nèi)，包括發(fā)言人姓名、聊天對象姓名 、聊天內(nèi)容和會話發(fā)起的時間，選作的功能是將會話內(nèi)容保存在數(shù)據(jù)庫中。
1.3.設(shè)計要求：
1.對于每個題目，應完成代碼編制和調(diào)試，保證功能完全實現(xiàn)。
2.編寫程序要
5、求利用Eclipse開發(fā)工具調(diào)試通過。
3設(shè)計完成后，需要寫成一份實訓報告。
第二 設(shè)計內(nèi)容：
2.1 題目一
2.1.1Tomcat服務器啟動
Tomcat服務器啟動后，在瀏覽器的地址欄中輸入http://locathost:8080或者http://127.0.0.1:8080訪問 Tomcat服務器，如果瀏覽器中的顯示界面如圖所示，則說明 Tomcat服務器安裝成功。如圖1圖2
圖1
圖2
2.1.2下載安裝JDK
雙擊圖中的JDK圖標，開始安裝JDK
下一步，選擇開發(fā)工具在下一步
安裝成功
2.1.3下載Ecli
6、pse安裝包
解壓eclipse安裝包，打開安裝文件，直接下一步安裝，點擊安裝完成即可。雙擊圖1中的eclipse.exe圖標即可安裝運行。
圖1
圖2
選擇上圖2中的OK后，即安裝成功。
2.2題目二
2.2.1分析
開發(fā)一個用戶注冊模塊，使用JSP Model2模型。JSP Model2架構(gòu)模型采用JSP+Servlet+JavaBean的技術(shù)，此技術(shù)將原本的JSP頁面中的流程控制代碼提取出來，封裝到Servlet中，從而實現(xiàn)真?zhèn)€程序頁面顯示、流程控制和業(yè)務邏輯分離。實際上JSP Model2模型就是MVC設(shè)計模型，其中控制器的角色是由Servlet實現(xiàn)的，視
7、圖的角色是由JSP頁面實現(xiàn)，模型的角色是由JavaBean實現(xiàn)。圖9.3是描述Model2的工作原理。
JSP Model模型是一種MVC模式。由于MVC模式中的功能模式中的功能模塊相互獨立，并且使用該模式的軟件具有極高的可維護性、可擴展性和可復用性。
按照JSP Model2的模型思想編寫一個用戶注冊的程序，該程序中包含兩個JSP 頁面register. jsp和loginSuccess.jsp、一個Servlet類ControllerServlet.java、兩個JavaBean類RegisterFormBean.java和UserBean.java、一個訪問數(shù)據(jù)庫的輔助類DBUt
8、il.java，這些組件的關(guān)系如圖9-8
總體結(jié)構(gòu)圖：
2.2.2用戶注冊設(shè)計思想
2.2.3用戶注冊功能實現(xiàn)
① 先實現(xiàn)用戶注冊界面register.jsp點擊注冊后進入ControllerServlet跳轉(zhuǎn)頁面，然后跳轉(zhuǎn)到loginSuccess.jsp登錄成功頁面，
② 開始實現(xiàn)注冊的功能，定義用戶類UserBean,用來封裝用戶的信息，UserBean.java類中定義三個String類型的屬性name、password和email。代碼沒如下：
③ 創(chuàng)建一個RegisterFormBean.java類，類
9、定義4個String類型的屬性name、password、password2和email屬性以及一個Map類型的成員變量error,其中name, password,password2和email屬性用于引用注冊表單頁面?zhèn)魅氲挠脩裘⒚艽a、確認密碼和email信息，error成員變量用于封裝表單驗證時的錯誤信息，主要部分代碼如下：
public boolean validate(){
boolean flag=true;
if (name==null||name.trim().equals("")){
errors.put("name","請輸入姓名.");
fl
10、ag=false;
}
if (passwod==null||passwod.trim().equals("")){
errors.put("password","請輸入密碼.");
flag=false;
}
else if(passwod.length()>12||passwod.length()<6){
errors.put("password", "請輸入6-12個字符.");
flag=false;
}
if (passwod!=null&&!passwod.equals(password2)) {
11、 errors.put("password2", "兩次輸入的密碼不匹配.");
flag=false;
}
if (email==null||email.trim().equals("")) {
errors.put("email","請輸入郵箱." );
flag=false;
}
else if (!email.matches("[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+")){
errors.put("email", "郵箱格式錯誤.");
flag=false;
12、
}
return flag;
}
④ 創(chuàng)建一個模擬數(shù)據(jù)庫類，DBUtil.java。主要實現(xiàn)兩個功能，第一個功能是定義一個HashMap集合uesrs,用于模擬數(shù)據(jù)庫，并向數(shù)據(jù)庫中存入了兩條信息，第二個功能是定義了getUser()方法和insertUser()方法來操作數(shù)據(jù)庫，其中g(shù)etUser()方法用于獲取數(shù)據(jù)庫中的用戶信息，insertUser()方法用戶數(shù)據(jù)庫中插入的用戶信息，需要注意的是，在insertUser()方法進行信息插入操作之前會判斷數(shù)據(jù)庫中是否存在同名的信息，如果存在則不執(zhí)行插入操作，方法返回false，反之表示插入操作成功，方法返回true.主要功
13、能代碼如下：
p
⑤ 創(chuàng)建的RegisterFormBean.java對象用于封裝表單提交的信息。當對RegisterFormBean對象進行校驗時，如果校驗失敗，程序就會跳轉(zhuǎn)的regsiter.jsp注冊頁面，讓用戶重新填寫注冊信息。如果校驗通過，那么注冊的信息就會封裝到UserBean對象中，并通過DBUtil的intertUser()對象插入到數(shù)據(jù)庫。intertUser()方法有一個boolean類型的返回值，如果返回為false，表示插入操作失敗，程序跳轉(zhuǎn)到register.jsp注冊頁面；分之，程序跳轉(zhuǎn)到loginsuccess.jsp,表示用戶登錄成功。主要代碼如下：
14、public class ControllerServlet extends HttpServlet{
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletExce
15、ption, IOException {
resp.setHeader("Content-type", "text/html;charset=GBK");
resp.setCharacterEncoding("GBK");
String name=req.getParameter("name");
String passwod=req.getParameter("password");
String passwod2=req.getParameter("password2");
String email=req.getParameter("email");
RegisterFor
16、mBean formBean=new RegisterFormBean();
formBean.setName(name);
formBean.setPasswod(passwod);
formBean.setPassword2(passwod2);
formBean.setEmail(email);
if(!formBean.validate()){
req.setAttribute("formBean", formBean);
req.getRequestDispatcher("/register.jsp").forward(req, resp);
return;
}
17、UserBean userBean=new UserBean();
userBean.setName(name);
userBean.setPassword(passwod);
userBean.setEmail(email);
boolean b=DBUtil.getInstance().insertUser(userBean);
if(!b){
req.setAttribute("DBMes", "你注冊的用戶已存在");
req.setAttribute("formBean", formBean);
req.getRequestDispatcher("/register.
18、jsp").forward(req, resp);
return;
}
resp.getWriter().print("恭喜你注冊成功，3秒鐘自動跳轉(zhuǎn)");
req.getSession().setAttribute("userBean", userBean);
resp.setHeader("refresh", "3;url=loginSuccess.jsp");
}
}
⑥ 基本功能已經(jīng)實現(xiàn)，下面開始驗證是否成功，在eclipse中重啟tomcat服務器，在瀏覽器中輸http://localhost:8080/Userload/register.jsp。如果正確的話會出現(xiàn)如
19、下頁面，
下面開始實現(xiàn)注冊的功能，分別在姓名，密碼，確認密碼和郵箱中輸入你的信息，確認無誤后，點擊錯誤，會進入跳轉(zhuǎn)頁面如圖1，最后跳轉(zhuǎn)到登錄成功頁圖2。
圖1
、
圖2
2.3題目三
2.3.1聊天室設(shè)計思想
在 ChatRoom 下新建包 dao,在包里新建 class DBOper 和 sqlccww；在 luanma 包里新建 class StringUtils；在 model 包里新建 class sqlcc 和 UserInfo;在 servlet 包 里新建 Messages 和 UserListener。在 WebContent 里新建 index.js
20、p、login.jsp、 login_ok.jsp,online.jsp,logout.jsp 、 send.jsp 、 safe.jsp 、 content.jsp,main.jsp, 文件，其 中 dao 包里新建的 class DBOper 和 sqlccww 是有關(guān)數(shù)據(jù)庫的定義； luanma 包里新 建的 class StringUtils 用來處理中文亂碼問題；model 包里新建的 class sqlcc 和 UserInfo 是定義數(shù)據(jù)庫變量的模板和用戶信息；servlet 包里新建的 Messages 和 UserListener 是用來處理發(fā)送的信息和實現(xiàn)用戶在線登陸的程序
21、；index.jsp 為登陸 索引提示信息；login.jsp 為登陸頁面、login_ok.jsp 提示登陸成功信息；online.jsp 在線信息；logout.jsp 退出信息；send.jsp 發(fā)送消息、safe.jsp 安全登錄提示信息、 main.jsp 設(shè)置聊天內(nèi)容的主要處理程序。最后要設(shè)置 web.xml 文件。 以上設(shè)置完成后在 SQLyog Ultimate 里新建數(shù)據(jù)庫 zyh，在數(shù)據(jù)庫 zyh 里新 建表 sqlcc，在表里完成列名，主鍵等相關(guān)設(shè)置。
2.3.2聊天室模塊劃分
該聊天室系統(tǒng)主要分為如下幾個功能模塊，如下所示：
????● 用戶無需注冊即可登錄聊天
22、室。
● 系統(tǒng)可以監(jiān)視每個用戶的進入和離開，并且顯示相關(guān)信息。
● 用戶可以對所有人或者指定的某一個人發(fā)送聊天內(nèi)容。
● 用戶可以實時查看聊天室內(nèi)的聊天內(nèi)容。
● 聊天文字可以選擇不同的顏色。
● 管理員可以將不遵守聊天室規(guī)章的用戶踢出聊天室。
2.3.3系統(tǒng)功能結(jié)構(gòu)圖
2.3.4 chatroom的模塊設(shè)計分析
登陸進入頁面 用戶在線列表 表情選擇
Login.jsp,index.jsp,login_ok.jsp 處理程序 Online.jsp 等處理程序
紅著臉 無表情的，微笑著，笑呵呵地，溫柔的，幸福的
23、嘟著嘴，熱淚盈眶的，依依不舍的，得意的等
字體顏色選擇
紅色熱情 ；藍色開朗，紅色熱情、桃色浪漫，煙雨蒙蒙等
聊天信息保存到數(shù)據(jù)庫
退出聊天室
Sqlcc.java 和 sqlccww.java 等處理程序 Leave.jsp 和 safe,jsp 等處理程序
2.3.5ChatRoom 的關(guān)鍵技術(shù)
Ajax 重構(gòu)技術(shù)
在 Ajax 應用中，JavaScript 是主體，所以一個 Ajax 應用系統(tǒng)的性能問題也 就是 JavaScript 代碼的
24、性能問題。JavaScript 并不是一個高性能的語言，它不能像 C 語言那樣進行快速的計算；JavaScript 中的對象也不是輕量級 的，特別是 DOM 元素，它們通常都會占用大量的內(nèi)存；不同的 Web 瀏覽器都包含缺陷，很容易造 成內(nèi)存泄露； 成熟的 Ajax 應用的 JavaScript 代碼量將遠遠超過傳統(tǒng) Web 應用的代 碼量。上述種種情況都會導致 JavaScript 出現(xiàn)性能問題。 隨著 Ajax 應用程序的不斷擴展， 將會有越來越多的 JavaScript 代碼應用到 Ajax 中，這可能導致許多意想不到的問題。因此有必要對 Ajax 代碼進行重構(gòu)。下面將 介紹實現(xiàn) Aja
25、x 重構(gòu)的基本步驟。 創(chuàng)建一個單獨的 JS 文件，名稱為 AjaxRequest.js，并且在該文件中編寫重構(gòu) Ajax 所需的代碼。 那 么 ， 在 需 要 應 用 Ajax 的 頁 面 中 應 用 以 下 的 語 句 包 含 JS 文 件 “AjaxRequest.js”。 在應用 Ajax 的頁面中編寫錯誤處理的方法，使用 function onerror(),function getCheckCodel()是實例化 Ajax 對象的方法，而 function
26、deal_getCheckCode()則是 回調(diào)函數(shù)。
2.3.6 代碼設(shè)計
A．設(shè)計用戶登錄界面，使用戶輸入用戶名能夠進入聊天室
<%@page contentType="text/html" pageEncoding="UTF-8" %>
聊天室
B．顯示
30、用戶登錄信息，判斷用戶是否登錄，以及在聊天室中顯示登錄時間，設(shè)置用戶登錄頁面過期時間。
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ page import="java.util.*"%>
<%@ page import="com.wgh.model.UserInfo"%>
<%@ page import="com.wgh.servlet.UserListener"%>
<%
String username=request.getParameter("username"); //獲得登錄用戶名
User
31、Info user=UserInfo.getInstance(); //獲得UserInfo類的對象
session.setMaxInactiveInterval(600); //設(shè)置Session的過期時間為10分鐘
Vector vector=user.getList();
boolean flag=true; //標記是否登錄的變量
//判斷用戶是否登錄
if(vector!=null&&vector.size()>0){
for(int i=0;i
32、{
out.println("");
flag=false;
break;
}
}
}
//保存用戶信息
if(flag){
UserListener ul=new UserListener();
ul.setUser(username);
session.setAttribute("user",ul);
session.setAttribute("username",use
33、rname);
user.addUser(ul.getUser());
//保存當前登錄的用戶名
session.setAttribute("loginTime",new Date().toLocaleString()); //保存登錄時間
response.sendRedirect("Messages?action=loginRoom");
}
%>
C.通過聊天室登錄界面進入聊天室，設(shè)置聊天心情，聊天對象，聊天內(nèi)容輸入的實現(xiàn)，以及發(fā)送功能的實現(xiàn)可以設(shè)置如下相關(guān)功能：
2.3.7 聊天室功能實現(xiàn)
在編程環(huán)
34、境中運行index.jsp，輸入用戶名guo,進入聊天室，在瀏覽器地址輸入http://localhost:8080/WebContent /index.jsp進入登錄界面，輸入用戶名上線，如圖1所示
圖1
在聊天室中選擇聊天對象，聊天心情，填寫聊天內(nèi)容發(fā)送，在另一個頁面中也可以接收到用戶信息，如圖2：
圖2
2.4題目四
使用Servlet、JSP和JavaScript技術(shù)實現(xiàn)一個照片上傳模塊，功能要求能夠上傳照片（建議使用Servlet技術(shù)和Common File Upload庫），可以選擇照片的裁剪功能（建議使用JavaScript技術(shù)），當照片經(jīng)過
35、上傳和裁剪后可以在線瀏覽。
2.4.1開發(fā)環(huán)境：
JDK、Tomcat、MySQL和Eclipse
2.4.2 系統(tǒng)分析：
系統(tǒng)要實現(xiàn)的功能是有效性判斷以及相關(guān)對象的關(guān)聯(lián)關(guān)系，涉及到程序的算法，JAVA web中的對象認識：
1. 整體風格
2. 系統(tǒng)要實現(xiàn)的功能：用戶交互功能
3. 控件之間的邏輯關(guān)系
4. 程序算法
5. 客戶端開發(fā)技術(shù)中對象的認識
6. 界面設(shè)計：有效性、交互性
7. 代碼設(shè)計：
剪裁圖片的代碼如下：
用判斷函數(shù)equals,來比較servlet請求轉(zhuǎn)發(fā)的值是否與設(shè)定值相等，從而實現(xiàn)js的觸發(fā)，其代碼如下：
<%
if (null == picUrl || "".equals(picUrl)) {
%>
<%
} else if (!"".equals(picUrl) && "3".equals(step)) {
%>
<%
}
%>
2.4.3功能實現(xiàn)：
ZoomImageDemo程序，出現(xiàn)
40、如下頁面:
單擊上傳圖片,進入選擇上傳照片界面，點擊瀏覽，選擇要上傳的照片，如下圖所示：
選擇的要上傳的照片，拖動照片或單擊照片下方的放大、縮小按鈕剪裁你滿意的頭像，剪裁完成后，點擊保存頭像，保存后的頭像如下圖所示：
打開瀏覽器，實現(xiàn)在線瀏覽保存后上傳的照片，操作結(jié)果如下圖所示：
第三 實訓心得
為了提高我們的實踐能力，讓我們學以致用，能夠靈活的運用所學的知識，本課設(shè)進行本學期最后的JSP課程設(shè)計，在老師的幫助下，我們有了很大的進步。通過實訓周對應用程序的練習，我對本學期java web 課程的學習有了更深刻的總結(jié)。在開發(fā)軟件過程中，首先思考要實現(xiàn)整個程序需要的各個模塊和其中用到的JSP語言級別操作符、JavaBean、數(shù)據(jù)庫等。用流程圖的形式展現(xiàn)我的基本編程思想，能夠保持思想的清晰，有利于工作的進行。在編輯程序代碼時反復不斷的改進以達到預期的效果。在進行調(diào)試時，要有耐心，利用所學的知識點不斷地完善。
通過此次課程設(shè)計，我認識到開發(fā)一項好的軟件不是一件簡單的事，它使我可以更加熟練的掌握了這門課程的基礎(chǔ)知識，對它的應用有了深層次的理解，大大的提高了我的動手能力，切實的學習到了很多解決問題的能力。我相信只要努力堅持不懈，就沒有做不到的事。
javaweb課設(shè)報告
