《javaweb課設(shè)報(bào)告》由會(huì)員分享，可在線閱讀，更多相關(guān)《javaweb課設(shè)報(bào)告（24頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、 洛 陽 理 工 學(xué) 院 課 程 設(shè) 計(jì) 報(bào) 告 課程名稱 Java web程序開發(fā)入門 專 業(yè) 計(jì)算機(jī)應(yīng)用技術(shù) _ 班 級(jí) _ 學(xué) 號(hào) _ 姓 名 完成日期 _ 目錄 第一 總體設(shè)計(jì) 4 1.1、設(shè)計(jì)目的： 4 1.2設(shè)計(jì)題目： 4 1.3.設(shè)計(jì)要求： 4 第二設(shè)計(jì)內(nèi)容

2、： 5 2.1 題目一 5 2.1.1Tomcat服務(wù)器啟動(dòng) 5 2.1.2下載安裝JDK 6 2.1.3下載Eclipse安裝包 7 2.2題目二 8 2.2.1分析 8 2.2.2用戶注冊(cè)設(shè)計(jì)思想 9 2.2.3用戶注冊(cè)功能實(shí)現(xiàn) 9 2.3題目三 15 2.3.1聊天室設(shè)計(jì)思想 15 2.3.2聊天室模塊劃分 15 2.3.3系統(tǒng)功能結(jié)構(gòu)圖 16 2.3.4 chatroom的模塊設(shè)計(jì)分析 16 2.3.5ChatRoom 的關(guān)鍵技術(shù) 16 2.3.6 代碼設(shè)計(jì) 17 2.3.7 聊天室功能實(shí)現(xiàn) 20 2.4題目四 21 2.4.1開發(fā)環(huán)境： 21 2

3、.4.2 系統(tǒng)分析： 21 2.4.3功能實(shí)現(xiàn)： 22 第三 實(shí)訓(xùn)心得 24 第一 總體設(shè)計(jì) 1.1、設(shè)計(jì)目的： １、培養(yǎng)學(xué)生運(yùn)用所學(xué)課程《Web程序設(shè)計(jì)(Java)》的理論知識(shí)和技能解決實(shí)際問題的能力，使學(xué)生在系統(tǒng)開發(fā)中得到Java Web編程方法及技能的綜合訓(xùn)練。 2、培養(yǎng)學(xué)生調(diào)查研究、查閱技術(shù)文獻(xiàn)以及編寫技術(shù)報(bào)告的能力。 1.2設(shè)計(jì)題目： 1．下載并安裝JDK、Tomcat、MySQL和Eclipse，完成Java Web應(yīng)用程序開發(fā)環(huán)境的搭建。 2．使用JSP Model2模型，開發(fā)一個(gè)用戶注冊(cè)模塊，要求：使用Servlet、JSP和Java B

4、ean技術(shù)；界面友好；具有用戶輸入校驗(yàn)功能，并且在用戶輸入錯(cuò)誤時(shí)給出出錯(cuò)信息。 3．使用JSP和JavaScript技術(shù)實(shí)現(xiàn)一個(gè)網(wǎng)絡(luò)聊天室，功能要求具備一個(gè)使用用戶昵稱登錄的頁面，在聊天主窗口左側(cè)有當(dāng)時(shí)在線成員列表（建議采用AJAX技術(shù)），通過鼠標(biāo)可以選擇說話的對(duì)象（不允許自己對(duì)自己說話），在聊天時(shí)可以設(shè)置說話時(shí)表情，輸入說話的內(nèi)容，單擊發(fā)送按鈕完成會(huì)話的發(fā)送，會(huì)話內(nèi)容實(shí)時(shí)顯示在聊天主窗口內(nèi)，包括發(fā)言人姓名、聊天對(duì)象姓名 、聊天內(nèi)容和會(huì)話發(fā)起的時(shí)間，選作的功能是將會(huì)話內(nèi)容保存在數(shù)據(jù)庫中。 1.3.設(shè)計(jì)要求： 1.對(duì)于每個(gè)題目，應(yīng)完成代碼編制和調(diào)試，保證功能完全實(shí)現(xiàn)。 2.編寫程序要

