ในสองบทความแรกเรารวม SSH และแยกอินเทอร์เฟซของส่วนบริการและส่วนการดำเนินการ อาจกล่าวได้ว่าสภาพแวดล้อมการพัฒนาขั้นพื้นฐานได้ถูกสร้างขึ้น ในส่วนนี้เราจะสร้างหน้าแบ็กเอนด์ มาพูดคุยกันสองวิธีในการสร้าง: Frameset-based และ EasyUI-based ในที่สุดเราจะใช้ EasyUi เพื่อพัฒนา
1. แยกหน้า JSP สาธารณะ
ก่อนอื่นดูหน้า JSP ปัจจุบัน:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <Html> <head> </head> <body> <!-ละเว้น ...-> </c: foreach> </body> </html> </span>
อย่าอ่านเนื้อหาของส่วนร่างกายก่อนเพราะสิ่งเหล่านี้ใช้สำหรับการทดสอบก่อนหน้านี้ การแยกหน้า JSP หมายถึงการแยกชิ้นส่วนทั่วไปลงในหน้า JSP ใหม่แล้วรวมไว้ในหน้า JSP ปัจจุบัน เนื่องจากโครงการในภายหลังจะแนะนำ JS, CSS และไฟล์อื่น ๆ อย่างแน่นอนหากเขียนในแต่ละหน้า JSP มันจะซ้ำซ้อนมากดังนั้นเราจึงต้องแยก JSP ทั่วไปเพื่อแนะนำไฟล์เหล่านี้และสิ่งอื่น ๆ เราสร้างโฟลเดอร์สาธารณะใหม่ในไดเรกทอรี WebRoot และสร้าง head.jspf ใหม่ (JSPF แสดงส่วน JSP สำหรับหน้า JSP อื่น ๆ ที่จะรวม)
<%@ page language = "java" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set value = "$ {pageContext.request.contexte type = "text/javascript" src = ""> </script> <style type = "text/css"> </style> -> </span> ส่วนความคิดเห็นส่วนใหญ่รวมถึง JS และ CSS เพราะยังไม่ได้ใช้งานเพียงแค่สร้างกรอบและลบออกเมื่อใช้ แท็ก <c: set> ใช้ $ {pageContext.request.contextpath} เพื่อแทนที่ $ {shop} เพื่อการเขียนได้ง่าย ด้วยวิธีนี้ JSP ใหม่จำเป็นต้องรวม head.jspf นี้ไว้ในอนาคต ลองดูที่ index.jsp ที่แก้ไขแล้ว:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html สาธารณะ "-// w3c // dtd html 4.01 transitional // en"> <html> <head> </body> </html> </span>
มีความคิดเชิงวัตถุหรือไม่?
2. สร้างหน้าพื้นหลังตามเฟรมเซ็ต
2.1 การค้นพบปัญหา
เทมเพลตได้รับการสกัดและตอนนี้เราเริ่มสร้างกรอบหน้าพื้นหลัง ก่อนอื่นเราใช้ Frameset เพื่อทำมัน สร้างโฟลเดอร์ใหม่ซึ่งเป็นหลักในไดเรกทอรี Web-Inf และสร้างไฟล์ JSP ใหม่สี่ไฟล์ในหลัก: aindex.jsp, top.jsp, left.jsp และ right.jsp เฟรมชุดของเราเขียนใน aindex.jsp อีกสามคนเพิ่งเขียนด้วยประโยคง่ายๆสำหรับการทดสอบ มาดู aindex.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html สาธารณะ "-// w3c // dtd html 4.01 transitional // en"> <html> <head> หน้า-> <frameset rows = "150,*"> <frame src = "top.jsp"/> <frameset cols = "150,*"> <frame src = "left.jsp"/> <frame src = "right.jsp"/>
โครงสร้างมีความชัดเจนมากหน้าแบ่งออกเป็น 3 ชิ้นและหน้าอยู่ด้านซ้ายและขวา แต่ละโมดูลมีหน้า JSP ที่สอดคล้องกันจากนั้นเราเขียน <a href = "/wen-inf/main/aindex.jsp"> ทดสอบไปยังพื้นหลัง </a> ใน body of index.jsp เริ่มต้น Tomcat และพบว่าการคลิกที่ลิงค์ไม่สามารถเข้าถึงพื้นหลังได้ เหตุผลก็คือ JSP ในไดเรกทอรี Web-Inf ไม่สามารถเปลี่ยนเส้นทางได้โดยตรงและจำเป็นต้องเปลี่ยนเส้นทางผ่าน servlet หรือการกระทำ ไม่มีทางฉันสามารถเขียนการกระโดดใหม่ได้เท่านั้น
2.2 การกระทำการกระโดดของหน้าเขียน
ก่อนอื่นเราเขียนการกระทำเพื่อให้การเปลี่ยนเส้นทางหน้าเสร็จสมบูรณ์ การกระทำนี้ใช้การเปลี่ยนเส้นทางหน้าและไม่จัดการตรรกะทางธุรกิจใด ๆ
/ ** * @description: TODO (การกระทำนี้ใช้เพื่อทำฟังก์ชั่นการส่งต่อ JSP และ JSP ใน Web-Inf และการกระทำนี้ไม่ได้จัดการกับตรรกะใด ๆ ) * @author ESON_15 * */ การส่งคลาสสาธารณะขยายการกระทำ -
เราจะเห็นได้ว่าการส่งสัญญาณไม่ได้สืบทอด baseaction ที่เราสกัดมาก่อน แต่เพียงสืบทอดการกระทำที่สนับสนุน จากนั้นเรากำหนดค่าไว้ในไฟล์ struts.xml:
<? xml version = "1.0" การเข้ารหัส = "utf-8"?> <! doctype struts สาธารณะ "-// Apache Software Foundation // dtd struts การกำหนดค่า 2.3 // en" "http://struts.apache.org/dtds/struts-2.3.dtd" ผลลัพธ์ที่ถูกต้องสำหรับการกระทำทั้งหมดในแพ็คเกจนี้-> </span> <sultsults ทั่วโลก> <ชื่อผลลัพธ์ = "aindex">/web-inf/main/aindex.jsp </result> </global-results> <!-ละเว้นการกำหนดค่าการดำเนินการอื่น ๆ <name result = "send">/web-inf/{1}/{2} .jsp </result> </action> </package> </struts> อย่าลืมกำหนดค่าใน beans.xml: <bean id = "sendaction" />
เหตุผลที่มีการกำหนดหมายเลขสอง*ในการดำเนินการนี้เพื่ออำนวยความสะดวกในการเข้าถึง web-inf/*/*. jsp ซึ่งต้องมีข้อตกลงเกี่ยวกับวิธีการเขียนของที่อยู่ใน JSP มาดูวิธีการเขียนใน aindex.jsp:
<span style = "font-family: Microsoft yahei;"> <%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html สาธารณะ "-// w3c // dtd html 4.01 file = " /public /head.jspf" %> </head> <!-ตัวเฟรมมี 3+1 หน้า-> <frameset rows = "150,*"> <frame src = "send_main_top.action" /> <frameset cols = "150,*"> </framseet> </frameset> </html> </span>
จาก Aindex.jsp ที่แก้ไขแล้วเราจะเห็นว่าเราไม่สามารถเข้าถึง JSP ได้โดยตรงภายใต้ Web-Inf/ (เราไม่สามารถเข้าถึงได้) เรากระโดดผ่านการกระทำเพื่อให้เราเขียน <a href = "send_main_aindex.action"> ลงใน body of index.jsp เพื่อทดสอบกับพื้นหลัง </a> จากนั้นเริ่ม Tomcat แล้วคลิกลิงก์เพื่อเข้าถึงหน้าแรกของแบ็กเอนด์
การตัดสินจากกระบวนการข้างต้นของการใช้ Frameset เพื่อสร้างหน้าแบ็กเอนด์มันค่อนข้างลำบาก มันรวมอยู่ในแต่ละหน้าและไม่ได้ใช้เฟรมในการพัฒนา EasyUI มีเพียงหน้าเดียวและคำขอทั้งหมดเป็นคำขอ AJAX จากนั้นมาดูวิธีใช้ EasyUI เพื่อสร้างหน้าแบ็กเอนด์
3. สร้างหน้าพื้นหลังตาม EasyUI
JQuery Easyui เป็นคอลเลกชันของปลั๊กอิน UI ที่อิงกับ jQuery และเป้าหมายของ JQuery Easyui คือการช่วยให้นักพัฒนาเว็บสร้างอินเทอร์เฟซ UI ที่อุดมไปด้วยคุณสมบัติและสวยงาม นักพัฒนาไม่จำเป็นต้องเขียนจาวาสคริปต์ที่ซับซ้อนและไม่จำเป็นต้องมีความเข้าใจในเชิงลึกเกี่ยวกับสไตล์ CSS นักพัฒนาทุกคนต้องรู้คือแท็ก HTML ง่ายๆ
3.1 นำเข้าองค์ประกอบที่เกี่ยวข้อง EasyUI
ก่อนอื่นเรานำเข้าส่วนประกอบที่จำเป็นสำหรับ EasyUI ในไดเรกทอรี Webroot ในโครงการและมีการดาวน์โหลดบนอินเทอร์เน็ต ฉันใช้ JQuery-Easyui-1.3.5 เพื่อลบสิ่งที่ไม่จำเป็นออกไป ผลลัพธ์สุดท้ายมีดังนี้:
3.2 การสร้างสภาพแวดล้อม EasyUi
เราเปิดไฟล์ head.jspf ที่เราเพิ่งแยกนำเข้า CSS และ JS ที่ EasyUi ขึ้นอยู่กับที่นี่และแนะนำไฟล์ JSPF ในหน้าอื่น ๆ แนะนำ CSS และ JS ที่ EasyUi ขึ้นอยู่กับ:
<%@ page language = "java" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <c: set value = "$ {pageContext.request.contexte Easyi Environment-> <link rel = "stylesheet" href = "$ {shop} /jquery-easyui-1.3.5/themes/icon.css" type = "text/css"> </link> <link rel = "Stylesheet" href = "$ {shop} type = "text/css"> </link> <script type = "text/javascript" src = "$ {shop} /jquery-easyui-1.3.5/jquery.min.js"> </script> <script type = "text/javascript } /jQuery-Easyui-1.3.5/jQuery.easyui.min.js "> </script> <script type =" text/javascript "src =" $ {shop} /jquery-easyui-1.3.5/locale/easyui-lang-zh_cn.js.js 3.3 สร้างกรอบสำหรับพื้นหลัง
ลบ top.jsp, left.jsp และ right.jsp ใน web-inf/ main/ directory เนื่องจากไม่มีให้บริการอีกต่อไป จากนั้นแก้ไขหน้า aindex.jsp ตอนนี้คุณสามารถใช้ EasyUi เพื่อทำ:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html สาธารณะ "-// w3c // dtd html 4.01 transitional // en"> <html> <head> data-options = "ภูมิภาค: 'North', ชื่อ: 'North Title', Split: True" style = "ความสูง: 100px;"> </div> <div data-options = "ภูมิภาค: 'ตะวันตก', ชื่อ: 'ตะวันตก', แยก: true"> <! style = "overflow: auto; padding: 10px;"> <h3 style = "สี:#0099ff;"> หีบเพลงสำหรับ jQuery </h3> <p> หีบเพลงเป็นส่วนหนึ่งของเฟรมเวิร์ก Easyi สำหรับ jQuery มันช่วยให้คุณกำหนดส่วนประกอบหีบเพลงของคุณบนหน้าเว็บได้ง่ายขึ้น </p> </div> <div data-options = "iconcls: 'icon-reload', เลือก: true" style = "padding: 10px;"> content2 </div> <div> content3 </div> style = "padding: 5px; พื้นหลัง: #eee;"> </div> </body> </html>
<div> จำนวนมากที่นี่ทั้งหมดอ้างอิงถึงเอกสารคำอธิบาย EasyUi ด้านบนและฉันโพสต์ไว้ด้านล่าง ก่อนอื่นให้ใช้เค้าโครงเค้าโครงทั้งหมดและลบสิ่งที่เราไม่ต้องการ เราต้องการเพียงสามส่วน: ทิศตะวันตกเฉียงเหนือและศูนย์:
จากนั้นเพิ่มเลย์เอาต์ของการจำแนกประเภท AccordON ใน DIV ในส่วนตะวันตกและเพิ่มรหัสลงใน head.jspf:
ด้วยวิธีนี้เราเพียงแค่สร้างกรอบหน้าแบ็คเอนด์และในระยะต่อมาเราเพียงแค่ต้องกรอกบางสิ่งบางอย่าง ลองทดสอบใน index.jsp: <a href = "send_main_aindex.action"> โดยตรงไปยังพื้นหลัง EasyUi เวอร์ชัน </a> ดังนั้น JSP จะพบการส่งที่เราเพิ่งเขียนแล้วข้ามไปที่ EWB-inf/Main/Aindex.jsp และกรอบพื้นหลังสามารถแสดงได้อย่างถูกต้อง
ณ จุดนี้เราได้สร้างเฟรมเวิร์กของหน้าพื้นหลังโดยใช้ EasyUI สำเร็จ
(หมายเหตุ: ในที่สุดฉันจะให้การดาวน์โหลดซอร์สโค้ดของโครงการทั้งหมด! ทุกคนยินดีที่จะรวบรวมหรือแบ่งปัน)
ซอร์สโค้ดดาวน์โหลดที่อยู่ของโครงการทั้งหมด: //www.vevb.com/article/86099.htm
ที่อยู่ดั้งเดิม: http://blog.csdn.net/eson_15/article/details/51312490
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น