Javaee สถาปัตยกรรมสามชั้นใช้การสืบค้น Ajax Pagination
สภาพแวดล้อมการพัฒนา:
ขั้นตอนที่ 1: การเตรียมการใช้รหัส
มีโพสต์มากมายบนอินเทอร์เน็ตเมื่อพัฒนางานการกำหนดค่าเบื้องต้นในแนวคิดดังนั้นฉันจะไม่ทำซ้ำที่นี่ ฉันพูดถึงสามคะแนนเป็นหลัก
ในการกำหนดค่าเซิร์ฟเวอร์คุณต้องเลือกคลาสอัปเดตและทรัพยากรสำหรับสองรายการในกล่องสีแดง หลังจากเลือกคุณสามารถปรับใช้ร้อนได้
เพื่อเติมชื่อโครงการที่นี่ เป็นเส้นทางรากของโครงการ
วิธีการนำเข้าแพ็คเกจ JAR จะแสดงในรูป คลิกการลงชื่อเข้าใช้การลงชื่อเข้าใช้และเลือกโฟลเดอร์ LIB ที่คุณสร้างขึ้น
นำเข้าแพ็คเกจขวดที่เกี่ยวข้อง: แพ็คเกจ Jar C3P0, แพ็คเกจ Jar คลาส DBUTILS, แพ็คเกจ JAR FASTJSON, แพ็คเกจ JAR ไดรเวอร์ MySQL
เขียนข้อมูลต่อไปนี้ในตารางผลิตภัณฑ์ของฐานข้อมูล test03
การรับช่วงโครงการในแนวคิดและการนำเข้าการกำหนดค่าพูลการเชื่อมต่อ C3P0
โปรดทราบว่าควรแก้ไขไฟล์การกำหนดค่า C3P0 เป็นชื่อฐานข้อมูลและรหัสผ่านฐานข้อมูลของตนเอง
ในแพ็คเกจโดเมนสร้างคลาสเอนทิตีผลิตภัณฑ์เขียนคุณสมบัติที่เกี่ยวข้องในคลาสผลิตภัณฑ์ตามฟิลด์ของตารางผลิตภัณฑ์ในฐานข้อมูล สร้างวิธีการตั้งค่า
สร้างคลาสเครื่องมือเพื่อรับวัตถุพูลการเชื่อมต่อ
ขั้นตอนที่ 2: สอบถามข้อมูลผลิตภัณฑ์ทั้งหมดโดยไม่ต้องเพจ
แนวคิดการใช้งาน:
jsp/html -----> servlet (เว็บเลเยอร์จัดการข้อมูลคำขอและการตอบกลับ) -----------------> บริการ (ลอจิกการประมวลผลเลเยอร์บริการ) -------------------> Dao (Dao Layer จัดการฐานข้อมูลการดำเนินงาน)
สร้างหน้าผลิตภัณฑ์และส่งคำขอไปยังเซิร์ฟเวอร์ (รับข้อมูลผลิตภัณฑ์ทั้งหมด)
ส่วนหน้าใช้การพัฒนาที่ตอบสนองต่อ bootstrap ซึ่งสามารถทำให้หน้าสวยงามยิ่งขึ้นและการพัฒนาก็สะดวกยิ่งขึ้น
รหัสสำหรับข้อมูลหน้ามีดังนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> รายการแสดงผลิตภัณฑ์ </title> <!-แนะนำไฟล์ที่เกี่ยวข้องกับ bootstrap-> <link rel = "stylesheet" href = "/ajax_product/bootstrap/css rel = "external nofollow"> <script type = "text/javascript" src = "/ajax_product/bootstrap/js/jQuery-1.11.3.js"> </script> <script type = "text/javascript" src = "/ajax_product/bootstrap/js/js/js/js/js type = "text/javascript"> // เมื่อหน้ากำลังโหลดคำขอจะถูกส่งไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลผลิตภัณฑ์ทั้งหมด $ (function () { - - - - // วิเคราะห์ข้อมูลทั้งหมดที่ส่งจากเซิร์ฟเวอร์ // ======================================================= แสดงข้อมูลผลิตภัณฑ์ไปยังผลิตภัณฑ์ VAR ของตาราง = $ ("<tr> <td>"+ผลิตภัณฑ์ [i] .id+"</td> <td>"+ผลิตภัณฑ์ [i] .name+"</td> <td>"+ผลิตภัณฑ์ [i] .count+"</td> <td>" $ ("#tab"). ภาคผนวก (protd);}}, "json")}) </script> <body> <h3 align = "center"> การแสดงผลิตภัณฑ์ส่งเสริมการขาย </h3> <div> <! id = "แท็บ"> <tr> <th> หมายเลข </th> <th> ชื่อผลิตภัณฑ์ </th> <th> ปริมาณ </th> <th> ปริมาณผลิตภัณฑ์ </th> <th> ราคาหน่วยผลิตภัณฑ์ </th> </tr> </table> </div> </div> </div> </body>สร้าง servlet เพื่อรับคำขอและรับข้อมูลผลิตภัณฑ์ทั้งหมด
ในความคิดให้สร้าง servlet ดังแสดงในรูปต่อไปนี้
สร้างคำอธิบายประกอบโดยอัตโนมัติโดยไม่ตรวจสอบที่นี่
หลังจากคลิกตกลงไอเดียจะข้ามไปที่ไฟล์ web.xml โดยอัตโนมัติและเขียนชื่อเส้นทางเต็มของ servlet โดยอัตโนมัติเพียงเขียนรูปแบบ url
โปรดทราบว่าต้องเขียน URL-PATTYN ที่สอดคล้องกับ servlet ในคำขอ AJAX
รหัสของ Web Layer Servlet มีดังนี้:
แพ็คเกจ com.thc.web; นำเข้า com.alibaba.fastjson.jsonobject; นำเข้า com.thc.service.productservice; นำเข้า Javax.servlet.servletexception; นำเข้า Javax.servlet.http.httpservlet; javax.servlet.http.httpservletResponse; นำเข้า java.io.ioexception; นำเข้า Java.sql.sqlexception; นำเข้า java.util.list; ผลิตภัณฑ์ระดับสาธารณะขยาย httpservlet {protected void dopost // จัดการคำขอรหัสที่อ่านไม่ออก Setcharacterencoding ("UTF-8"); Response.setContentType ("ข้อความ/html; charset = utf-8"); // เนื่องจากแสดงข้อมูลผลิตภัณฑ์ทั้งหมดจึงไม่มีพารามิเตอร์ที่จะรับ // เลเยอร์บริการจำเป็นต้องเรียกวิธีการเพื่อค้นหาข้อมูลทั้งหมดรับผลลัพธ์และตอบสนองต่อบริการลูกค้าบริการลูกค้า = ใหม่ Productservice (); ลอง {// โทรหาวิธีการของเลเยอร์ธุรกิจเพื่อรับรายการผลิตภัณฑ์ทั้งหมด <com.thc.domain.product> allprouct = service.findallprouct (); // แปลงข้อมูลที่ได้รับเป็นสตริงข้อมูลประเภท JSON jsonstring = jsonobject.tojsonstring (AllProuct); // เขียนกลับไปที่เบราว์เซอร์ response.getWriter () เขียน (jSonstring); } catch (sqlexception e) {e.printstacktrace (); }} void doget ที่ได้รับการป้องกัน (คำขอ httpservletRequest, การตอบสนอง httpservletResponse) พ่น servletexception, ioexception {dopost (คำขอ, การตอบสนอง); -ในเลเยอร์บริการรับข้อมูลจากเลเยอร์ DAO และส่งกลับไปยัง Servlet ใน Web Layer
รหัสสำหรับการเรียกเลเยอร์บริการใน Web Layer มีดังนี้
แพ็คเกจ com.thc.service; นำเข้า com.thc.dao.productdao; นำเข้า com.thc.domain.product; นำเข้า java.sql.sqlexception; นำเข้า java.util.list; Public Class Productservice {// ในชั้นบริการรับข้อมูลจาก Dao Layer ProductDao dao = new ProductDao (); // การเรียกเลเยอร์ DAO เพื่อสอบถามรายการผลิตภัณฑ์ทั้งหมด <ductions> AllProduct = dao.findallProduct (); ส่งคืน Allproduct; -ข้อมูลสอบถามจากเซิร์ฟเวอร์ในเลเยอร์ DAO และให้เลเยอร์บริการ
แพ็คเกจ com.thc.dao; นำเข้า com.thc.domain.product; นำเข้า com.thc.utils.jdbcutils; นำเข้า org.apache.commons.dbutils.queryrunner; นำเข้า org.apache.commons.dbutils.handlers.beanlisthandler; java.util.list; // ======================================== ชั้น Dao มีความรับผิดชอบเฉพาะสำหรับการดำเนินการฐานข้อมูลการใช้ข้อมูลสาธารณะ dbutils เพื่อสร้าง Object QueryRunner Core Object QueryRunner QR = ใหม่ queryRunner (jdbcutils.getDataSource ()); // เขียนคำสั่ง SQL เพื่อสอบถามสตริงผลิตภัณฑ์ทั้งหมด SQL = "เลือก * จากผลิตภัณฑ์"; // แปลงผลิตภัณฑ์เป็นผลิตภัณฑ์เป็นคอลเลกชันรายการและรายการผลิตภัณฑ์ทั่วไป <ผลิตภัณฑ์> ผลิตภัณฑ์ = qr.Query (SQL, Beanlisthandler ใหม่ <> (product.class)); ผลิตภัณฑ์ส่งคืน; -
หลังจากเลเยอร์ DAO ได้รับข้อมูลมันจะผ่านไปยังชั้นบริการ จากนั้นเลเยอร์บริการจะส่งผ่านไปยัง servlet ของเลเยอร์เว็บ หลังจาก Servlet ได้รับข้อมูลแล้วจะถูกบันทึกไว้ในรายการรวบรวมรายการแล้วแปลงรายการรวบรวมรายการเป็นประเภทข้อมูล JSON และเขียนลงในเบราว์เซอร์ รหัสต่อไปนี้ในหน้าส่วนหน้าคือการแยกวิเคราะห์ข้อมูล JSON ที่ส่งคืนโดย servlet
$ .post (URL, ฟังก์ชั่น (ข้อมูล) {// วิเคราะห์ข้อมูลทั้งหมดที่ส่งจากไฟล์ เซิร์ฟเวอร์ // ======================================================================== - - - - - - - และเพิ่มลงในตารางเพิ่มข้อมูลไปยังตาราง $ ("#tab"). ต่อ (protd);}}, "JSON")ผ่านเครื่องมือ Grabber Package ที่จัดทำโดย Google Chrome คุณสามารถดูข้อมูลของการตอบสนอง servlet
คัดลอกข้อมูลการตอบกลับทั้งหมดซึ่งเป็นข้อมูลต่อไปนี้ อาร์เรย์มีวัตถุผลิตภัณฑ์ซ้อนกัน
วัตถุทั้งหมดมีอยู่ในรูปแบบของคู่คีย์-ค่า
ตัวอย่างเช่นในข้อมูลแรกคีย์คือการนับและค่าคือ 100 คีย์คือ ID ค่าคือ 1 คีย์คือชื่อค่าคือทีวีคีย์คือราคาราคาคือ 2000
[{"นับ": 100, "id": 1, "ชื่อ": "ทีวี", "ราคา": 2000}, {"นับ": 200, "id": 2, "ชื่อ": "เครื่องซักผ้า", "ราคา": 1000}, {"นับ": 300, "id": 3, "ชื่อ": {"นับ": 50, "id": 4, "ชื่อ": "โปรเจ็กเตอร์", "ราคา": 2000}, {"นับ": 1000, "id": 5, "ชื่อ": "HP Computer", "ราคา": 4000}, {"นับ": 100, "ID": 6, "ชื่อ": {"นับ": 60, "id": 7, "ชื่อ": "จักรเย็บผ้า", "ราคา": 2000}, {"นับ": 100, "id": 8, "ชื่อ": "xiaomi box", "ราคา": 2200}, {"นับ": 300, "id": 9, "ชื่อ" {"Count": 200, "ID": 10, "NAME": "Water Purifier", "Price": 2000}, {"Count": 500, "ID": 11, "Name": "Electric Heater", "Price": 2000}, {"Count" {"นับ": 200, "id": 13, "ชื่อ": "หม้อความดันไฟฟ้า", "ราคา": 498}, {"นับ": 300, "id": 14, "ชื่อ": "หม้อหุงข้าว", "ราคา": 299}, {"นับ": 50, "id": 15, "ชื่อ": {"Count": 200, "ID": 16, "NAME": "Soy Milk Maker", "Price": 199}, {"Count": 300, "ID": 17, "Name": "Induction Cooker", "ราคา": 398}, {"Count": 500, "id": 18, " {"นับ": 250, "id": 19, "ชื่อ": "มีดโกน", "ราคา": 98}, {"นับ": 1000, "id": 20, "ชื่อ": "ความปลอดภัย", "ราคา": 16.5}, {"นับ": 1200, "id": 21, "ชื่อ": {"นับ": 1500, "id": 22, "ชื่อ": "libai", "ราคา": 9.9}]หากไม่มีการปนเปื้อนเอฟเฟกต์การแสดงผลมีดังนี้:
ข้อมูลทั้งหมดจะแสดงในหน้า หากมีข้อมูลจำนวนมากตัวอย่างเช่นการค้นหาคำหลักเกี่ยวกับ Baidu อาจมีหลายหมื่นหรือหลายร้อยล้านคน ใช้เวลานานกว่าจะได้รับผลลัพธ์มากมายจากฐานข้อมูลและให้เบราว์เซอร์มาก ประสบการณ์ของผู้ใช้นั้นแย่มากดังนั้นจึงจำเป็นต้องใช้เทคโนโลยีการเพจ ใช้เพจทางกายภาพ
สอบถามข้อมูลที่จำเป็นสำหรับหน้าปัจจุบันจากฐานข้อมูลเท่านั้น
ขั้นตอนที่ 3: ผ่านจำนวนหน้าปัจจุบันและจำนวนหน้าเว็บที่แสดงไปยังเซิร์ฟเวอร์
หน้า HTML จำเป็นต้องเพิ่มจำนวนหน้าปัจจุบันและจำนวนหน้าที่แสดงต่อหน้าและส่งไปยังเซิร์ฟเวอร์
เปลี่ยนรหัสดังแสดงในรูปต่อไปนี้:
ในเลเยอร์ servlet ต้องได้รับพารามิเตอร์และข้อมูลที่เกี่ยวข้องของหน้าปัจจุบันจะถูกสอบถามจากเลเยอร์บริการ รหัสมีดังนี้:
ผลิตภัณฑ์ระดับสาธารณะขยาย httpservlet {void dopost (httpservletRequest Request, httpservletResponse การตอบสนอง) โยน servletexception, ioexception {// จัดการคำขอรหัสที่อ่านไม่ออก Response.setContentType ("ข้อความ/html; charset = utf-8"); // หน้าปัจจุบัน int pageno = integer.parseint (request.getParameter ("pageno")); // จำนวนรายการที่แสดงต่อหน้า int pagesize = integer.parseint (request.getParameter ("pageSize")); // เนื่องจากแสดงข้อมูลผลิตภัณฑ์ทั้งหมดจึงไม่มีพารามิเตอร์ที่จะรับ // เลเยอร์บริการจำเป็นต้องเรียกวิธีการเพื่อค้นหาข้อมูลทั้งหมดรับผลลัพธ์และตอบสนองต่อบริการลูกค้าบริการลูกค้า = ใหม่ Productservice (); ลอง {// ตามจำนวนหน้าที่แสดงและแต่ละหน้ารับข้อมูลจากรายการเลเยอร์บริการ <com.thc.domain.product> product = service.findproduct (pageno, pagesize); สตริง jsonstring = jsonobject.tojsonstring (ผลิตภัณฑ์); // เขียนกลับไปที่เบราว์เซอร์ response.getWriter () เขียน (jSonstring); } catch (sqlexception e) {e.printstacktrace (); }} void doget ที่ได้รับการป้องกัน (คำขอ httpservletRequest, การตอบสนอง httpservletResponse) พ่น servletexception, ioexception {dopost (คำขอ, การตอบสนอง); -วิธีการใหม่ในการค้นหาข้อมูลหน้าปัจจุบันที่เพิ่มเข้ามาในเลเยอร์บริการ
รายการสาธารณะ <ductions> findProduct (int pageno, หน้า int) พ่น sqlexception {productdao dao = new ProductDao (); รายการ <ductions> product = dao.findproduct (pageno, pagesize); ผลิตภัณฑ์ส่งคืน; -วิธีการใหม่ในการค้นหาหน้าปัจจุบันจากฐานข้อมูลที่เพิ่มในเลเยอร์ DAO
รายการสาธารณะ <ductions> findProduct (int pageno, หน้า int) พ่น sqlexception {queryrunner qr = ใหม่ queryrunner (jdbcutils.getDataSource ()); String sql = "เลือก * จากขีด จำกัด ผลิตภัณฑ์?,?"; // จำกัด พารามิเตอร์แรก: เริ่มต้นจากที่ในฐานข้อมูลดัชนีเริ่มต้นจาก 0 // พารามิเตอร์ที่สอง: จำนวนการตรวจสอบในแต่ละครั้ง // กฎของพารามิเตอร์แรกคือ: ลบจำนวนหน้าปัจจุบันของหนึ่งโดยคูณด้วยจำนวนการสืบค้นต่อรายการ <products> productList = QR.Query (SQL หน้า); กลับรายการผลิตภัณฑ์; -ด้านเบราว์เซอร์จะแสดงตามที่แสดงในรูปด้านล่าง: เฉพาะข้อมูลผลิตภัณฑ์ที่มีหน้าเว็บ (ค่าปัจจุบันคือ 6) จะปรากฏขึ้นในแต่ละครั้ง
อย่างไรก็ตามมันเป็นไปไม่ได้ที่จะเปลี่ยนหน้าแบบไดนามิกโดยคลิกที่ปุ่มหน้า
จากนั้นเราต้องพิจารณาว่าหน้าเว็บแสดงเพจเพจและวิธีการห่อหุ้มข้อมูลอย่างไร
เรารู้ว่าจำนวนหน้าเว็บ ที่แสดง ในแถบเพจเพจเพจหน้าจะเปลี่ยนไปแบบ ไดนามิก จำนวนหน้าทั้งหมด = จำนวนข้อมูล/ข้อมูลทั้งหมดที่แสดงในแต่ละหน้าควรโค้งงอขึ้น กล่าวอีกนัยหนึ่งนอกเหนือจากรายการ <ผลิตภัณฑ์> ข้อมูลหน้าของเรายังต้องการจำนวนข้อมูลทั้งหมดจำนวนหน้าทั้งหมดหน้าปัจจุบันและจำนวนจอแสดงผลต่อหน้า นอกจากนี้ Pageno ในหน้าปัจจุบันยังเปลี่ยนแปลงแบบไดนามิก คลิกกี่หน้าบนหน้า? Pageno คือจำนวนของ Pageno ดังนั้นเราจำเป็นต้องสร้าง javabean อื่น (pagebean.java) เพื่อห่อหุ้มข้อมูลนี้แล้วแปลงเป็นข้อมูล JSON และส่งไปยังลูกค้าเพื่อแสดง
ขั้นตอนที่ 4: ห่อหุ้มข้อมูลที่เกี่ยวข้องของหน้าลงใน Javabean
สร้างคลาสชื่อ PageBean ในแพ็คเกจโดเมนด้วยคุณสมบัติต่อไปนี้:
Private int pageno; // หมายเลขหน้าปัจจุบันหน้าส่วนตัว page -pagesize; // จำนวนที่แสดงในแต่ละหน้า private int totalCount; // ข้อมูลผลิตภัณฑ์มีจำนวนเท่าใด
ผ่านจำนวนหน้าปัจจุบัน (pageno) ในเลเยอร์บริการและจำนวนหน้าเว็บที่แสดงในแต่ละหน้า (หน้า) และส่งคืนหน้าเว็บไปยังเว็บเลเยอร์
รหัสสุดท้ายของ Web Layer มีดังนี้
ผลิตภัณฑ์ระดับสาธารณะขยาย httpservlet {void dopost (httpservletRequest Request, httpservletResponse การตอบสนอง) โยน servletexception, ioexception {// จัดการคำขอรหัสที่อ่านไม่ออก Response.setContentType ("ข้อความ/html; charset = utf-8"); // หน้าปัจจุบัน int pageno = integer.parseint (request.getParameter ("pageno")); // จำนวนรายการที่แสดงต่อหน้า int pagesize = integer.parseint (request.getParameter ("pageSize")); // เนื่องจากแสดงข้อมูลผลิตภัณฑ์ทั้งหมดจึงไม่มีพารามิเตอร์ที่จะรับ // เลเยอร์บริการจำเป็นต้องเรียกวิธีการเพื่อค้นหาข้อมูลทั้งหมดรับผลลัพธ์และตอบสนองต่อบริการลูกค้าบริการลูกค้า = ใหม่ Productservice (); ลอง { /* โทรหาวิธีเลเยอร์ธุรกิจเพื่อรับรายการผลิตภัณฑ์ทั้งหมด <com.thc.domain.product> allprouct = service.findallprouct (); แปลงข้อมูลที่ได้รับเป็นสตริงข้อมูลประเภท JSON JSONSTRING = JSONOBJECT.TOJSONSSTRING (AllPROUCT);*// // ข้อมูลดึงข้อมูลจากเลเยอร์บริการตามหน้าปัจจุบันและหมายเลขที่แสดงในแต่ละหน้า // รายการ <com.thc.domain.product> product // ========================================================================================= - - - - jSonstring = jsonObject.tojsonstring (Pagebean); // ======================================================================== Response.getWriter () เขียน (jsonstring); } catch (sqlexception e) {e.printstacktrace (); }} void doget ที่ได้รับการป้องกัน (คำขอ httpservletRequest, การตอบสนอง httpservletResponse) พ่น servletexception, ioexception {dopost (คำขอ, การตอบสนอง); -ในบริการคุณต้องได้รับข้อมูลทั้งหมดของ PageBean และ Pageno และ PageSize เป็นที่รู้จัก คุณต้องได้รับข้อมูลข้อมูลผลิตภัณฑ์และการรวบรวมรายการจากเลเยอร์ DAO และคุณต้องได้รับข้อมูลผลิตภัณฑ์ทั้งหมดทั้งหมด ข้อมูลทั้งหมดสามารถหารด้วยข้อมูลทั้งหมดโดยข้อมูลที่แสดงในแต่ละหน้าและปัดขึ้น
รหัสสุดท้ายของเลเยอร์บริการมีดังนี้:
Public Productservice ระดับสาธารณะ {// ในเลเยอร์บริการรับข้อมูลจากเลเยอร์ Dao และส่งคืนข้อมูลไปยังเลเยอร์เว็บ // ===================================== รายการสาธารณะ // การเรียกเลเยอร์ DAO เพื่อสอบถามรายการผลิตภัณฑ์ทั้งหมด <ductions> AllProduct = dao.findallProduct (); ส่งคืน Allproduct; } // ==================================================================================== Productdao (); รายการ <ductions> product = dao.findproduct (pageno, pagesize); ผลิตภัณฑ์ส่งคืน; } // ============================================================================== ใหม่ ProductDao (); รายการ <ductions> product = dao.findproduct (pageno, pagesize); int totalCount = dao.findtotalcount (); pagebean pb = new PageBean (); // ห่อหุ้มข้อมูล pb.settotalcount (TotalCount); PB.SetPageno (Pageno); PB.SetPagesize (PAGESIZE); PB.SetProducts (ผลิตภัณฑ์); // จากขึ้นไปและคำนวณจำนวนหน้าทั้งหมด อย่าลืมคูณด้วย 1.0 มิฉะนั้นข้อมูลหนึ่งหน้าจะหายไป int totalPage = (int) math.ceil (TotalCount*1.0/pagesize); PB.SettotalPage (TotalPage); // ให้ข้อมูลไปยัง servlet return pb; -ในเลเยอร์ DAO จะมีการเพิ่มวิธีการใหม่ในการสืบค้นจำนวนข้อมูลฐานข้อมูลทั้งหมด
รหัสสุดท้ายของเลเยอร์ DAO มีดังนี้
// ============================== รูป Dao Layer มีความรับผิดชอบเฉพาะสำหรับการดำเนินการฐานข้อมูลระดับสาธารณะ ProductDao {// ========== การสืบค้นข้อมูลผลิตภัณฑ์ทั้งหมด ใหม่ queryrunner (jdbcutils.getDataSource ()); // เขียนคำสั่ง SQL เพื่อสอบถามสตริงผลิตภัณฑ์ทั้งหมด SQL = "เลือก * จากผลิตภัณฑ์"; // แปลงผลิตภัณฑ์เป็นคอลเลกชันรายการและทั่วไปไปยังผลิตภัณฑ์คือรายการผลิตภัณฑ์ <products> ผลิตภัณฑ์ = qr.Query (SQL, Beanlisthandler ใหม่ <> (product.class)); ผลิตภัณฑ์ส่งคืน; } // ==================================================== รายการสาธารณะ <ผลิตภัณฑ์> findProduct (int Pageno, int pagesize) โยน sqlexception String sql = "เลือก * จากขีด จำกัด ผลิตภัณฑ์?,?"; // จำกัด พารามิเตอร์แรก: จุดเริ่มต้นในฐานข้อมูลดัชนีเริ่มต้นจาก 0 // พารามิเตอร์ที่สอง: จำนวนครั้งที่คุณตรวจสอบ // กฎของพารามิเตอร์แรกคือ: ลบจำนวนหน้าปัจจุบันของหน้าหนึ่งโดยคูณด้วยจำนวนการสืบค้นต่อหน้า หน้า); กลับรายการผลิตภัณฑ์; } // =============== มีข้อมูลกี่ชิ้นในแบบสอบถาม? =============================== สาธารณะ int findtotalcount () โยน sqlexception {queryrunner qr = ใหม่ queryrunner (jdbcutils.getDataSource ()); String SQL = "เลือกนับ (*) จากผลิตภัณฑ์"; Long Countl = (ยาว) QR.Query (SQL, ScalarHandler ใหม่ ()); ส่งคืน countl.intvalue (); -ขั้นตอนที่ 5: ประมวลผลหน้าส่วนหน้า
ภายใต้แท็กตารางเพิ่มบรรทัดเพื่อให้ส่วนประกอบเพจ แสดงความคิดเห็นรหัส LI เพราะจำเป็นต้องแสดงแบบไดนามิก
ประกาศตัวแปรพารามิเตอร์ที่จะได้รับก่อน
var url = "/ajax_product/product"; var pageno = 1; // หน้าปัจจุบันถูกตั้งค่าเป็น 1VAR pagesize = 6; // ในแต่ละหน้าแสดงข้อมูลผลิตภัณฑ์ 6 รายการ Var TotalPage;
หลังจากเขียนคำขอโพสต์สำหรับ AJAX การทดสอบแพ็คเก็ตจะทดสอบว่าเบราว์เซอร์ได้รับข้อมูลหรือไม่
$ .post (url, // ที่อยู่ของข้อมูลที่ส่งไปยังเซิร์ฟเวอร์ {"pageno": pageno, "pagesize": pagesize}, // จำนวนหน้าปัจจุบันและจำนวนชิ้นส่วนที่แสดงต่อฟังก์ชันหน้า (ข้อมูล) {})ฉันได้รับข้อมูลต่อไปนี้หลังจากจับแพ็คเก็ต
{"pageno": 1, "pagesize": 6, "ผลิตภัณฑ์": [{"นับ": 100, "id": 1, "ชื่อ": "ทีวี", "ราคา": 2000}, {"นับ": 200, "ID": 2, "ชื่อ": " คอนดิชั่นเนอร์ "," ราคา ": 3000}, {" นับ ": 50," id ": 4," ชื่อ ":" โปรเจ็กเตอร์ "," ราคา ": 2000}, {" นับ ": 1000," id ": 5," ชื่อ ":" คอมพิวเตอร์ HP "," ราคา ": "TotalCount": 22, "TotalPage": 3}หมายความว่าฝั่งเซิร์ฟเวอร์สามารถตอบสนองต่อเบราว์เซอร์ได้ตามปกติ จากนั้นเขียนรหัสส่วนหน้า
แสดงข้อมูลในตาราง
ครั้งแรกแยกวิเคราะห์ข้อมูลที่ได้จากแบ็คเอนด์จากนั้นซิงโครไนซ์ลงในรหัส JS รับอาร์เรย์ของข้อมูลของวัตถุผลิตภัณฑ์ทั้งหมดผ่าน pagebean.products จากนั้นวนซ้ำผ่านอาร์เรย์นี้และแยกค่าของแอตทริบิวต์ผลิตภัณฑ์ลงในตาราง
รหัสมีดังนี้
$ .post (url, // ที่อยู่ของข้อมูลที่ส่งไปยังเซิร์ฟเวอร์ {"pageno": pageno, "pagesize": pagesize}, // จำนวนหน้าปัจจุบันและจำนวนชิ้นส่วนที่แสดงต่อหน้าจะถูกส่งไปยังฟังก์ชันเบราว์เซอร์ (ข้อมูล) Pageno = PageBean.pageno; - - - - สำหรับ (var i = 0; i <products.length; i ++) {// ถ่ายโอนข้อมูล var protd = $ ("<tr> <td>"+ผลิตภัณฑ์ [i] .id+"</td> <td>"+ผลิตภัณฑ์ [i] .name+"</td> <td>" </tr> "); // เพิ่มลงในตารางเพิ่มข้อมูลลงในตาราง $ ("#tab "). ผนวก (protd);}}," json ")หลังจากเขียนรหัสนี้เซิร์ฟเวอร์สามารถเปิดใช้งานเพื่อทดสอบว่าสามารถรับข้อมูลลงในตารางได้หรือไม่ ข้อมูลจะแสดงสำเร็จหลังจากการทดสอบ
แสดงข้อมูลของแถบหน้า
ก่อนแสดงข้อมูลของหน้าก่อนหน้าและหน้าถัดไปก่อน
// แสดงข้อมูลของแถบหน้า // ไม่ได้พิจารณาฟังก์ชั่นสามารถแสดงได้ก่อน // แสดงหน้าก่อนหน้า var preli = $ ('<li> <a href = "#" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" external nofollow "ภายนอก" หน้า </a> </li> '); // เพิ่ม $ (". pager"). ผนวก (preli); // แสดงหน้าถัดไป var nextli = $ (' <li> <a href = "#" rel = "nofollow ภายนอก" external nofollow "ภายนอก" หน้า </a> </li> '); // เพิ่ม $ (". Pager"). ผนวก (nextli);ผลการทดสอบมีดังนี้:
ข้อมูลหน้าจอแสดงผลข้อมูล:
// แสดงข้อมูลของแถบหน้า // ไม่ได้พิจารณาฟังก์ชั่นสามารถแสดงได้ก่อน // แสดงหน้าก่อนหน้า var preli = $ ('<li> <a href = "#" rel = "nofollow ภายนอก" rel = "external nofollow" ภายนอก "external nofollow หน้า </a> </li> '); // เพิ่มใน $ (". pager"). ผนวก (preli); // เดินทางผ่านหมายเลขหน้าสำหรับ (var i = 1; i <= totalPage; i ++) {// สร้างแท็ก li var li = $ (' <li> nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "> '+i+' </a> </li> '); // เพิ่มลงใน UL ผ่านตัวเลือกคลาส $ (". pager"). ผนวก (li);} // แสดงหน้าถัดไป var nextli = $ ('<li> <a href = "#" rel = "nofollow ภายนอก" rel = "external nofollow" external noflollow "ภายนอก rel = "external nofollow"> หน้าถัดไป </a> </li> '); // เพิ่ม $ (". Pager") ภาคผนวก (nextli);เอฟเฟกต์แสดงในรูปด้านล่าง:
หน้าปัจจุบันถูกเน้น
เนื่องจากคลาส Pager ไม่รองรับการเน้นใน bootstrap คลาสการแบ่งหน้าจะถูกแทนที่ด้วยการแบ่งหน้า
ตรรกะของการไฮไลต์คือการพิจารณาว่าเป็นหน้าปัจจุบัน (pageno) เมื่อข้าม
เพิ่มแอตทริบิวต์ที่ใช้งานของคลาสลงในแท็ก LI
// โอนหมายเลขหน้าสำหรับ (var i = 1; i <= totalPage; i ++) {var li; if (i === pageno) {// =============== มันคือหน้าปัจจุบันเน้น li = $ ('<li> <a href = "#" rel = "nofollow ภายนอก" rel = "external nofollow" external nofollow > '+i+' </a> </li> '); // เพิ่มไปยัง UL ผ่านตัวเลือกคลาส $ (". pagination") ผนวก (LI); } else {// ============ ไม่ใช่หน้าปัจจุบันไม่ใช่ไฮไลต์ li = $ ('<li> <a href = "#" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "external nofollow" rel = "external nofollow" // เพิ่มไปยัง UL ผ่านตัวเลือกคลาส $ (". pagination") ผนวก (LI); -เอฟเฟกต์มีดังนี้
เพิ่มเหตุการณ์คลิกไปยังหมายเลขหน้าและสลับข้อมูล
ไม่จำเป็นต้องคลิกเหตุการณ์ในหน้าปัจจุบัน
เพิ่มเหตุการณ์ onclick ลงในแท็กในจำนวนหน้าและผูกฟังก์ชัน skippage () การดำเนินการในฟังก์ชั่น skippage () จริง ๆ แล้วการดำเนินการส่งคำขอโพสต์ AJAX ไปยังเซิร์ฟเวอร์เมื่อเราได้รับข้อมูลหน้าแรก ดังนั้น คัดลอกรหัสของ $ (function () {}) ลงในฟังก์ชัน skippage () จากนั้นเรียกใช้ฟังก์ชัน skippage () เมื่อหน้าโหลด การผ่าน 1 หมายความว่าข้อมูลหน้า 1 ถูกโหลดโดยค่าเริ่มต้น ในเวลานี้ $ (function () {}) จะถูกดำเนินการเพียงครั้งเดียว Skippage () กลายเป็นฟังก์ชั่นแบบเรียกซ้ำและเรียกตัวเอง อย่างไรก็ตามเหตุการณ์คลิกเพียงครั้งเดียวจะเรียกใช้วิธี Skippage เพียงครั้งเดียวซึ่งแตกต่างจากการเรียกซ้ำใน Java
หลังจากดำเนินการรหัสนี้ให้คลิกที่รหัสที่แตกต่างกันและพบว่าเนื้อหาของตารางและแถบหน้าจะถูกซ้อนทับอย่างต่อเนื่อง
ดังที่แสดงในรูปด้านล่าง:
ล้างข้อมูลทุกครั้งที่มีการโหลดข้อมูล ล้างแถบหน้า
หลังจากเพิ่มรหัสเพื่อล้างแถบหน้าฉันพบว่าแถบหน้าไม่ได้ถูกซ้อนทับ แต่ตารางยังคงซ้อนทับอยู่
ล้างแบบฟอร์ม
$("#tab").empty(); หลังจากดำเนินการรหัสที่ชัดเจนสำหรับตารางฉันพบปรากฏการณ์ต่อไปนี้:
บรรทัดแรกของตารางหายไปดังนั้นคุณต้องใช้ตัวเลือกเพื่อแยกบรรทัดแรก
$ ("#tab tr: ไม่ (: ก่อน)") หมายถึง
ก่อนอื่นเลือกตารางตามตัวเลือก ID
จากนั้นจากตัวเลือกลำดับชั้นเลือกแถว TR
ตัวเลือกพื้นฐานก่อนจะซ้อนกันในตัวเลือกพื้นฐานไม่ใช่ซึ่งหมายความว่าไม่ใช่บรรทัดแรก
ความหมายโดยรวมคือถ้าตารางไม่ใช่แถวแรกวิธีที่ว่างเปล่า () จะถูกเรียกให้ลบโหนดลูกทั้งหมดในคอลเลกชันองค์ประกอบที่ตรงกัน
หลังจากการทดสอบสามารถลบข้อมูลบรรทัดแรกได้
ตรวจสอบว่ามีอยู่ในหน้าก่อนหน้าหรือไม่และใช้ฟังก์ชันหมายเลขหน้าสลับ
หากหน้าปัจจุบันเป็นหน้าแรกฟังก์ชันหน้าก่อนหน้าจะไม่พร้อมใช้งาน
หากหน้าปัจจุบันไม่ใช่หน้าแรกให้เพิ่มเหตุการณ์คลิกสลับไปที่หน้าก่อนหน้าและลดหมายเลขหน้าทีละหน้า
// แสดงหน้าก่อนหน้าและพิจารณาว่า Var Preli พร้อมใช้งานหรือไม่ ถ้า (pageno === 1) {// ถ้าหน้าปัจจุบันเป็นหน้าแรกฟังก์ชั่นของหน้าก่อนหน้านั้นไม่พร้อมใช้งาน preli = $ ('<li> <a href = "JavaScript: void (0)" rel = "nofollow ภายนอก" rel = "ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "external nofollow" ภายนอก " rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "external nofollow" ภายนอก " rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก"> หน้าก่อนหน้า </a> </li> '); href = "JavaScript: void (0)" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "ภายนอก onclick = "skippage ('+(pageno-1)+')"> หน้าก่อนหน้า </a> </li> ');} // ใช้ตัวเลือกคลาสเพิ่ม $ (". pagination") ภาคผนวก (preli);ตรวจสอบว่ามีอยู่ในหน้าถัดไปหรือไม่และสลับหมายเลขหน้าฟังก์ชัน
หากหน้าปัจจุบันเป็นหน้าสุดท้ายฟังก์ชันหน้าก่อนหน้าจะไม่พร้อมใช้งาน
หากหน้าปัจจุบันไม่ใช่หน้าสุดท้ายให้เพิ่มเหตุการณ์คลิกสลับไปที่หน้าถัดไปและเพิ่มหมายเลขหน้า
// แสดงหน้าถัดไปและพิจารณาว่า Var Nextli พร้อมใช้งานหรือไม่ ถ้า (pageno === TotalPage) {// ถ้าหน้าปัจจุบันเป็นหน้าสุดท้ายฟังก์ชันของหน้าก่อนหน้าจะไม่พร้อมใช้งาน nextli = $ ('<li> <a href = "javascript: void (0)" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "external nofollow" ภายนอก rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "external nofollow" ภายนอก " rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" rel = "external nofollow" ภายนอก " rel = "ภายนอก nofollow" rel = "ภายนอก nofollow" rel = "ภายนอก nofollow" rel = "no external no> หน้าถัดไป </a> </li> ');} else {// ถ้าหน้าปัจจุบันไม่ใช่หน้าสุดท้าย nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" ภายนอก nofollow "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก "rel =" ภายนอก หน้า </a> </li> ');} // ผ่านตัวเลือกคลาสให้เพิ่ม $ (". pagination") ภาคผนวก (nextli);ณ จุดนี้รหัสทั้งหมดในหน้า front-end จะเสร็จสมบูรณ์และฟังก์ชั่นทั้งหมดจะถูกนำไปใช้
รหัสทั้งหมดของหน้าส่วนหน้ามีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> รายการแสดงผลิตภัณฑ์ </title> <!-แนะนำไฟล์ที่เกี่ยวข้องกับ bootstrap-> <link rel = "stylesheet" href = "/ajax_product/bootstrap/css rel = "external nofollow"> <script type = "text/javascript" src = "/ajax_product/bootstrap/js/jQuery-1.11.3.js"> </script> <script type = "text/javascript" src = "/ajax_product/bootstrap/js/js/js/js/js type = "text/javascript"> var url = "/ajax_product/product"; var pageno = 1; // หน้าปัจจุบันถูกตั้งค่าเป็น 1 var pagesize = 5; // ในแต่ละหน้าข้อมูลผลิตภัณฑ์ 6 ข้อมูล Var TotalPage; // จำนวนข้อมูลจำนวนเท่าใดในผลิตภัณฑ์ VAL ทั้งหมด; // ข้อมูลข้อมูลผลิตภัณฑ์ // เมื่อโหลดหน้าเอกสารจะถูกส่งไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลผลิตภัณฑ์ทั้งหมด ฟังก์ชั่น skippage (หน้า) { - ======================================================================================/Send the post request to the server $.post(url,//The address of data transmission to the server {"pageNo": pageNo, "pageSize": pageSize},//Transfer the current number of pages and the number of pieces displayed per page to the browser function (data) { //Analyze all pagebean data transmitted from the server, the format is json type var pagebean = eval(data); //Synchronous data pageNo=pagebean.pageNo; pageSize=pagebean.pageSize; totalPage=pagebean.totalPage; products=pagebean.products; //Show data in the table======================================================================/$("#tab").empty(); $("#tab tr:not(:first)").empty(); for (var i = 0; i < products.length; i++) { //Tranquility of data in each row var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+" </td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>"); // Add to the table and add data to the table $("#tab").append(protd); } // Show the data of the page bar ==================================================================/Clear the page bar $(".pagination").empty(); //Don't consider the function first, it can be displayed first //Show the previous page to determine whether var preLi is available; if(pageNo===1){ //If the current page is the first page, the previous page function is not available. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Previous page</a> </li>'); }else{ //If the current page is not the first page, add a click event, switch to the previous page, and reduce the page number by one. preLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+(pageNo- 1)+')">Previous page</a></li>'); } //Add $(".pagination").append(preLi); //Transfer the page number for (var i = 1; i <= totalPage; i++) { var li; if(i===pageNo){ //============== It is the current page, highlight li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel=" nofollow" >'+i+'</a> </li>'); //Add to ul through the class selector $(".pagination").append(li); }else{ //========== Not the current page, not highlighted. Add click event, and the parameters are passed as the current page number li=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+i+')">'+i+'</a></li>'); //Add to ul through the class selector $(".pagination").append(li); } } //Show the next page and determine whether var nextLi is available; if(pageNo===totalPage){ //If the current page is the last page, the function of the previous page is not available. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Next page</a> </li>'); }else { //If the current page is not the last page, add a click event, switch to the previous page, and reduce the page number by one. nextLi=$('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="skipPage('+ (pageNo+1)+')">Next Page</a></li>'); } //Use the class selector, add $(".pagination").append(nextLi); },"json") }</script><body><h3 align="center">Promotional product display</h3><div> <!--The product table occupies one row--> <div> <div> <!--table-hover means that when the mouse moves into this row of table, the color change table-bordered means that the table is bordered --> <table id="tab"> <tr> <th>number</th> <th>product name</th> <th>quantity</th> <th>product unit price</th> </tr> </table> </div> </div> <div> <div > <nav> <ul> <!--The code here is dynamically generated by js--> </ul> </nav> </div> </div> </div></div></body></html>สรุป
此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น