5、求利用Eclipse開發(fā)工具調(diào)試通過。 3設(shè)計(jì)完成后，需要寫成一份實(shí)訓(xùn)報(bào)告。 第二 設(shè)計(jì)內(nèi)容： 2.1 題目一 2.1.1Tomcat服務(wù)器啟動(dòng) Tomcat服務(wù)器啟動(dòng)后，在瀏覽器的地址欄中輸入http://locathost:8080或者h(yuǎn)ttp://127.0.0.1:8080訪問 Tomcat服務(wù)器，如果瀏覽器中的顯示界面如圖所示，則說明 Tomcat服務(wù)器安裝成功。如圖1圖2 圖1 圖2 2.1.2下載安裝JDK 雙擊圖中的JDK圖標(biāo)，開始安裝JDK 下一步，選擇開發(fā)工具在下一步 安裝成功 2.1.3下載Ecli

6、pse安裝包 解壓eclipse安裝包，打開安裝文件，直接下一步安裝，點(diǎn)擊安裝完成即可。雙擊圖1中的eclipse.exe圖標(biāo)即可安裝運(yùn)行。 圖1 圖2 選擇上圖2中的OK后，即安裝成功。 2.2題目二 2.2.1分析 開發(fā)一個(gè)用戶注冊(cè)模塊，使用JSP Model2模型。JSP Model2架構(gòu)模型采用JSP+Servlet+JavaBean的技術(shù)，此技術(shù)將原本的JSP頁面中的流程控制代碼提取出來，封裝到Servlet中，從而實(shí)現(xiàn)真?zhèn)€程序頁面顯示、流程控制和業(yè)務(wù)邏輯分離。實(shí)際上JSP Model2模型就是MVC設(shè)計(jì)模型，其中控制器的角色是由Servlet實(shí)現(xiàn)的，視

7、圖的角色是由JSP頁面實(shí)現(xiàn)，模型的角色是由JavaBean實(shí)現(xiàn)。圖9.3是描述Model2的工作原理。 JSP Model模型是一種MVC模式。由于MVC模式中的功能模式中的功能模塊相互獨(dú)立，并且使用該模式的軟件具有極高的可維護(hù)性、可擴(kuò)展性和可復(fù)用性。 按照J(rèn)SP Model2的模型思想編寫一個(gè)用戶注冊(cè)的程序，該程序中包含兩個(gè)JSP 頁面register. jsp和loginSuccess.jsp、一個(gè)Servlet類ControllerServlet.java、兩個(gè)JavaBean類RegisterFormBean.java和UserBean.java、一個(gè)訪問數(shù)據(jù)庫的輔助類DBUt

8、il.java，這些組件的關(guān)系如圖9-8 總體結(jié)構(gòu)圖： 2.2.2用戶注冊(cè)設(shè)計(jì)思想 2.2.3用戶注冊(cè)功能實(shí)現(xiàn) ① 先實(shí)現(xiàn)用戶注冊(cè)界面register.jsp點(diǎn)擊注冊(cè)后進(jìn)入ControllerServlet跳轉(zhuǎn)頁面，然后跳轉(zhuǎn)到loginSuccess.jsp登錄成功頁面， ② 開始實(shí)現(xiàn)注冊(cè)的功能，定義用戶類UserBean,用來封裝用戶的信息，UserBean.java類中定義三個(gè)String類型的屬性name、password和email。代碼沒如下： ③ 創(chuàng)建一個(gè)RegisterFormBean.java類，類

