ก่อนหน้านี้เราใช้ EasyUI และ SSH เพื่อสร้างกรอบพื้นฐานของแบ็กเอนด์และทำหน้าที่พื้นฐานของแบ็กเอนด์รวมถึงการจัดการหมวดหมู่ผลิตภัณฑ์และการจัดการผลิตภัณฑ์ ในส่วนนี้เราเริ่มสร้างหน้าส่วนหน้า
แนวคิดในการสร้างโฮมเพจ: สมมติว่าตรรกะทางธุรกิจของผลิตภัณฑ์มีให้บริการก่อนอื่นเราต้องสร้างผู้ฟังและสอบถามข้อมูลในโฮมเพจและนำไปใช้ในแอปพลิเคชันเมื่อโครงการเริ่มต้นนั่นคือวิธีการเรียกใช้ตรรกะธุรกิจแบ็คเอนด์ในผู้ฟัง
1. ลอจิกแสดงผลิตภัณฑ์โฮมเพจ
ในหน้าแรกเราแสดงผลิตภัณฑ์ไม่กี่ชิ้นแรกในหมวดผลิตภัณฑ์ร้อนเช่นการพักผ่อนของเด็กการพักผ่อนของผู้หญิงและการพักผ่อนของผู้ชาย เราจะมีสามส่วนเพื่อแสดงหมวดหมู่ผลิตภัณฑ์ที่แตกต่างกันและผลิตภัณฑ์เฉพาะหลายรายการจะแสดงในแต่ละหมวดหมู่ หากเราต้องการใช้โฮมเพจดังกล่าวเราจำเป็นต้องสอบถามข้อมูลอะไร ก่อนอื่นมันเป็นหมวดหมู่หัวข้อร้อนอย่างแน่นอนนั่นคือรายการสอบถามในฐานข้อมูลที่หมวดหมู่เป็นหัวข้อร้อนและจากนั้นเรียงซ้อนผลิตภัณฑ์แบบสอบถามของหมวดหมู่นั้นจากฐานข้อมูลตามหมวดหมู่หัวข้อร้อนเพื่อให้เรามีข้อมูลทั้งหมดที่เราต้องการ ให้บริการแบบสอบถามเหล่านี้เสร็จสมบูรณ์ก่อน:
// categoryService อินเตอร์เฟสสาธารณะหมวดหมู่ส่วนต่อประสาน Explaive Baseservice <หมวดหมู่> {// ละเว้นวิธีการอื่น ... // การสืบค้นหมวดหมู่ร้อนหรือไม่ร้อนตามรายการ Boelen ค่าสาธารณะ <หมวดหมู่> queryByhot } @suppresswarnings ("ไม่ได้ตรวจสอบ") @Service ("หมวดหมู่") คลาสระดับสาธารณะหมวดหมู่ ServiceImpl ขยาย BaseserviceImpl <หมวดหมู่> ใช้หมวดหมู่บริการ {// ละเว้นวิธีการอื่น ๆ ... return getSession (). createquery (HQL) .SetBoolean ("ร้อน", ร้อน) .List (); }} // Productservice Interface Interface Public Productservice ขยาย Baseservice <ผลิตภัณฑ์> {// ละเว้นวิธีการอื่น ... // เคียวรีผลิตภัณฑ์ที่แนะนำตามหมวดหมู่ร้อน (เฉพาะ 4 รายการแรก) } @suppresswarnings ("ไม่ได้ตรวจสอบ") @Service ("Productservice") Public ProductserviceImpl ขยาย BaseserviceImpl <ผลิตภัณฑ์> ใช้ผลิตภัณฑ์ {// ละเว้นวิธีการอื่น ๆ ... @Override รายการสาธารณะ p.category.id =: คำสั่ง CID โดย p.date desc "; return getSession (). createquery (HQL) .setInteger ("CID", CID) .SetFirStResult (0) .SetMaxResults (4) .List (); - 2. สร้าง InitDatalistener เพื่อรับข้อมูลหน้าแรก
พื้นหลังได้เสร็จสิ้นธุรกิจลอจิกการแสดงผลผลิตภัณฑ์และเราจะเริ่มรับข้อมูลที่ต้องการ ก่อนอื่นสร้างผู้ฟัง initDatalistener สืบทอด ServletContextListener สำหรับวิธีที่ผู้ฟังได้รับไฟล์การกำหนดค่าสปริงโปรดดูโพสต์บล็อกนี้: วิธีที่ผู้ฟังได้รับไฟล์การกำหนดค่าสปริง
//@Component // Listener เป็นส่วนประกอบของ Web Layer มันเป็นอินสแตนซ์โดย Tomcat ไม่ใช่ฤดูใบไม้ผลิ ไม่สามารถนำไปใช้ในสปริงคลาสสาธารณะ initDatalistener ใช้ servletContextListener {ผลิตภัณฑ์ส่วนตัว Productservice Productservice = NULL; หมวดหมู่ส่วนตัวหมวดหมู่บริการ = null; Private ApplicationContext Context = NULL; @Override เป็นโมฆะสาธารณะบริบท (เหตุการณ์ servletContextEvent) {// วิธีการที่สร้างอัตโนมัติแบบอัตโนมัติ} @Override โมฆะสาธารณะบริบทบริบท (Event ServletContextEvent) {context = webApplicationContextUtEtUtEdWebapplicationContext (Event.getServletContext categoryService = (categoryService) context.getBean ("categoryService"); // โหลดหมวดหมู่ข้อมูล ProductsERVICE = (ProductsERVICE) Context.GetBean ("ProductsERVice"); // โหลดรายการข้อมูลผลิตภัณฑ์ <รายการ <ผลิตภัณฑ์ >> BigList = ใหม่ // BigList เก็บรายการที่มีคลาสหมวดหมู่ใน BigList // 1 สอบถามหมวดหมู่ฮอตสปอตสำหรับ (หมวดหมู่: หมวดหมู่: categoryService.QueryByhot (จริง)) {// รับข้อมูลผลิตภัณฑ์ที่แนะนำตามรายการ ID หมวดหมู่ฮอต biglist.add (lst); // ใส่รายการด้วยหมวดหมู่ใน BigList} // 2 ออกจาก Query BigList ไปยัง Event.getServletContext () SetAttribute ("BigList", BigList); - ตกลงตอนนี้ข้อมูลทั้งหมดถูกนำไปใส่ในคอลเลกชัน Biglist
3. การออกแบบหน้าโฮมเพจ UI
เราจะได้รับเทมเพลตจากศิลปินในหน้าแรก UI เทมเพลตนี้คือ HTML สิ่งที่เราต้องทำคือเปลี่ยนเป็น JSP ของเราจากนั้นแสดงข้อมูลในคอลเลกชัน BigList ในหน้าแรก ก่อนอื่นเราคัดลอกรูปภาพและ CSS ที่ต้องการโดยเทมเพลตไปยังไดเรกทอรี WebRoot จากนั้นแนะนำไฟล์สองไฟล์นี้ใน WebRoot/Public/Head.jspf เพราะ head.jspf เป็นส่วนหัวสาธารณะที่หน้าอื่น ๆ จำเป็นต้องรวม:
จากนั้นฝัง html ในเทมเพลตลงใน index.jsp บนหน้าแรกแผนกต้อนรับและใช้แท็ก JSTL เพื่อแก้ไขเนื้อหาที่แสดงดังที่แสดงด้านล่าง (เฉพาะภาพหน้าจอเพื่อแสดงชิ้นส่วนผลิตภัณฑ์):
ตอนนี้เราเข้าสู่หน้าผลิตภัณฑ์เพิ่มแบ็กเอนด์ที่เราเคยทำมาก่อนเพิ่มผลิตภัณฑ์บางอย่างในชั้นเรียนแบบไม่เป็นทางการของผู้หญิงจากนั้นเริ่มต้นที่ Tomcat และเรียกใช้ Indexpage index.jsp เอฟเฟกต์มีดังนี้:
โอเคอินเทอร์เฟซ UI แผนกต้อนรับได้รับการตั้งค่าและขั้นตอนต่อไปคือการทำธุรกิจที่แตกต่างกันให้เสร็จสมบูรณ์
ที่อยู่ดั้งเดิม: http://blog.csdn.net/eson_15/article/details/51373403
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น