หน้าแรก>บทช่วยสอนการเขียนโปรแกรมเครือข่าย>การสอน JSP

หน้าเข้าสู่ระบบ JSP จริงของ JBuilder2005 (2)

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-07-02 17:10:51
ผ่านไฟล์->ใหม่...->เว็บ->ดับเบิลคลิกไอคอน JSP กล่องโต้ตอบสำหรับการสร้างวิซาร์ด JSP จะปรากฏขึ้น ดังแสดงในรูปต่อไปนี้:


รูปที่ 3 สร้าง Login.jsp ผ่านวิซาร์ด

·โมดูลเว็บ: หากมีเว็บโมดูลหลายตัวภายใต้โปรเจ็กต์ คุณสามารถระบุเว็บโมดูลที่จะเพิ่ม JSP ที่นี่ได้ เนื่องจากมี webModule เดียวในโปรเจ็กต์ของเรา วิซาร์ดจะตั้งค่าเป็น webModule ตามค่าเริ่มต้น

·ชื่อ: พิมพ์ชื่อไฟล์ JSP คุณสามารถพิมพ์ส่วนต่อท้าย .jsp หรือคุณสามารถพิมพ์ล็อกอินโดยตรงโดยไม่ต้องมีส่วนต่อท้าย

หลังจากเลือกตัวเลือก Generate Sample bean แล้ว JBuilder จะสร้าง Bean ตัวอย่างและแนะนำ Bean ใน JSP สำหรับผู้เริ่มต้น คุณสามารถใช้ตัวเลือกนี้เพื่อดูว่า JSP อ้างอิง Bean อย่างไร และตัวเลือกสร้างหน้าข้อผิดพลาดจะสร้างข้อผิดพลาดที่ตรงกันในการจัดการไฟล์ JSP สำหรับ JSP ในที่นี้ เราจะไม่ตรวจสอบพวกเขา

คลิก เสร็จสิ้น โดยตรงเพื่อสร้าง Login.jsp ไฟล์ Login.jsp ปรากฏในคอมไพเลอร์ของบานหน้าต่างเนื้อหา ดังแสดงในรูปต่อไปนี้:


รูปที่ 4 ไฟล์ JSP ที่สร้างโดยวิซาร์ด

มีหน้าต่างหนึ่งที่ด้านซ้ายและด้านขวาของหน้าต่างการคอมไพล์ JSP ที่สามารถส่งผ่านได้ และ แถบแนวตั้งที่ควบคุมโดยปุ่ม คอลัมน์ด้านซ้ายเป็นแผงสำหรับวางแท็ก JSP และแท็ก HTML คุณสามารถลากและวางแท็กต่างๆ ลงในไฟล์ JSP ได้เช่นเดียวกับในตัวออกแบบ Visual UI แบบฟอร์มจากแผงควบคุม แท็ก HTML ถูกวางไว้ในไฟล์ login.jsp

คอลัมน์แนวตั้งทางด้านขวาคือคอมไพลเลอร์แอ็ตทริบิวต์ของเลเบลโดยที่เคอร์เซอร์ปัจจุบันอยู่ในไฟล์ JSP ดังแสดงในรูปต่อไปนี้:


รูปที่ 5 ตั้งค่าตัวแก้ไขแอตทริบิวต์แท็ก JSP

ตัวแก้ไขคุณสมบัติเป็นไดนามิก เมื่อเคอร์เซอร์ถูกย้ายไปยังเลเบลอื่น ตัวแก้ไขคุณสมบัติจะแสดงคุณสมบัติที่สามารถตั้งค่าได้ทั้งหมดของเลเบลนี้ ดังแสดงในรูปด้านบน มันสอดคล้องกับตัวแก้ไขแอตทริบิวต์ของแท็กรูปแบบ HTML เราตั้งค่าแอตทริบิวต์การกระทำเป็น switch.jsp และกำหนดให้ใช้ POST เพื่อส่งข้อมูลคำขอ

เรามีกล่องแบบเลื่อนลงชื่อผู้ใช้ ช่องป้อนรหัสผ่าน และปุ่มส่งการเข้าสู่ระบบใน login.jsp รหัสมีดังนี้:

รายการรหัส 4 login.jsp