9、定義4個(gè)String類型的屬性name、password、password2和email屬性以及一個(gè)Map類型的成員變量error,其中name, password,password2和email屬性用于引用注冊(cè)表單頁面?zhèn)魅氲挠脩裘?、密碼、確認(rèn)密碼和email信息，error成員變量用于封裝表單驗(yàn)證時(shí)的錯(cuò)誤信息，主要部分代碼如下： public boolean validate(){ boolean flag=true; if (name==null||name.trim().equals("")){ errors.put("name","請(qǐng)輸入姓名."); fl

10、ag=false; } if (passwod==null||passwod.trim().equals("")){ errors.put("password","請(qǐng)輸入密碼."); flag=false; } else if(passwod.length()>12||passwod.length()<6){ errors.put("password", "請(qǐng)輸入6-12個(gè)字符."); flag=false; } if (passwod!=null&&!passwod.equals(password2)) {

11、 errors.put("password2", "兩次輸入的密碼不匹配."); flag=false; } if (email==null||email.trim().equals("")) { errors.put("email","請(qǐng)輸入郵箱." ); flag=false; } else if (!email.matches("[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+")){ errors.put("email", "郵箱格式錯(cuò)誤."); flag=false;

12、 } return flag; } ④ 創(chuàng)建一個(gè)模擬數(shù)據(jù)庫類，DBUtil.java。主要實(shí)現(xiàn)兩個(gè)功能，第一個(gè)功能是定義一個(gè)HashMap集合uesrs,用于模擬數(shù)據(jù)庫，并向數(shù)據(jù)庫中存入了兩條信息，第二個(gè)功能是定義了getUser()方法和insertUser()方法來操作數(shù)據(jù)庫，其中g(shù)etUser()方法用于獲取數(shù)據(jù)庫中的用戶信息，insertUser()方法用戶數(shù)據(jù)庫中插入的用戶信息，需要注意的是，在insertUser()方法進(jìn)行信息插入操作之前會(huì)判斷數(shù)據(jù)庫中是否存在同名的信息，如果存在則不執(zhí)行插入操作，方法返回false，反之表示插入操作成功，方法返回true.主要功

13、能代碼如下： p ⑤ 創(chuàng)建的RegisterFormBean.java對(duì)象用于封裝表單提交的信息。當(dāng)對(duì)RegisterFormBean對(duì)象進(jìn)行校驗(yàn)時(shí)，如果校驗(yàn)失敗，程序就會(huì)跳轉(zhuǎn)的regsiter.jsp注冊(cè)頁面，讓用戶重新填寫注冊(cè)信息。如果校驗(yàn)通過，那么注冊(cè)的信息就會(huì)封裝到UserBean對(duì)象中，并通過DBUtil的intertUser()對(duì)象插入到數(shù)據(jù)庫。intertUser()方法有一個(gè)boolean類型的返回值，如果返回為false，表示插入操作失敗，程序跳轉(zhuǎn)到register.jsp注冊(cè)頁面；分之，程序跳轉(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", "你注冊(cè)的用戶已存在"); req.setAttribute("formBean", formBean); req.getRequestDispatcher("/register.

18、jsp").forward(req, resp); return; } resp.getWriter().print("恭喜你注冊(cè)成功，3秒鐘自動(dòng)跳轉(zhuǎn)"); req.getSession().setAttribute("userBean", userBean); resp.setHeader("refresh", "3;url=loginSuccess.jsp"); } } ⑥ 基本功能已經(jīng)實(shí)現(xiàn)，下面開始驗(yàn)證是否成功，在eclipse中重啟tomcat服務(wù)器，在瀏覽器中輸http://localhost:8080/Userload/register.jsp。如果正確的話會(huì)出現(xiàn)如

19、下頁面， 下面開始實(shí)現(xiàn)注冊(cè)的功能，分別在姓名，密碼，確認(rèn)密碼和郵箱中輸入你的信息，確認(rèn)無誤后，點(diǎn)擊錯(cuò)誤，會(huì)進(jìn)入跳轉(zhuǎn)頁面如圖1，最后跳轉(zhuǎn)到登錄成功頁圖2。 圖1 、 圖2 2.3題目三 2.3.1聊天室設(shè)計(jì)思想 在 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ā)送的信息和實(shí)現(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)主要分為如下幾個(gè)功能模塊，如下所示： ????● 用戶無需注冊(cè)即可登錄聊天

22、室。 ● 系統(tǒng)可以監(jiān)視每個(gè)用戶的進(jìn)入和離開，并且顯示相關(guān)信息。 ● 用戶可以對(duì)所有人或者指定的某一個(gè)人發(fā)送聊天內(nèi)容。 ● 用戶可以實(shí)時(shí)查看聊天室內(nèi)的聊天內(nèi)容。 ● 聊天文字可以選擇不同的顏色。 ● 管理員可以將不遵守聊天室規(guī)章的用戶踢出聊天室。 2.3.3系統(tǒng)功能結(jié)構(gòu)圖 2.3.4 chatroom的模塊設(shè)計(jì)分析 登陸進(jìn)入頁面 用戶在線列表 表情選擇 Login.jsp,index.jsp,login_ok.jsp 處理程序 Online.jsp 等處理程序 紅著臉 無表情的，微笑著，笑呵呵地，溫柔的，幸福的

