หลักการของการเพิ่มส่วนผลิตภัณฑ์นั้นเหมือนกับการเพิ่มหมวดหมู่ผลิตภัณฑ์ อ้างถึงบทความ: การเพิ่มและอัปเดตหมวดหมู่ผลิตภัณฑ์ แต่มีความซับซ้อนมากกว่าหมวดหมู่ผลิตภัณฑ์ เนื่องจากมีคุณลักษณะมากมายของผลิตภัณฑ์จึงมีฟิลด์มากขึ้นในฐานข้อมูลที่เกี่ยวข้อง นอกจากนี้ยังมีตัวเลือกในการเพิ่มผลิตภัณฑ์เพื่ออัปโหลดรูปภาพ เนื้อหาชิ้นเล็ก ๆ นี้จะถูกอธิบายแยกต่างหากในบทความถัดไปเนื่องจากสิ่งนี้เกี่ยวข้องกับจุดความรู้ซึ่งเป็น Struts2 ใช้ฟังก์ชันการอัปโหลดไฟล์ ฉันจะไม่พูดอะไรมากขึ้น ตอนนี้ฉันจะเริ่มปรับปรุงรหัสสำหรับการเพิ่มส่วนผลิตภัณฑ์:
1. เพิ่มผลิตภัณฑ์
1.1 การเพิ่มการใช้งาน UI สำหรับผลิตภัณฑ์ <br /> กรอกรหัสก่อนเพื่อเพิ่มส่วนผลิตภัณฑ์ใน query.jsp:
ถัดไปลองดูการใช้งานเฉพาะใน save.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> มาร์จิ้น: 10px; } </style> <script type = "text/javascript"> $ (function () {// วิธีการตรวจสอบที่กำหนดเองลงทะเบียนฟังก์ชั่นใหม่ $. extend ($. fn.validateBox.defaults.rules เพื่อตรวจสอบความถูกต้องของการใช้งาน ข้อความ)} รูปแบบ: {// การใช้งานฟังก์ชั่นถ้ามันส่งคืนเท็จการตรวจสอบล้มเหลวในการตรวจสอบความถูกต้อง: ฟังก์ชั่น (ค่า, param) {// รับชื่อต่อท้ายของไฟล์ปัจจุบัน var ext = value.substring (value.Altindexof ('.') <arr.length; ข้อมูลลงในรูปแบบ JSON และส่งไปยัง URL: 'category_query.action', ValueField: 'ID', textfield: 'type', // รายการดรอปดาวน์แสดงหมวดหมู่ผลิตภัณฑ์ทั้งหมดแผงควบคุม: 'อัตโนมัติ', // adaptive height width: 120, // การแก้ไข // combobox สืบทอดคำสั่งผสมสืบทอดตรวจสอบ ValidateBox ดังนั้นคุณสามารถตั้งค่าการตรวจสอบได้โดยตรงที่นี่: จริง, MissingMessage: 'โปรดเลือกหมวดหมู่'}); $ ("อินพุต [name = name]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนชื่อผลิตภัณฑ์'}); $ ("อินพุต [name = price]"). numberbox ({ต้องการ: จริง, MissingMessage: 'โปรดป้อนราคาผลิตภัณฑ์', นาที: 0, ความแม่นยำ: 2, // เก็บคำนำหน้าทศนิยมสองตำแหน่ง: '$'}); $ ("input [name = 'fileImage.upload']"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดอัปโหลดภาพผลิตภัณฑ์', // ตั้งค่าวิธีการที่กำหนดเองได้: "รูปแบบ ['gif, jpg, jpeg, png']" // วงเล็บเป็นพารามิเตอร์}); $ ("textarea [name = stound]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนคำอธิบายง่ายๆของผลิตภัณฑ์'}); $ ("textarea [name = xremark]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนคำอธิบายง่ายๆของผลิตภัณฑ์'}); $ ("textarea [name = xremark]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนคำอธิบายง่ายๆของผลิตภัณฑ์'}); // ปิดใช้งานการตรวจสอบ $ ("#ff"). แบบฟอร์ม ("disablevalidation"); // ลงทะเบียนเหตุการณ์ของปุ่ม $ ("ส่ง") คลิก (function () {// เปิดใช้งานการตรวจสอบ $ ("#ff"). แบบฟอร์ม ("enablevalidation"); // หากการตรวจสอบประสบความสำเร็จให้ส่งข้อมูลถ้า ("#ff") ความสำเร็จ: ฟังก์ชั่น () {// ถ้าประสบความสำเร็จให้ปิดพาเรนต์หน้าต่างปัจจุบัน $ ("#win"). หน้าต่าง ("ปิด"); // events $ ("#reset") คลิก (function () {$ ("#ff"). แบบฟอร์ม ("disablevalidation"); // รีเซ็ตไม่จำเป็นต้องมีการตรวจสอบแบบฟอร์ม // รีเซ็ตข้อมูลฟอร์มปัจจุบัน $ ("#ff"). แบบฟอร์ม ("รีเซ็ต");}); - </script> </head> <body> <form id = "ff" method = "post" enctype = "multipart/form-data"> <divel type = "file" name = "fileImage.upload"/> </div> <div> <darble> หมวดหมู่: </label> <อินพุต id = "cc" name = "category.id"/> </div> <divel type = "radio" name = "Recomend" value = "false"/> </div> <div> <dable> มันถูกต้องหรือไม่: </label> รายการ: <อินพุต type = "Radio" name = "Open" Checked = "Checked" value = "TRUE" cols = "40" rows = "4"> </textarea> </div> <div> <dable> คำอธิบายโดยละเอียด: </label> <textarea name = "xremark" cols = "40" rows = "8"> </textarea> </div> </div> </form> </body> </html>ลองดูที่ส่วนวิธีการที่กำหนดเองในรหัส JS ข้างต้นซึ่งส่วนใหญ่จะกำหนดการตรวจสอบภาพที่อัปโหลด การวิเคราะห์เฉพาะมีดังนี้:
จากนั้นคุณสามารถใช้วิธีการที่กำหนดเองในส่วนการตรวจสอบภาพ:
1.2 การใช้งานพื้นหลังของการเพิ่มผลิตภัณฑ์
@Controller ("productaction") @scope ("prototype") การผลิตชั้นเรียนสาธารณะขยาย baseaction <ductions> {// ละเว้นรหัสอื่น ๆ ... โมฆะสาธารณะบันทึก () โยนข้อยกเว้น {// การประมวลผลรูปภาพที่อัปโหลดบล็อกถัดไปวิเคราะห์การอัปโหลดไฟล์ struts2 // ตั้งค่าเวลาปัจจุบันเนื่องจากแผนกต้อนรับไม่ผ่านฟิลด์เวลาเข้ามาตั้งค่าตัวเองที่นี่ System.out.println (รุ่น); // การจัดเก็บข้อมูลผลิตภัณฑ์ Productservice.save (รุ่น); - 2. อัปเดตผลิตภัณฑ์
2.1 อัปเดตการใช้งาน UI ของผลิตภัณฑ์
ก่อนอื่นให้ดูที่รหัสสำหรับชิ้นส่วนผลิตภัณฑ์ที่อัปเดตใน query.jsp:
ถัดไปมาดูเนื้อหาของ update.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> มาร์จิ้น: 5px; } </style> <script type = "text/javascript"> $ (function () {// dataGrid object var dg = parent. $ ("iframe [title = 'การจัดการผลิตภัณฑ์']") รับ (0). contentWindow. $ ("#dg"); ในการส่งคืนข้อมูลที่ประมวลผลไปยังด้านนี้เพื่อแสดงดังนั้นพื้นหลังจำเป็นต้องจัดทำแพ็คเกจข้อมูลในรูปแบบ JSON และส่งไปยัง URL: 'category_query.action', ValueField: 'ID', ฟิลด์ TextField: 'type', // รายการแบบเลื่อนลงของเราแสดงชื่อหมวดหมู่ของผลิตภัณฑ์ สองความกว้างในเวลาเดียวกันแก้ไขได้: // กล่องแบบเลื่อนลงไม่อนุญาตให้แก้ไข // Combobox สืบทอดคำสั่งผสมที่สืบทอดมาด้วยดังนั้นคุณสามารถตั้งค่าการตรวจสอบได้โดยตรงที่นี่: จริง, MissingMessage: 'โปรดเลือกหมวดหมู่'}); dg.datagrid ("getselections"); // โหลดฟิลด์ข้อมูลที่สอดคล้องกันของแถวที่คุณเข้าสู่แบบฟอร์มเพื่อ echo $ ("#ff"). แบบฟอร์ม ('โหลด', {id: แถว [0] .id, ชื่อ: แถว [0] .name, ราคา: แถว [0] เปิด: แถว [0] .Open, 'category.id': แถว [0] .category.id // easyui ไม่สนับสนุนบัญชีการดำเนินการจุดจุดดังนั้นคุณต้องเพิ่มเครื่องหมายใบเสนอราคา}); // หลังจากสะท้อนข้อมูลให้ตั้งค่าฟังก์ชันการตรวจสอบ $ ("อินพุต [name = name]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนชื่อหมวดหมู่'}); $ ("อินพุต [name = price]"). numberbox ({ต้องการ: จริง, MissingMessage: 'โปรดป้อนราคาผลิตภัณฑ์', นาที: 0, ความแม่นยำ: 2, // เก็บคำนำหน้าทศนิยมสองตำแหน่ง: '$'}); $ ("input [name = 'fileImage.upload']"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดอัปโหลดภาพผลิตภัณฑ์', // ตั้งค่าวิธีการที่กำหนดเองได้: "รูปแบบ ['gif, jpg, jpeg, png']" // วงเล็บเป็นพารามิเตอร์}); $ ("textarea [name = stound]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนคำอธิบายง่ายๆของผลิตภัณฑ์'}); $ ("textarea [name = xremark]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนคำอธิบายง่ายๆของผลิตภัณฑ์'}); $ ("textarea [name = xremark]"). ValidateBox ({จำเป็น: จริง, MissingMessage: 'โปรดป้อนคำอธิบายง่ายๆของผลิตภัณฑ์'}); // ปิดใช้งานการตรวจสอบ $ ("#ff"). แบบฟอร์ม ("disablevalidation"); // เหตุการณ์ของปุ่มลงทะเบียน $ ("#btn") คลิก (ฟังก์ชั่น () {// เปิดใช้งานการตรวจสอบ $ ("#ff"). แบบฟอร์ม ("enablevalidation"); // หากการตรวจสอบประสบความสำเร็จให้ส่งข้อมูลถ้า ("#ff") 'product_update.action', // เมื่อส่งคำขอไปยังวิธีการอัพเดทของการทำโปรเจ็กต์ดำเนินการประสบความสำเร็จ: function () {// ถ้าประสบความสำเร็จให้ปิดหน้าต่างปัจจุบันและรีเฟรชหน้าผู้ปกครอง $ ("#win"). - </script> </head> <body> <form id = "ff" method = "post" enctype = "multipart/form-data"> <div> <label for = "name"> ชื่อผลิตภัณฑ์: </label> <อินพุต type = "text" name = "ชื่อ"/> </div> <label> อัปเดตรูปภาพ: </label> <อินพุต type = "file" name = "fileImage.upload"/> </div> <div> <label for = "บัญชี"> หมวดหมู่ผลิตภัณฑ์: </label> <! cols = "40" rows = "4"> </textarea> </div> <div> <label for = "xremark"> รายละเอียดคำอธิบาย: </label> <textarea name = "xremark" cols = "40" rows = "8"> </textarea> value = "true" /> no: <input type = "Radio" name = "Recomend" value = "False" /> </div> <div> <label for = "Open"> ผลิตภัณฑ์ที่มีประสิทธิภาพ: < /label> รายการ: <input type = "Radio" Name = "Open" value = "True" /> data-options = "iconcls: 'icon-edit'"> อัปเดต </a> <input type = "hidden" name = "id"/> </div> `</form> </body> </html> ส่วนการอัปเดตนั้นเหมือนกับการอัปเดตของหมวดหมู่ผลิตภัณฑ์ ฉันจะไม่ทำซ้ำอีก ต่อไปนี้คือการใช้งานส่วนการอัปเดตพื้นหลัง:
2.2 การใช้งานพื้นหลังของผลิตภัณฑ์ที่อัปเดต
@Controller ("productaction") @scope ("prototype") การผลิตชั้นเรียนสาธารณะขยาย baseaction <ductions> {// ละเว้นรหัสอื่น ๆ ... โมฆะสาธารณะอัปเดต () โยนข้อยกเว้น {// ประมวลผลรูปภาพที่อัปโหลดและบล็อกถัดไปวิเคราะห์การอัปโหลดไฟล์ struts2 // ตั้งค่าเวลาปัจจุบันเนื่องจากแผนกต้อนรับไม่ผ่านฟิลด์เวลาเข้ามาตั้งค่าตัวเองที่นี่ System.out.println (รุ่น); // อัปเดตผลิตภัณฑ์ Productservice.update (รุ่น); - เมื่อเปรียบเทียบกับการอัปเดตหมวดหมู่ผลิตภัณฑ์มีการดำเนินการอัปโหลดรูปภาพอีกหนึ่งรายการ เราจำเป็นต้องประมวลผลภาพที่อัปโหลดในพื้นหลัง เราจะวิเคราะห์ฟังก์ชั่นการอัปโหลดไฟล์ของ Struts2 โดยละเอียดในบทความถัดไป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น