Web 程序設計 JSP 實驗 第 1 頁 共 30 頁 WEBWEB 程序設計程序設計 JSP JSP 實驗實驗 計算機科學與信息學院 汪國武 實驗一實驗一 JSPJSP 實驗環境組建與簡單實驗環境組建與簡單 JSPJSP 應用應用 1 1 開發環境搭建開發環境搭建 Step1 Step1 安裝和設置安裝和設置 JDKJDK 以 jdk1 6 為例 安裝位置 C Program Files Java jdk1 6 0 12 創建環境變量 JAVA HOME 為 C Program Files Java jdk1 6 0 12 在建環境變量 PATH 中添加 JAVA HOME bin 創建環境變量 CLASSPATH JAVA HOME lib dt jar JAVA HOME lib tools jar Step2 Step2 安裝支持安裝支持 JSPJSP 的的 WebWeb 服務器服務器 以 Tomcat6 0 29 為例 安裝位置 d Tomcat6 Step3 Step3 安裝安裝 MyEclipseMyEclipse 安裝 MyEclipse7 0 Step4 Step4 設置設置 Tomcat Tomcat 可以從可以從 MyEclipseMyEclipse 中直接啟動中直接啟動 Tomcat6Tomcat6 操作步驟 操作步驟 Window Preferences MyEclipse Enterprise Workbench MyEclipse Servers Tomcat Tomcat6 x Tomcat Server 選擇 Enable Tomcat home directory d tomcat6 設置 Tomcat 運行使用的 JDK 展開 Tomcat6 x 單擊 JDK 單擊 tomcat JDK name 后的 Add 在打開的頁面中 單擊 JRE home 后的 Directory 按鈕 選擇輸入 C Program Files Java jdk1 6 0 12 2 2 開發和運行開發和運行 JSPJSP 程序程序 創建 Web 項目 File New Web Project 如 Myjsp 新建 JSP 文件 如 firstJsp jsp 編輯 JSP 文件 可借助 DreamWeaver 發布項目到 Tomcat 右擊項目名稱 Myjsp MyEclipse Add and Remove Project Deployments Project 選擇 Myjsp 項目 并單擊 Add 彈出 Project Deployments 對話框 在對話框中 選擇 server 為 Tomcat 6 x 并單擊 Finish 運行測試 啟動 Tomcat 6 x Web 程序設計 JSP 實驗 第 2 頁 共 30 頁 運行 JSP 文件 瀏覽器中輸入 http localhost 8080 Myjsp firstJsp jsp 3 3 編寫一個編寫一個 JavaScriptJavaScript 程序 在程序 在 JSPJSP 頁面上輸出當前日期 頁面上輸出當前日期 實驗二實驗二 JSPJSP 語法的應用語法的應用 實驗內容和要求 實驗內容和要求 1 實現客戶在一個登錄頁面 form jsp 如圖 2 1 輸入登錄信息并單擊 確定 后跳轉 到另一個頁面 doForm jsp 如圖 2 2 輸出 用戶名 和 口令 信息 圖 2 1 圖 2 2 要求 分別用下列三種方法實現 1 創建一個 JavaBean User 類 該類含有兩個屬性 username 和 password 給每個屬 性增加相應的 get 和 set 方法 在 doForm jsp 頁面中用動作標識實例 化 User 類對象 再使用動作標識來把客戶在 form jsp 表單中填 寫的值賦給對象 最后用在頁面輸出結果 2 創建一個 JavaBean User 類 該類含有兩個屬性 username 和 password 給每個屬 性增加相應的 get 和 set 方法 在 doForm jsp 頁面中采用 Java 以 jsp 腳本代碼 scriptlet 方式實例化 User 類對象 用 setAttribute 函數把對象寫入 request 或 session 中 再使用動作標識來把客戶在 form jsp 表單中填寫 的值賦給對象 最后用 jsp 表達式的方式把對象的信息輸出到頁面中 3 不創建 JavaBean User 類 在 doForm jsp 頁面中用 getParameter 來獲取客戶 在 form jsp 表單中填寫的值 最后輸出相關信息 實驗三實驗三 JSPJSP 內置對象的應用內置對象的應用 實驗內容和要求 實驗內容和要求 對實驗二的內容進行擴展 必須實現以下 4 個 jsp 文件 采用 jsp JavaBean 實現 1 login jsp 登錄頁面 如圖 2 1 所示 2 doLogin jsp 無界面 登錄處理頁面 假定正確的用戶名為 admin 口令為 123 如果用 Web 程序設計 JSP 實驗 第 3 頁 共 30 頁 戶名和口令不正確則顯示登錄錯誤信息 否則登錄成功后 重定向到 messageBoard jsp 留 言板頁面 可以進行留言 3 messageBoard jsp 留言板頁面 能實現如圖 3 1 所示的留言 圖 3 1 4 showMessage jsp 顯示留言信息頁面 如圖 3 2 所示 該頁面能顯示留言者 必須為 login jsp 頁面中輸入的用戶名 標題和內容 要求能正確顯示圖 3 1 所示的留言內容 提示 留言者的用 session 保存 Web 程序設計 JSP 實驗 第 4 頁 共 30 頁 圖 3 2 實驗四實驗四 ServletServlet 的應用的應用 實驗內容和要求 實驗內容和要求 用 Servlet 來完成實驗三的所有任務 即先登錄 然后留言 再顯示留言 采用 JSP JavaBean Servlet 開發模式 實驗步驟如下 1 創建登錄頁面創建登錄頁面 login jsp 用戶名 口 令 2 創建處理登錄的創建處理登錄的 Servlet DoLogin java 過程如下 過程如下 選擇項目中 src 文件夾 New Servlet 彈出 Create a new Servlet 對話框 設置如下 05 為項目名稱 Web 程序設計 JSP 實驗 第 5 頁 共 30 頁 單擊單擊 next 后 見下圖 只對后 見下圖 只對 Servlet Jsp Mapping URL 作如下修改 單擊作如下修改 單擊 finish Web 程序設計 JSP 實驗 第 6 頁 共 30 頁 此時此時 web xml 中應存在如下中應存在如下 Servlet 配置信息 配置信息 ServletExample firstServlet DoLogin servlet DoLogin DoLogin DoLogin 其中 其中 DoLogin行表明行表明 該該 Servlet 可以用這個可以用這個 URL 訪問訪問 http localhost 8080 05 DoLogin Web 程序設計 JSP 實驗 第 7 頁 共 30 頁 DoLogin java 代碼如下代碼如下 package servlet import java io IOException import java io PrintWriter import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import javax servlet http HttpSession public class DoLogin extends HttpServlet 因為登錄表單是以get方式提交的 所以重寫doGet方法 運行時調用此方法 public void doGet HttpServletRequest request HttpServletResponse response throws ServletException IOException String userName request getParameter username 獲取用戶名 HttpSession session request getSession session setAttribute name userName 用戶名寫入session 顯示留言時 showMessage jsp 需要 String passWord request getParameter password 獲取口令 if userName equals admin 重定向到留言頁面 else response sendError 500 登陸錯誤 用戶名或密碼不正確 3 創建留言頁面創建留言頁面 messageBoard jsp 留言標題 留言內容 Web 程序設計 JSP 實驗 第 8 頁 共 30 頁 4 4 創建創建值值 JavaBeanJavaBean Message javaMessage java 同同代碼代碼 3 53 5 5 5 創建創建工具工具 JavaBeanJavaBean Mytools javaMytools java 同代碼同代碼 3 63 6 6 創建創建處理留言的處理留言的 Servlet DoMessage java 如下圖 如下圖 Web 程序設計 JSP 實驗 第 9 頁 共 30 頁 DoMessage java 代碼如下 代碼如下 package servlet import java io IOException import java io PrintWriter import javax servlet RequestDispatcher import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse public class DoMessage extends HttpServlet 因為留言信息是以post方式提交的 所以重寫doPost方法 運行時調用此方法 public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException bean valuebean Message message new bean valuebean Message Web 程序設計 JSP 實驗 第 10 頁 共 30 頁 message setTitle request getParameter title 保存留言標題 message setContent request getParameter content 保存留言內容 request setAttribute msg message 將對象message保存到request中 下面2行實現轉發到showMessage jsp RequestDispatcher dispatcher request getRequestDispatcher showMessage jsp dispatcher forward request response 7 創建顯示留言頁面創建顯示留言頁面 showMessage jsp 顯示留言信息 留言者 留言標題 留言內容 Web 程序設計 JSP 實驗 第 11 頁 共 30 頁 實驗五實驗五 JSPJSP 訪問數據庫的應用訪問數據庫的應用 實驗要求 實驗要求 采用 JSP Servlet JavaBean 架構 設計通過下列 JSP 頁面訪問數據庫 如表 5 1 具 體要求如下 1 添加用戶頁面 AddUser jsp 如圖 5 1 所示 2 刪除用戶頁面 Delete jsp 如圖 5 1 所示 3 查找和修改用戶頁面 SearchAndModify jsp 如圖 5 3 所示 圖 5 1 添加用戶頁面 圖 5 2 刪除用戶頁面 Web 程序設計 JSP 實驗 第 12 頁 共 30 頁 圖 5 3 查詢和修改用戶頁面 實驗步驟如下 實驗步驟如下 1 準備需要訪問的數據庫 下載并安裝 MySQL5 0 Copy MySQL5 0 驅動 mysql connector java 5 0 8 bin jar 到 TOMCAT lib 文件夾 下 創建數據庫及表 數據庫的設計如下表 數據庫的設計如下表 數據庫采用 MySQL5 0 數據庫名 db 表名 user 用戶表 表 5 1 數據庫的用戶表 序號序號列名列名數據類型數據類型長度長度主鍵主鍵允許空允許空默認值默認值說明說明 1usernamevarchar40 是否用戶名 2passwordvarchar40 是口令 創建過程如下 創建過程如下 可選擇使用 MySQL 的數據庫管理和開發工具 Navicat 和 MySQL Front 等 Step1 進入 MySQL 程序的 MySQL Command Line Client 界面 如下圖所示 Web 程序設計 JSP 實驗 第 13 頁 共 30 頁 Step2 分別執行下列命令 支持中文支持中文 創建數據庫 創建數據庫 CREATE DATABASE db CHARACTER SET utf8 COLLATE utf8 general ci USE DB 建表建表 CREATE TABLE user username varchar 20 NOT NULL PRIMARY KEY password varchar 20 ENGINE InnoDB DEFAULT CHARSET utf8 2 開發過程如下 Step1 Step1 創建值創建值 JavaBean JavaBean User java User java 內容如下 內容如下 package valueBean public class User private String username 用戶名 private String password 口令 public User this username this password public void setUsername String username this username username public String getUsername return username public void setPassword String password this password password Web 程序設計 JSP 實驗 第 14 頁 共 30 頁 public String getPassword return password Step2 Step2 創建訪問數據庫的類創建訪問數據庫的類 AccessUserFromDB java AccessUserFromDB java 內容如下 內容如下 package toolBean db import java sql import valueBean User public class AccessUserFromDB private static Connection conn null private static Statement stmt null 構造函數中完成對數據庫進行初始化 public AccessUserFromDB 創建連接 conn this getConnection try 創建 Statement stmt conn createStatement catch SQLException e e printStackTrace 將對象 user 添加到表中 public void Add User user throws SQLException String sql INSERT INTO user username password VALUES user getUsername user getPassword stmt executeUpdate sql 根據用戶名 關鍵字 從數據庫刪除相應的記錄 public void Delete String username throws SQLException String sql Delete From user Where username username stmt executeUpdate sql 修改數據庫中的 user public void Update User user throws SQLException String sql UPDATE user set password user getPassword where username user getUsername stmt executeUpdate sql Web 程序設計 JSP 實驗 第 15 頁 共 30 頁 根據用戶名稱 關鍵字 從數據庫中查找記錄 并將找到的記錄寫入對象 user 中返 回 public User searchByUsername String username throws SQLException User user new User String sql select from user where username username ResultSet rs stmt executeQuery sql while rs next String name rs getString username if name equals username 將從數據庫查找得到的記錄存入對象 user 中 user setUsername name user setPassword rs getString password if rs null rs close return user return null 查找不到返回 null 根據用戶判斷該記錄是否存在 public boolean exists String username boolean rtn false try if searchByUsername username null rtn true catch SQLException e e printStackTrace return rtn 建立與數據的連接 private Connection getConnection String driverClass com mysql jdbc Driver String url 與創建數據庫的代碼結合 保證訪問數據庫時不出現亂碼 jdbc mysql localhost 3306 db useUnicode true String username root String password 123 Web 程序設計 JSP 實驗 第 16 頁 共 30 頁 try Class forName driverClass 加載數據庫驅動 catch ClassNotFoundException e e printStackTrace try conn DriverManager getConnection url username password 建立連 接 catch SQLException e e printStackTrace System out print 數據庫連接失敗 return conn 關閉與訪問數據庫有關連接 protected void finalize try if stmt null stmt close if conn null conn close catch SQLException e e printStackTrace Step3 Step3 創建創建 JSPJSP 文件以及相應的文件以及相應的 JavaBeanJavaBean 創建創建 添加用戶頁面添加用戶頁面 AddUser jsp AddUser jsp 代碼如下 代碼如下 添加用戶 添加用戶 Web 程序設計 JSP 實驗 第 17 頁 共 30 頁 用戶名 密碼 相應的添加用戶相應的添加用戶 Servlet AddUser java Servlet AddUser java 代碼如下 代碼如下 package servlet user import java io IOException import java io PrintWriter import java sql SQLException import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import toolBean db AccessUserFromDB import valueBean User public class AddUser extends HttpServlet public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException 返回上頁 String goBack 返回上頁 response setContentType text html charset gb2312 PrintWriter out response getWriter String username request getParameter username if username null username equals out print 用戶名不能為空 out print goBack Web 程序設計 JSP 實驗 第 18 頁 共 30 頁 String password request getParameter password User user new User user setUsername username user setPassword password AccessUserFromDB userDB new AccessUserFromDB if userDB exists user getUsername out print 用戶名已存在 out print goBack return try userDB Add user catch SQLException e e printStackTrace out print 添加失敗 e getLocalizedMessage out print goBack return out print 添加成功 out print goBack out close 創建刪除用戶頁面創建刪除用戶頁面 Delete jsp Delete jsp 代碼如下 代碼如下 刪除用戶 刪除用戶 Web 程序設計 JSP 實驗 第 19 頁 共 30 頁 輸入刪除的用戶名 相應的刪除用戶相應的刪除用戶 ServletServlet DeleteUser java DeleteUser java 的代碼 如下 的代碼 如下 package servlet user import java io IOException import java io PrintWriter import java sql SQLException import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import toolBean db AccessUserFromDB import valueBean User public class DeleteUser extends HttpServlet public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException 返回上頁 String goBack 返回上頁 response setContentType text html charset gb2312 PrintWriter out response getWriter String username request getParameter username if username null username equals out print 用戶名不能為空 out print goBack AccessUserFromDB userDB new AccessUserFromDB if userDB exists username Web 程序設計 JSP 實驗 第 20 頁 共 30 頁 out print 用戶名不存在 out print goBack return try userDB Delete username catch SQLException e e printStackTrace out print 刪除失敗 e getLocalizedMessage out print goBack return out print 刪除成功 out print goBack out close 創建查找和修改頁面創建查找和修改頁面 SearchAndModify jsp SearchAndModify jsp 代碼如下 代碼如下 查詢和修改用戶 Web 程序設計 JSP 實驗 第 21 頁 共 30 頁 查詢和修改用戶 輸入查詢的用戶名 用戶名 input name modfyName type text value readonly readonly 密碼 input name password type text value 刪除用戶 添加用戶 修改用戶的修改用戶的 ServletServlet ModifyUser java ModifyUser java 代碼如下 代碼如下 package servlet user import java io IOException import java io PrintWriter import java sql SQLException import javax servlet ServletException import javax servlet http HttpServlet import javax servlet http HttpServletRequest import javax servlet http HttpServletResponse import valueBean User public class ModifyUser extends HttpServlet public void doPost HttpServletRequest request HttpServletResponse response throws ServletException IOException Web 程序設計 JSP 實驗 第 22 頁 共 30 頁 返回上頁 String goBack 返回上頁 response setContentType text html charset gb2312 PrintWriter out response getWriter String name request getParameter modify if name null 單擊了 修改用戶 String username request getParameter modfyName String password request getParameter password User user new User user setUsername username user setPassword password toolBean db AccessUserFromDB dbUser new toolBean db AccessUserFromDB try dbUser Update user catch SQLException e e printStackTrace out print 修改失敗 e getLocalizedMessage out print goBack return out print 修改成功 out print goBack out close 思考題 思考題 1 當數據庫中存貯中文信息時 如何在 jsp 頁面中顯示中文 2 考慮將添加 刪除 查找 所有 用戶及修改用戶集成到一個 JSP 頁面中 實驗六實驗六 JSPJSP 訪問數據庫的綜合應用訪問數據庫的綜合應用 實驗內容和要求 實驗內容和要求 對實驗五作進一步的改進 完成實驗五中的思考題 1 和 2 實現結果如圖 6 1 所示 具體如下 輸入用戶名和口令 查詢結果顯示在表中 不輸入任何內容查找則顯示所有用戶 單擊 刪除 將先進行確認再作刪除 單擊 修改 將進入修改頁面對所在行的用戶信息作 修改 Web 程序設計 JSP 實驗 第 23 頁 共 30 頁 圖 6 1 實驗內容和要求 實驗內容和要求 在完成實驗五任務的基礎上 作如下改動 Step1 將處理數據庫的將處理數據庫的 AccessUserFromDB 中的 private Connection getConnection 改為 public static Connection getConnection 目的是方便調用獲取數據庫的連接 Step2 添加包含增刪改查的頁面 ShowAllUsers jsp 代碼如下 用戶名 密碼 Web 程序設計 JSP 實驗 第 24 頁 共 30 頁 用戶名 口令 表中內容 得到查找的用戶和口令值 String username request getParameter username String password request getParameter password 得到查找的SQL String sql select from user where 1 1 if username if password 獲取連接 Connection conn AccessUserFromDB getConnection 向數據庫發送SQL指令 Statement stmt conn createStatement 執行指令并得到結果 ResultSet rs stmt executeQuery sql 處理結果 while rs next String name rs getString username 支持顯示中文用戶名 if name 支持顯示中文口令 String pass rs getString password if pass 輸出一行4列 out print out print name out print pass 刪除 需要確認 out print 刪除 修改 out print 修改 Web 程序設計 JSP 實驗 第 25 頁 共 30 頁 out print if rs null rs close 添加用戶 Step3 將 DeleteUser java 中的函數名doPost 改名為 DoGet 實驗七實驗七 StrutsStruts 入門入門 實驗內容和要求 實驗內容和要求 用 Struts 來完成實驗三的所有任務 即先登錄 然后留言 再顯示留言 要求登錄處 理和留言處理均用 Struts 實現 參考答案 參考答案 準備 新建一個 web 項目 添加 Struts 支持 右擊項目名稱 MyEclipse Add Struts Capabilities 1 實現登錄處理 Step1 打開 struts config xml 文件 切換到 design 視圖 在其區域任一位置右擊 New Form Action and JSP 打開創建 FormBean 對話框 如圖 7 1 Use case 輸入 login 然后選定下方的 Form Properties 標簽 并單擊 Add 添加 username 和 password 兩個屬性 結果見圖 7 1 選定 JSP 標簽 設置如圖 7 2 之后 單擊 next 按鈕 進入創建 Action 對話框 如圖 7 3 選定 Forwards 標簽 創建登錄成功 succ 和失敗 fail 如圖 7 4 兩個 Forward 創建 結果如圖 7 5 實現 LoginAction 中的 execute 方法 public ActionForward execute ActionMapping mapping ActionForm form HttpServletRequest request HttpServletResponse response LoginForm loginForm LoginForm form if loginForm getUsernam