1. ＜%@page contentType="text/html; charset=GBK" %><
2. <html>
3. ＜หัว><
4. ＜title><เข้าสู่ระบบ＜/title>
5. ＜/หัว><
6. ＜body bgcolor="#ffffff">
7. ＜Form name="Form 1" method="post" action="switch.jsp">>
8. ชื่อผู้ใช้: <select name="userId">
9. ＜option value="" ที่เลือกแล้ว>--ผู้ใช้ที่เข้าสู่ระบบ--＜/option>
10. ＜option value="100000"">เจียง จื่อหยา</option>
11. ＜option value="100001"><เปา ชูยะ</option>
12. ＜option value="100002"><ฟันแนวตั้ง</option>
13. ＜/เลือก><
14. รหัสผ่าน: <input name="password" type="password">
15. ＜input type="submit" name="Submit" value="Login">
16. ＜/แบบฟอร์ม><
17. ＜/ตัว><
18. ＜/html>

แท็กแบบฟอร์มแสดงถึงแบบฟอร์มในหน้าเว็บ แบบฟอร์มสามารถมีหลายองค์ประกอบ หลังจากส่งแบบฟอร์มบนเว็บแล้ว ข้อมูลของส่วนประกอบเหล่านี้จะถูกส่งไปยังไฟล์ JSP ที่ระบุโดยแอตทริบิวต์การดำเนินการผ่านโปรโตคอล HTTP เพื่อการประมวลผล โดยทั่วไปข้อมูลแบบฟอร์มจะถูกส่งผ่าน POST วิธีการส่งแบบ POST ไม่มีการจำกัดจำนวนข้อมูลและจะเป็นความลับมากกว่า

หน้าเอฟเฟกต์ของ login.jsp มีดังต่อไปนี้:


รูปที่ 6 หน้ารายการ Login.jsp

ประสบการณ์จริง:

โค้ดไฟล์ JSP ประกอบด้วยส่วนที่คงที่และไดนามิก นั่นคือ ส่วนหนึ่งคือโค้ด HTML และอีกส่วนหนึ่งคือแท็ก JSP และโค้ด Scriptlet โดยทั่วไป JSP จะเป็นเว็บเพจที่มีตรรกะแบบไดนามิก JBuilder รองรับส่วนโค้ดแบบไดนามิก เช่น แท็ก JSP และ Scriptlets ได้เป็นอย่างดี คุณสามารถใช้เครื่องมือต่างๆ เช่น CodeInsight และ TagInsight เพื่อเขียนโค้ดให้เสร็จสมบูรณ์ได้อย่างรวดเร็วและถูกต้อง และคุณยังสามารถคอมไพล์และดีบัก JSP ได้อีกด้วย ในแง่ของการเขียนโค้ด HTML แบบคงที่และการออกแบบภาพ JSP ดูเหมือนว่า JBuilder จะไม่เพียงพอ Dreamweaver เห็นได้ชัดว่าดีกว่า JBuilder ในด้านโค้ดแบบคงที่และการออกแบบภาพ

ความซับซ้อนของสิ่งต่าง ๆ ส่งเสริมการแบ่งงาน และการแบ่งงานที่ดีส่งเสริมการพัฒนาทางวิชาชีพ เมื่อเขียน JSP ไม่ใช่ว่าเมื่อคุณมี JBuilder แล้ว คุณจะไม่มีอะไรทำอีกต่อไป Han Xinshanbing และ Xiao Heshanmou หากคุณสามารถรวม Dreamweaver และ JBuilder ได้ ใช้ Dreamweaver เพื่อพัฒนาส่วนที่มองเห็นได้ของ JSP และใช้ JBuilder เพื่อพัฒนาส่วนโค้ดไดนามิกของ JSP ทั้งสองจะเสริมซึ่งกันและกันและเสริมซึ่งกันและกัน และ JSP งานพัฒนาจะมีความคล่องตัวมากขึ้น

เปลี่ยนรายชื่อผู้ใช้เป็นไดนามิก

