في السابق ، استخدمنا Easyui و SSH لبناء الإطار الأساسي للواجهة الخلفية والقيام بالوظائف الأساسية للواجهة الخلفية ، بما في ذلك إدارة فئات المنتجات وإدارة المنتجات. في هذا القسم ، بدأنا في بناء صفحة الواجهة الأمامية.
فكرة صنع الصفحة الرئيسية: على افتراض أن منطق العمل للمنتجات متاح الآن ، نحتاج أولاً إلى إنشاء مستمع ، والاستعلام عن البيانات الموجودة على الصفحة الرئيسية ووضعها في التطبيق عندما يبدأ المشروع ، أي استدعاء طريقة منطق أعمال المنتج الخلفي في المستمع.
1. منطق عرض المنتج الصفحة الرئيسية
على الصفحة الرئيسية ، نعرض فقط المنتجات القليلة الأولى في فئات المنتجات الساخنة ، مثل ترفيه الأطفال ، والترفيه للنساء ، وترفيه للرجال. سيكون لدينا ثلاثة أقسام لعرض فئات منتجات مختلفة ، وسيتم عرض العديد من المنتجات المحددة في كل فئة. إذا أردنا تنفيذ مثل هذه الصفحة الرئيسية ، فما هي البيانات التي نحتاج إلى الاستعلام عنها؟ بادئ ذي بدء ، إنها بالتأكيد فئة موضوع ساخن ، أي عناصر الاستعلام في قاعدة البيانات التي تعد الفئة موضوعًا ساخنًا ، ثم تتسلل منتجات الاستعلام لتلك الفئة من قاعدة البيانات بناءً على فئة الموضوع الساخن ، بحيث يكون لدينا جميع البيانات التي نريدها. دعونا نكممل خدمات الاستعلام هذه في الخلفية أولاً:
. } suppresswarnings ("unchected") service ("categoryservice") فئة الفئة العامة يمتد BaseserviceImpl <Category> CatevoryService {// remit methods ... everride public list <category> querybyhot (boolean) Return GetSession (). }} // productervice Interface Interface Interface Productservice تمتد Baseservice <torder> {// حذف الأساليب الأخرى ... // Query المنتجات الموصى بها على أساس الفئات الساخنة (القائمة العامة الأولى فقط) <troduct> QuerByCategoryId (int CID) ؛ } suppressWarnings ("unchected") service ("productervice") فئة عامة producterviceimpl تمتد baseserviceImpl <Product> productervice {// حذف الأساليب الأخرى ... @القائمة العامة <product> querbycategoryid (int cid) {string hql = p.category.id =: CID Order by P.Date desc "؛ Return GetSession (). }} 2. قم بإنشاء initdatalistener للحصول على بيانات الصفحة الرئيسية
أكملت الخلفية أعمال منطق عرض المنتج ، وسنبدأ في الحصول على البيانات المطلوبة. قم أولاً بإنشاء مستمع initDatalistener يرث ServletContextRistener. لكيفية حصول المستمع على ملف تكوين الربيع ، يرجى الرجوع إلى منشور المدونة هذا: كيف يحصل المستمع على ملف تكوين الربيع
//@component // المستمع هو مكون من طبقة الويب. يتم إنشاء مثيل له بواسطة Tomcat ، وليس الربيع. لا يمكن وضعها في فصل الربيع العام initDatalistener تنفذ servletContextListener {Private ProducterVice ProductService = null ؛ خدمة الخدمات الخاصة الخاصة = خالية ؛ سياق ApplicationContext الخاص = null ؛ Override public void contextDestRoyed (حدث servletContexTevent) {// todo method method method adct} override public void contextinitialized (servletContexTevent action) {context = webapplicationContextutils.getWebapplicationContext (event.getServletxt () ؛ CategoryService = (CategoryService) Context.getBean ("CategoryService") ؛ // تحميل المعلومات Productervice = (Productervice) Context.getBean ("ProducterVice") ؛ // تحميل قائمة معلومات المنتج <List <Product >> BigList = New ArrayList <List <list> () () ؛ // BigList تخزن قائمة مع فئة الفئة في BigList // 1. الاستعلام عن فئة الفئة الساخنة لـ (الفئة الفئة: CategoryService.querybyhot (true)) {// الحصول على معلومات المنتج الموصى بها بناءً على قائمة معرف الفئة الساخنة <Trom> lst = productervice.querbycategoryid (category.getid ()) ؛ BigList.Add (LST) ؛ // ضع القائمة مع الفئة في BigList} // 2. اترك قائمة الاستعلام الكبيرة إلى Event.getServletContext (). }} حسنًا ، يتم الآن وضع جميع البيانات في مجموعة BigList.
3. تصميم صفحة واجهة المستخدم الرئيسية
سنحصل على القالب من الفنان على صفحة واجهة المستخدم الرئيسية. هذا القالب هو HTML. كل ما يتعين علينا فعله هو تغييره إلى JSP الخاص بنا ، ثم عرض البيانات في مجموعة BigList على الصفحة الرئيسية. أولاً ، نقوم بنسخ الصورة و CSS المطلوبة بواسطة القالب إلى دليل Webroot ، ثم نقدم هذين الملفان في Webroot/Public/Head.jspf ، لأن head.jspf هو رأس عام تحتاج صفحات أخرى إلى تضمينه:
ثم قم بتضمين HTML في القالب في index.jsp على الصفحة الرئيسية للمكتب الاستقبال ، واستخدم علامة JSTL لتعديل محتوى العرض ، كما هو موضح أدناه (فقط لقطات الشاشة لعرض جزء المنتج):
الآن ندخل صفحة منتج إضافة الواجهة الخلفية التي قمنا بها من قبل ، وإضافة بعض المنتجات إلى الفصل غير الرسمي للإناث ، ثم ابدأ في Tomcat ، وتشغيل index.jsp الصفحة الرئيسية ، كما يلي:
حسنًا ، تم إعداد واجهة واجهة المستخدم مكتب الاستقبال ، والخطوة التالية هي إكمال بعض الشركات المختلفة.
العنوان الأصلي: http://blog.csdn.net/eson_15/article/details/51373403
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.