23、嘟著嘴，熱淚盈眶的，依依不舍的，得意的等 字體顏色選擇 紅色熱情 ；藍(lán)色開朗，紅色熱情、桃色浪漫，煙雨蒙蒙等 聊天信息保存到數(shù)據(jù)庫 退出聊天室 Sqlcc.java 和 sqlccww.java 等處理程序 Leave.jsp 和 safe,jsp 等處理程序 2.3.5ChatRoom 的關(guān)鍵技術(shù) Ajax 重構(gòu)技術(shù) 在 Ajax 應(yīng)用中，JavaScript 是主體，所以一個(gè) Ajax 應(yīng)用系統(tǒng)的性能問題也 就是 JavaScript 代碼的

24、性能問題。JavaScript 并不是一個(gè)高性能的語言，它不能像 C 語言那樣進(jìn)行快速的計(jì)算；JavaScript 中的對(duì)象也不是輕量級(jí) 的，特別是 DOM 元素，它們通常都會(huì)占用大量的內(nèi)存；不同的 Web 瀏覽器都包含缺陷，很容易造 成內(nèi)存泄露； 成熟的 Ajax 應(yīng)用的 JavaScript 代碼量將遠(yuǎn)遠(yuǎn)超過傳統(tǒng) Web 應(yīng)用的代 碼量。上述種種情況都會(huì)導(dǎo)致 JavaScript 出現(xiàn)性能問題。 隨著 Ajax 應(yīng)用程序的不斷擴(kuò)展， 將會(huì)有越來越多的 JavaScript 代碼應(yīng)用到 Ajax 中，這可能導(dǎo)致許多意想不到的問題。因此有必要對(duì) Ajax 代碼進(jìn)行重構(gòu)。下面將 介紹實(shí)現(xiàn) Aja

25、x 重構(gòu)的基本步驟。 創(chuàng)建一個(gè)單獨(dú)的 JS 文件，名稱為 AjaxRequest.js，并且在該文件中編寫重構(gòu) Ajax 所需的代碼。 那 么 ， 在 需 要 應(yīng) 用 Ajax 的 頁 面 中 應(yīng) 用 以 下 的 語 句 包 含 JS 文 件 “AjaxRequest.js”。 在應(yīng)用 Ajax 的頁面中編寫錯(cuò)誤處理的方法，使用 function onerror(),function getCheckCodel()是實(shí)例化 Ajax 對(duì)象的方法，而 function

26、deal_getCheckCode()則是 回調(diào)函數(shù)。 2.3.6 代碼設(shè)計(jì) A．設(shè)計(jì)用戶登錄界面，使用戶輸入用戶名能夠進(jìn)入聊天室 <%@page contentType="text/html" pageEncoding="UTF-8" %>

28、ight="230" border="0" align="center" cellpadding="0" cellspacing="0" background="images/login.jpg">

29、 width="216" align="center" valign="top" class="word_dark">用戶名：

B．顯示