Login.jsp ที่สร้างขึ้นในปัจจุบันมีข้อบกพร่อง สมมติว่าเมื่อเพิ่มผู้ใช้รายอื่นในตาราง T_USER ในพื้นหลังฐานข้อมูล เนื่องจากกล่องดรอปดาวน์ชื่อผู้ใช้เป็นรหัสคงที่ ผู้ใช้ที่สร้างขึ้นใหม่จะไม่ปรากฏบนเพจ ดังนั้น จำเป็นต้องเพิ่มผู้ใช้ รายชื่อถูกเปลี่ยนเป็นโค้ดไดนามิกและบันทึกของตารางฐานข้อมูล T_USER ถูกใช้เพื่อสร้างข้อมูลของกล่องแบบเลื่อนลงแบบไดนามิก

เราทำงานนี้ให้เสร็จสิ้นผ่านคลาส UserList.ava และสร้าง UserList.java ในโครงการ โดยมีโค้ดดังนี้:

รายการรหัส 5 UserList.java

1. ร้านหนังสือแพ็คเกจ
2. นำเข้า java.sql.*;
3.
4. UserList ระดับสาธารณะ
5. {
6. //รับรหัสรายการผู้ใช้ของช่อง HTML แบบเลื่อนลง
7. สตริงสาธารณะ getUserListHTML() {
8. การเชื่อมต่อการเชื่อมต่อ = null;
9. StringBuffer sBuf = StringBuffer ใหม่();
10. ลอง {
11. conn = DBConnection.getConnection();
12. ReadyStatement pStat = conn.prepareStatement(
13. "เลือก USER_ID,USER_NAME จาก T_USER");
14. ResultSet rs = pStat.executeQuery();
15. ในขณะที่ (rs.next()) {
16. sBuf.append("＜option value='" + rs.getString("USER_ID") + "'>" +
17. rs.getString("USER_NAME") + "＜/option">n");
18. }
19. กลับ sBuf.toString();
20. } จับ (เช่น SQLException) {
21. อดีตprintStackTrace();
22. กลับ "";
23. } ในที่สุด {
24. ลอง {
25. ถ้า (conn != null) {
26. conn.ปิด();
27. conn = โมฆะ;
28. }
29. } จับ (SQLException ex1) {
30. }
31. }
32. }
33. }

UserList.java จัดเตรียมเฉพาะเมธอด getUserListHTML() แบบคงที่ ซึ่งรับบันทึกผู้ใช้จากตาราง T_USER ในฐานข้อมูลแบ็กเอนด์ และสร้างโค้ดตัวเลือกสำหรับส่วนประกอบการเลือก HTML ดังแสดงในบรรทัดที่ 16 ถึง 17

หลังจากสร้างคลาสนี้แล้ว เราจะอ้างอิงถึงคลาสนี้เพื่อปรับโค้ดของ login.jsp ขั้นแรก อ้างอิงคลาส UserList ผ่านแอตทริบิวต์การนำเข้าในแท็กคำสั่งของหน้า จากนั้นปรับเนื้อหาในตัวเลือกการเลือกให้เป็นค่าที่ส่งคืนโดย เมธอด getUserListHTML() ดังแสดงในรูปด้านล่าง แสดง:


รูปที่ 7 การเขียนโค้ดผ่าน CodeInsight

แทนที่โค้ด HTML แบบคงที่ดั้งเดิมผ่านแท็กนิพจน์ เป็นที่น่าสังเกตว่าคุณสามารถใช้ CodeInsight เพื่อป้อนโค้ดใน JSP ได้เหมือนกับการเขียนคลาส Java ทั่วไป โค้ดสำหรับ login.jsp ที่ปรับปรุงแล้วจะเป็นดังนี้ เป็นตัวหนา:

รายการรหัส 6: ปรับรหัส login.jsp

1. ＜%@page contentType="text/html; charset=GBK" import="bookstore.UserList" %>
2. <html>
3. ＜หัว><
4. ＜title><เข้าสู่ระบบ＜/title>
5. ＜/หัว><
6. ＜body bgcolor="#ffffff">
7. <Form name="Form 1" method="post" action="switch.jsp">ชื่อผู้ใช้:
8. ＜เลือกชื่อ="รหัสผู้ใช้">
9. ＜option value="" ที่เลือกแล้ว>--ผู้ใช้ที่เข้าสู่ระบบ--＜/option>
10. ＜%=UserList.getUserListHTML()%>
11. ＜/เลือก><
12. รหัสผ่าน: <input name="password" type="password">
13. ＜input type="submit" name="Submit" value="Login">
14. ＜/แบบฟอร์ม><
15. ＜/ตัว>
16. ＜/html>

หลังจากบันทึก Login.jsp แล้ว ให้คลิกขวาที่ป้ายกำกับไฟล์ Login.jsp ในบานหน้าต่างเนื้อหา และเลือก Web Run โดยใช้ Defaults ดังแสดงในรูปด้านล่าง แสดง:


รูปที่ 8 การรัน Login.jsp ใน JBuilder

JBuilder สลับไปที่เพจ Web View โดยอัตโนมัติเพื่อแสดงเอฟเฟกต์การทำงานของเพจ อย่างไรก็ตาม เบราว์เซอร์ของ JBuilder มีการรองรับหน้าเว็บที่อ่อนแอมาก และไม่รองรับสคริปต์ JavaScript ดังนั้น หลังจากรัน Login.jsp แล้ว จะเป็นการดีที่สุดที่จะดูผลกระทบของหน้าเว็บผ่าน IE คุณจะต้องเปิด IE และคัดลอกที่อยู่ของการเข้าถึง login.jsp ใน JBuilder ไปยังแถบที่อยู่ของ IE ดังที่แสดงใน รูปด้านล่าง:


รูปที่ 9 ใช้ IE เพื่อเข้าถึง login.jsp ที่รันใน JBuilder

ในขณะนี้ ผู้ใช้ในกล่องดรอปดาวน์ของชื่อผู้ใช้อยู่ในรายชื่อผู้ใช้แบบไดนามิกแล้ว เมื่อมีการเพิ่มหรือลบผู้ใช้ในตาราง T_USER ผู้ใช้ในกล่องดรอปดาวน์ก็จะเปลี่ยนแปลงตามไปด้วย

ก่อนที่จะรัน JSP ทางที่ดีควรคอมไพล์ไฟล์ JSP นี้แยกกัน: คลิกขวาที่ป้ายกำกับไฟล์ JSP ในบานหน้าต่างเนื้อหา และเลือก make "xxx.jsp" ในเมนูป๊อปอัปเพื่อทำการคอมไพล์ไฟล์ JSP ให้เสร็จสิ้นและค้นพบ มันผิดเวลา เมื่อแก้ไขไฟล์ JSP และไฟล์ Java ความแตกต่างที่ใหญ่ที่สุดคือข้อผิดพลาดใดๆ ในไฟล์โปรแกรม Java จะแสดงรายการอยู่ในบานหน้าต่างตัวแก้ไขและโครงสร้าง แต่ข้อผิดพลาดบางอย่างในไฟล์ JSP จำเป็นต้องได้รับการคอมไพล์จึงจะถูกค้นพบ

คำใบ้:

เนื่องจากการคอมไพล์ไฟล์ JSP จำเป็นต้องแปลงเป็นไฟล์ Servlet ก่อน จากนั้นจึงคอมไพล์ไฟล์ Servlet ระดับกลาง หากเกิดข้อผิดพลาด ไฟล์นั้นจะถูกเปลี่ยนเส้นทางไปยังไฟล์ JSP ดังนั้นการคอมไพล์ไฟล์ JSP จึงใช้เวลานานกว่าและมักจะใช้เวลานาน นานกว่าการคอมไพล์ไฟล์ Java หลายเท่า โดยดีฟอลต์ เมื่อคอมไพล์โปรเจ็กต์ JSP ทั้งหมดในโปรเจ็กต์ทั้งหมดจะถูกคอมไพล์ ซึ่งใช้เวลานาน ดังนั้นจึงเป็นการดีที่สุดที่จะยกเลิกการตั้งค่าของการคอมไพล์ไฟล์ JSP ร่วมกับโปรเจ็กต์การคอมไพล์: ผ่านโปรเจ็กต์->คุณสมบัติโปรเจ็กต์...->บิลด์-> ยกเลิกอ็อพชันตรวจสอบ JSP สำหรับข้อผิดพลาดในเวลาบิลด์ในหน้าการตั้งค่าบิลด์ เลือกตัวเลือกนี้เมื่อคุณต้องการมันจริงๆ และยกเลิกตัวเลือกนี้ทันทีหลังจากการคอมไพล์ การตั้งค่านี้จะทำให้คุณมีเวลาอันมีค่าในการพัฒนา
บทความที่เกี่ยวข้อง