في المادتين الأوليين ، قمنا بدمج SSH واستخرجنا واجهات أجزاء الخدمة والأفعال. يمكن القول أن بيئة التنمية الأساسية قد تم بناؤها. في هذا القسم ، سنقوم ببناء صفحة الخلفية. دعنا نناقش طريقتان للبناء: القائم على الإطارات القائم على TeaseSe. أخيرًا ، سوف نستخدم Easyui للتطوير.
1. استخراج صفحات JSP العامة
دعونا نلقي نظرة أولاً على صفحة JSP الحالية:
<٪@ page language = "java" import = "java.util. <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 type = "text/javaScript" src = ""> </script> <style type = "text/css"> </style> -> </span>
يتضمن جزء التعليق بشكل أساسي JS و CSS ، لأنه لم يتم استخدامه بعد ، فقط قم بإنشاء إطار وإزالته عند استخدامه. تستخدم العلامة <C: SET> $ {pagecontext.request.contextpath} لاستبدال $ {Shop} لسهولة الكتابة. وبهذه الطريقة ، يحتاج JSP الجديد فقط إلى تضمين هذا head.jspf في المستقبل. دعونا نلقي نظرة على index.jsp المعدلة:
أقل </body> </html> </span>
هل هناك فكرة موجهة نحو الكائن؟
2. قم ببناء صفحة خلفية بناءً على FrameSet
2.1 اكتشاف المشاكل
تم استخراج القالب ، والآن بدأنا في بناء إطار صفحة الخلفية. أولاً ، نستخدم FrameSet للقيام بذلك. قم بإنشاء مجلد جديد ، Main in Web-Inf Directory ، وإنشاء أربعة ملفات JSP جديدة في Main: Aindex.jsp ، top.jsp ، left.jsp و right.jsp. تتم كتابة إطاراتنا في Aindex.jsp. الثلاثة الأخرى مكتوبة للتو في جملة بسيطة للاختبار. دعونا نلقي نظرة على Aindex.jsp:
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> html> <head> Pages-> <الإطارات صفوف = "150 ،*"> <الإطار src = "top.jsp"/> <الإطارات cols = "150 ،*"> <الإطار src = "left.jsp"/> <frame src = "right.jsp"/>
الهيكل واضح للغاية ، يتم تقسيم الصفحة إلى 3 قطع ، والصفحة على اليسار واليمين. تحتوي كل وحدة نمطية على صفحة JSP المقابلة ، ثم نكتب <a href = "/wen-inf/main/anindex.jsp"> اختبار إلى الخلفية </a> في جسم الفهرس. والسبب هو أنه لا يمكن إعادة توجيه JSP في دليل الويب بشكل مباشر ، ويجب إعادة توجيهها من خلال servlet أو الإجراء. لا توجد طريقة ، لا يمكنني إلا أن أكتب عملية قفزة جديدة.
2.2 كتابة صفحة القفزة
نكتب أولاً إجراءً لإكمال إعادة توجيه الصفحة. هذا الإجراء ببساطة ينفذ إعادة توجيه الصفحة ولا يتعامل مع أي منطق عمل.
/ ** * description: TODO (يتم استخدام هذا الإجراء لإكمال وظائف إعادة توجيه طلب JSP و JSP في Web-Inf ، وهذا الإجراء لا يتعامل مع أي منطق) * Author ESON_15 * */ الفئة العامة sendaction يمتد الإجراءات UPPORT {public string upp () {return "؛ }} يمكننا أن نرى أن SendAction لا يرث القاعدة التي استخرجناها من قبل ، ولكن ببساطة ترث الإجراءات. ثم نقوم بتكوينه في ملف struts.xml:
<؟ النتيجة ، صالحة لجميع الإجراءات في هذه الحزمة-> </span> <global-results> <result name = "aindex">/web-inf/main/anindex.jsp </result> </global-results> <!-غذف تكوين الإجراءات الأخرى ... </span>-> <!-تستخدم لإكمال إجراءات الإجراءات لطلبات النظام ، يتم تسليم جميع الطلبات. name = "send">/web-inf/{1}/{2} .jsp </redress> </usace> </package> </struts> لا تنسَ تكوينه في Beans.xml: <bean id = "sendaction" />.
السبب في تعيين رقمين*في هذا الإجراء هو تسهيل الوصول إلى الويب-Inf/*/*. JSP ، والذي يتطلب الاتفاق على طريقة الكتابة للعنوان في JSP. دعونا نلقي نظرة على طريقة الكتابة في Aindex.jsp:
<span style = "font-family: microsoft yahei ؛"> <٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! file = " /public /head.jspf" ٪> </head> <!-يحتوي جسم الإطار على 3+1 صفحات-> <الإطارات صفوف = "150 ،*"> <الإطار src = "send_main_top.action" /> <frameet cols = "150 ،*"> </frameet> </frameset> </html> </span>
من Aindex.jsp المعدل ، يمكننا أن نرى أننا لا نصل مباشرة إلى JSP ضمن الويب-Inf/ (لا يمكننا الوصول إليه أيضًا). نحن نقفز من خلال العمل ، بحيث نكتب <a href = "send_main_aindex.action"> إلى الجسم من index.jsp لاختباره إلى الخلفية </a> ، ثم ابدأ Tomcat ، ثم انقر على الرابط للوصول إلى الصفحة الرئيسية الخلفية بشكل طبيعي.
انطلاقًا من العملية المذكورة أعلاه لاستخدام FrameSet لإنشاء صفحات الخلفية ، فهي مزعجة للغاية. يتم تضمينه في كل صفحة ، ولا يتم استخدام FrameSet في التطوير. لدى Easyui صفحة واحدة فقط ، وجميع الطلبات هي طلبات AJAX. بعد ذلك ، دعونا نلقي نظرة على كيفية استخدام Easyui لبناء صفحات الخلفية.
3. قم ببناء صفحة خلفية بناءً على Easyui
JQuery Easyui هي مجموعة من المكونات الإضافية للاتصالات المستندة إلى jQuery ، وهدف jQuery Easyui هو مساعدة مطوري الويب على إنشاء واجهة واجهة المستخدم غنية بالميزات وجميلة. لا يحتاج المطورون إلى كتابة JavaScript المعقدة ، ولا يحتاجون إلى فهم متعمق لأنماط CSS. جميع المطورين بحاجة إلى معرفة بعض علامات HTML البسيطة.
3.1 استيراد المكونات ذات الصلة
نستورد أولاً المكونات المطلوبة لـ Easyui في دليل Webroot في المشروع ، وهناك تنزيلات على الإنترنت. يمكنني استخدام jQuery-easyui-1.3.5 لإزالة بعض الأشياء غير الضرورية. النتيجة النهائية هي على النحو التالي:
3.2 بناء بيئة سهلة
نفتح ملف 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.request.context. Easyi Environment-> <Link Rel = "STYLESHEET" href = "$ {shop} /jquery-easyui-1.3.5/themes/icon.css" type = "text/css"> </inkning rel = "stylesheet" href = "$ {shop} /jquery-easyui-1 type = "text/css"> </link> <script type = "text/javaScript" src = "$ {shop} /jquery-asyui-1.3.5/jquery.min.js }/jquery-easyui-1.3.5/jquery.easyui.min.js "> </script> <script type =" text/javaScript "src =" $ {shop} /jquery-asyui-1.3.5/locale/asyui-lang-zh_cn.js 3.3 بناء إطار عمل للخلفية
قم بحذف top.jsp و left.jsp و just.jsp في web-inf/ main/ directory لأنه لم يعد متاحًا الآن. ثم تعديل صفحة Aindex.jsp. يمكنك الآن استخدام Easyui للقيام بذلك:
أقل اختيارات البيانات = "المنطقة:" الشمال "، العنوان:" العنوان الشمالي "، الانقسام: صحيح" style = "الارتفاع: 100px ؛"> </div> <div-options = "المنطقة:" الغرب "، العنوان:" الغرب "، الانقسام: true"> <!-يتم عرض قائمة النظام هنا-> <div id = "aa" Style = "Overflow: Auto ؛ Padding: 10px ؛"> <h3 style = "color:#0099ff ؛"> أكورديون لـ jQuery </h3> <p> الأكورديون هو جزء من إطار عمل easyi لـ jQuery. يتيح لك تحديد مكونك الأكورديون على صفحة الويب بسهولة أكبر. </p> </viv> <div-options = "iconcls: 'icon-reload' ، selection: true" style = "padding: 10px ؛ style = "padding: 5px ؛ الخلفية: #EEE ؛"> </div> </body> </html>
يتم الرجوع إلى الكثير من <Div> هنا إلى مستند Easyui Description أعلاه ، وقد نشرتها أدناه. قم أولاً بتنفيذ تخطيط التصميم بالكامل وإزالة ما لا نحتاجه. نحتاج فقط إلى ثلاثة أجزاء: الشمال والغرب والمركز:
ثم أضف تصميم تصنيف Accordon في Div في الجزء الغربي وأضف الكود إلى Head.jspf:
وبهذه الطريقة ، قمنا ببساطة ببناء إطار صفحة الواجهة الخلفية ، وفي المرحلة اللاحقة ، نحتاج فقط إلى ملء شيء ما. دعنا نختبره في index.jsp: <a href = "send_main_aindex.action"> مباشرة إلى إصدار الخلفية easyui </a> ، بحيث يمكن لـ JSP أن يجد المرسل الذي كتبناه للتو ثم القفز إلى EWB-Inf/Main/Aindex.js ، ويمكن عرض إطار الخلفية بشكل صحيح ، على النحو التالي:
في هذه المرحلة ، قمنا بنجاح ببناء إطار صفحة الخلفية باستخدام EasyUI.
(ملاحظة: في النهاية ، سأقدم تنزيل الكود المصدري للمشروع بأكمله! الجميع مرحب بهم لجمع أو مشاركة)
عنوان تنزيل رمز المصدر للمشروع بأكمله: //www.vevb.com/article/86099.htm
العنوان الأصلي: http://blog.csdn.net/eson_15/article/details/51312490
ما سبق هو المحتوى الكامل لهذه المقالة. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.