1、Java Web開發技術開發技術第第7章章 JSP綜合應用實例綜合應用實例（一）（一）JAVA WEB編程編程本章教學目標本章教學目標 l學會使用JSP+JavaBean模式實現綜合化較強的應用系統。l鞏固掌握全期所學知識。JAVA WEB編程編程7.1 網上書店系統功能網上書店系統功能l本系統構建一個全面的網上購物系統。該系統中包括用戶注冊、用戶登錄、書目瀏覽、訂購圖書、查看訂單、修改訂單、修改密碼和信息等功能。(1)用戶注冊：新用戶填寫表單，包括用戶名、E-mail等信息。如果輸入的用戶名已經被其他用戶注冊使用，系統提示用戶更改用戶名。(2)用戶登錄：輸入用戶名、密碼、驗證碼，如果登錄成功

2、，用戶被連接到“訂單圖書”頁面。(3)書目瀏覽：用戶可以分頁瀏覽圖書書目。JAVA WEB編程編程7.1 網上書店系統功能網上書店系統功能(4)訂購圖書：成功登錄的用戶可以在該頁面訂購所需要的圖書。如果用戶直接進入該頁面或沒有成功登錄就進入該頁面，將被連接到“用戶登錄”頁面。(5)查看訂單：成功登錄的用戶可以在該頁面查看自己的訂單。如果用戶直接進入該頁面或沒有成功登錄就進入該頁面，將被連接到“用戶登錄”頁面。(6)修改訂單：成功登錄的用戶可以在該頁面刪除自己的訂單。如果用戶直接進入該頁面或沒有成功登錄就進入該頁面，將被連接到“用戶登錄”頁面。JAVA WEB編程編程7.1 網上書店系統功能網上

3、書店系統功能(7)修改密碼：成功登錄的用戶可以在該頁面查看自己的登錄密碼。如果用戶直接進入該頁面或沒有成功登錄就進入該頁面，將被連接到“用戶登錄”頁面。(8)修改個人信息：可以修改密碼和用戶名以外的個人信息。JAVA WEB編程編程7.2 數據庫設計數據庫設計l本系統使用SQL SEVER2005建立一個數據庫bookstore。建有注冊信息表(userinfo)、書目表(book)和訂單表(orderform)。各表結構及表間關系如下頁圖所示。為bookstore數據庫創建一個ODBC數據源shop。圖1 userinfo表圖2 book表圖3 orderform表圖4 表間關系圖JAVA

4、WEB編程編程7.3 頁面設計頁面設計l本系統所有頁面都將包含一個導航條，該導航條由用戶注冊、用戶登錄、書目瀏覽、訂購圖書、修改密碼、修改訂單、查看訂單組成。各頁面通過使用JSP的標記將導航條文件head.jsp嵌入自己的頁面。l樣式表樣式表css.css代碼：body font-family: Arial, Helvetica, sans-serif;font-size:20td font-family: Arial, Helvetica, sans-serif;th font-family: Arial, Helvetica, sans-serif;a font-family: 宋體;fo

5、nt-size: 14px;font-style: normal;line-height: normal;font-weight: normal;font-variant: normal;text-transform: capitalize;color: #CCCCCC;text-decoration: blink;#Layer3background-color:#33FFFF;text-align:left;padding-top:15px;padding-bottom:15px;font-size:14px#Layer3 atext-decoration:none;font-size:18

6、px#Layer3 a:linkcolor:#0066FF#Layer3 a:visitedcolor:#0066FF#Layer3 a:hovercolor:#FF0000;font-weight:bold;background-color:#FFFF00lhead.jsp代碼：代碼： a href=商品瀏覽 | a href=用戶注冊 | a href=用戶登錄 | a href=定購商品 | a href=修改定單 | a href=查看定單| a href=修改密碼 | a href=修改個人信息 | JAVA WEB編程編程7.3.1 主頁主頁l主頁bookmain.jsp由導航條和

7、一個歡迎語組成。效果如下圖所示。lbookmain.jsp代碼： 歡迎光臨網上書店JAVA WEB編程編程7.3.2 用戶注冊用戶注冊l一、用戶的注冊信息需要存入userinfo表中，并用用到名為Rsgister.java的JavaBean文件。 Rsgister.java主要完成加載橋接器實現與數據庫的連接、設置屬性值、獲取屬性值、添加記錄到數據庫的user表。（本項目所有JavaBean均放在包a1中）lRsgister.java代碼：package a1;import java.sql.*;public class Register String logname, realname, p

8、assword, email, phone, address; String message; Connection con; Statement sql; ResultSet rs; public Register() /加載橋接器： tryClass.forName(sun.jdbc.odbc.JdbcOdbcDriver); catch(ClassNotFoundException e)message=error1; /設置屬性值、獲取屬性值的方法： public void setLogname(String name) logname=name; public String getLo

9、gname() return logname; public void setRealname(String name) realname=name; public String getRealname() return realname; public void setPassword(String pw) password=pw; public String getPassword() return password; public void setEmail(String em) email=em; public String getEmail() return email; publi

10、c void setPhone(String ph) phone=ph; public String getPhone() return phone; public void setAddress(String ad) address=ad; public String getAddress() return address; public String getMessage() return message; /添加記錄到數據庫的user表： public void addItem() try con=DriverManager.getConnection(jdbc:odbc:shop,);

11、 sql=con.createStatement(); String s= +logname+,+realname+,+password+,+email+,+phone+,+address+; String condition=INSERT INTO userinfo VALUES+(+s+); sql.executeUpdate(condition); message=注冊成功了; con.close(); catch(SQLException e) message=你還沒有注冊，或該用戶已經存在，請你更換一個名字; JAVA WEB編程編程7.3.2 用戶注冊用戶注冊l二、注冊頁面user

12、Register首先通過表單輸入用戶信息，提交信息時需對表單數據進行校驗，當表單數據校驗通過后，使用registerCheck.jsp文件處理表單數據，在該文件中通過動作標記設置為Bean Register.java的屬性，并調用Bean的addItem()方法將用戶的注冊信息存入數據表userinfo中。圖5 用戶注冊頁面luserRegister.jsp代碼：代碼：function check()logname=document.form2.logname.value;realname=document.form2.realname.value;password=document.form

13、2.password.value;password2=document.form2.password2.value;email=document.form2.email.value;phone=document.form2.phone.value;address=document.form2.address.value;if(logname=|logname=null) alert(用戶名不能為空！) form2.logname.focus(); return false;if(realname=|realname=null) alert(真實姓名不能為空！) form2.realname.f

14、ocus(); return false; if(password=|password=null) alert(密碼不能為空！); form2.password.focus(); return false;if(password2=|password2=null) alert(請輸入確認密碼！); form2.password2.focus(); return false;if(password!=password2) alert(確認密碼錯誤！); form2.password2.focus(); return false; if(email=|email.indexOf(com)=-1|e

15、mail.indexOf()=-1|email.indexOf(.)=-1) alert(請正確輸入你的Email址！);form2.email.focus();return false; if(phone=|phone=null) alert(請輸入你的聯系電話！);form2.phone.focus();return false; if(phone.length14|isNaN(phone) alert(你輸入的號碼有誤！);form2.phone.focus(); return false; if(address=|address=null) alert(請輸入你的地址！);form2.address.focus();return false; return true;輸入您的信息，帶*號項必須填寫：登錄名稱*真實姓名*設置密碼*確認密碼*電子郵件*聯系電話*通信地址*              lregisterCheck.jsp代碼： jsp:setProperty name= login property=logname value= / jsp:setProperty name