30、用戶登錄信息，判斷用戶是否登錄，以及在聊天室中顯示登錄時(shí)間，設(shè)置用戶登錄頁面過期時(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類的對(duì)象 session.setMaxInactiveInterval(600); //設(shè)置Session的過期時(shí)間為10分鐘 Vector vector=user.getList(); boolean flag=true; //標(biāo)記是否登錄的變量 //判斷用戶是否登錄 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()); //保存當(dāng)前登錄的用戶名 session.setAttribute("loginTime",new Date().toLocaleString()); //保存登錄時(shí)間 response.sendRedirect("Messages?action=loginRoom"); } %> C.通過聊天室登錄界面進(jìn)入聊天室，設(shè)置聊天心情，聊天對(duì)象，聊天內(nèi)容輸入的實(shí)現(xiàn)，以及發(fā)送功能的實(shí)現(xiàn)可以設(shè)置如下相關(guān)功能： 2.3.7 聊天室功能實(shí)現(xiàn) 在編程環(huán)

34、境中運(yùn)行index.jsp，輸入用戶名guo,進(jìn)入聊天室，在瀏覽器地址輸入http://localhost:8080/WebContent /index.jsp進(jìn)入登錄界面，輸入用戶名上線，如圖1所示 圖1 在聊天室中選擇聊天對(duì)象，聊天心情，填寫聊天內(nèi)容發(fā)送，在另一個(gè)頁面中也可以接收到用戶信息，如圖2： 圖2 2.4題目四 使用Servlet、JSP和JavaScript技術(shù)實(shí)現(xiàn)一個(gè)照片上傳模塊，功能要求能夠上傳照片（建議使用Servlet技術(shù)和Common File Upload庫），可以選擇照片的裁剪功能（建議使用JavaScript技術(shù)），當(dāng)照片經(jīng)過

35、上傳和裁剪后可以在線瀏覽。 2.4.1開發(fā)環(huán)境： JDK、Tomcat、MySQL和Eclipse 2.4.2 系統(tǒng)分析： 系統(tǒng)要實(shí)現(xiàn)的功能是有效性判斷以及相關(guān)對(duì)象的關(guān)聯(lián)關(guān)系，涉及到程序的算法，JAVA web中的對(duì)象認(rèn)識(shí)： 1. 整體風(fēng)格 2. 系統(tǒng)要實(shí)現(xiàn)的功能：用戶交互功能 3. 控件之間的邏輯關(guān)系 4. 程序算法 5. 客戶端開發(fā)技術(shù)中對(duì)象的認(rèn)識(shí) 6. 界面設(shè)計(jì)：有效性、交互性 7. 代碼設(shè)計(jì)： 剪裁圖片的代碼如下：

36、ut type="hidden" name="picture" value="<%=picUrl%>" />

圖片實(shí)際寬度：
圖片實(shí)際高度：

37、ue="1" id="txt_height" />
距離頂部：
距離左邊：
截取框的寬：
截取框的高：
放大倍數(shù)：

用判斷函數(shù)equals,來比較servlet請(qǐng)求轉(zhuǎn)發(fā)的值是否與設(shè)定值相等，從而實(shí)現(xiàn)js的觸發(fā)，其代碼如下： <% if (null == picUrl || "".equals(picUrl)) { %> <% } else if (!"".equals(picUrl) && "3".equals(step)) { %> <% } %> 2.4.3功能實(shí)現(xiàn)： ZoomImageDemo程序，出現(xiàn)

40、如下頁面: 單擊上傳圖片,進(jìn)入選擇上傳照片界面，點(diǎn)擊瀏覽，選擇要上傳的照片，如下圖所示： 選擇的要上傳的照片，拖動(dòng)照片或單擊照片下方的放大、縮小按鈕剪裁你滿意的頭像，剪裁完成后，點(diǎn)擊保存頭像，保存后的頭像如下圖所示： 打開瀏覽器，實(shí)現(xiàn)在線瀏覽保存后上傳的照片，操作結(jié)果如下圖所示： 第三 實(shí)訓(xùn)心得 為了提高我們的實(shí)踐能力，讓我們學(xué)以致用，能夠靈活的運(yùn)用所學(xué)的知識(shí)，本課設(shè)進(jìn)行本學(xué)期最后的JSP課程設(shè)計(jì)，在老師的幫助下，我們有了很大的進(jìn)步。通過實(shí)訓(xùn)周對(duì)應(yīng)用程序的練習(xí)，我對(duì)本學(xué)期java web 課程的學(xué)習(xí)有了更深刻的總結(jié)。在開發(fā)軟件過程中，首先思考要實(shí)現(xiàn)整個(gè)程序需要的各個(gè)模塊和其中用到的JSP語言級(jí)別操作符、JavaBean、數(shù)據(jù)庫等。用流程圖的形式展現(xiàn)我的基本編程思想，能夠保持思想的清晰，有利于工作的進(jìn)行。在編輯程序代碼時(shí)反復(fù)不斷的改進(jìn)以達(dá)到預(yù)期的效果。在進(jìn)行調(diào)試時(shí)，要有耐心，利用所學(xué)的知識(shí)點(diǎn)不斷地完善。 通過此次課程設(shè)計(jì)，我認(rèn)識(shí)到開發(fā)一項(xiàng)好的軟件不是一件簡單的事，它使我可以更加熟練的掌握了這門課程的基礎(chǔ)知識(shí)，對(duì)它的應(yīng)用有了深層次的理解，大大的提高了我的動(dòng)手能力，切實(shí)的學(xué)習(xí)到了很多解決問題的能力。我相信只要努力堅(jiān)持不懈，就沒有做不到的事。