The principle of adding a product part is the same as adding a product category. Refer to the article: Adding and updating a product category , but it is more complicated than a product category. Because there are many attributes of the product, there are more fields in the corresponding database. There is also an option to add a product to upload pictures. This small piece of content will be explained separately in the next article, because this involves a knowledge point, which is that Struts2 implements the file upload function. I won’t say much more. Now I will start to improve the code for adding the product part:
1. Add products
1.1 Adding UI implementation for products <br />First complete the code for adding product part in query.jsp:
Next, let's look at the specific implementation in save.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> <style type="text/css"> form div { margin:10px; } </style> <script type="text/javascript"> $(function(){ //Custom verification method registers the new function $.extend($.fn.validatebox.defaults.rules to validatebox.defaults.rules,{ //The name of the function: {The implementation body of the function (a json object again, which includes the implementation of the function and the settings of the error message)} format: { //The function implementation, if it returns false, the verification fails to validator: function(value,param){ //Get the suffix name of the current file var ext = value.substring(value.lastIndexOf('.') + 1); //Get the supported file suffix name, and then compare it to var arr = param[0].split(","); for(var i = 0; i < arr.length; i++) { if(ext == arr[i]) return true; } return false; }, //Error message message: 'File suffix must be: {0}' } }); //Remote load $("#cc").combobox({ //Send the request to the query method in categoryAction for processing. Here you need to return the processed data to this side for display, so the background needs to package the data into json format and send it to url:'category_query.action', valueField:'id', textField:'type', //The drop-down list shows all product categories panelHeight:'auto', //Adaptive height panelWidth:120,//The drop-down list is a width:120 composed of two components, //The editable:false must be set at the same time, //The drop-down box does not allow editing //combobox inherits combo inherits validatebox, so you can set verification directly here required:true, missingMessage:'Please select the category' }); $("input[name=name]").validatebox({ required:true, missingMessage:'Please enter the product name' }); $("input[name=price]").numberbox({ required:true, missingMessage:'Please enter the product price', min:0, precision:2, //Retain two decimal places prefix:'$' }); $("input[name='fileImage.upload']").validatebox({ required:true, missingMessage:'Please upload the product image', //Set custom method validType:"format['gif,jpg,jpeg,png']"//The brackets are parameters}); $("textarea[name=remark]").validatebox({ required:true, missingMessage:'Please enter a simple description of the product' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'Please enter a simple description of the product' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'Please enter a simple description of the product' }); //Disable verification $("#ff").form("disableValidation"); //Register the button's event $("#submit").click(function(){ //Enable verification $("#ff").form("enableValidation"); //If the verification is successful, submit data if($("#ff").form("validate")) { //Calling the submit method to submit data $("#ff").form('submit', { url: 'product_save.action', success: function(){ //If successful, close the current window parent.$("#win").window("close"); parent.$("iframe[title='Product Management']").get(0).contentWindow.$("#dg").datagrid("reload"); } }); } }); //Events $("#reset").click(function(){ $("#ff").form("disableValidation");//Reset does not require form verification//Reset the current form data $("#ff").form("reset"); }); }); </script> </head> <body> <form id="ff" method="post" enctype="multipart/form-data"> <div> <label>Product name:</label> <input type="text" name="name" /> </div> <div> <label>Product price:</label> <input type="text" name="price" /> </div> <div> <label>Image upload:</label> <input type="file" name="fileImage.upload" /> </div> <div> <label>Category:</label> <input id="cc" name="category.id"/> </div> <div> <label>Add to recommend:</label> Recommended:</label> Recommended: <input type="radio" name="commend" checked="checked" value="true" /> Not recommended: <input type="radio" name="commend" value="false" /> </div> <div> <label>Is it valid:</label> Listed:<input type="radio" name="open" checked="checked" value="true" /> Removed:<input type="radio" name="open" value="false" /> </div> <div> <label>Simple description:</label> <textarea name="remark" cols="40" rows="4"></textarea> </div> <div> <label>Detailed description:</label> <textarea name="xremark" cols="40" rows="8"></textarea> </div> <div> <a id="submit" href="#">Add</a> <a id="reset" href="#">Reset</a> </div> </form> </body> </html>Let's mainly look at the custom method part in the above js code, which mainly defines the verification of uploaded images. The specific analysis is as follows:
Then you can use a custom method in the image verification section:
1.2 The background implementation of adding products
@Controller("productAction") @Scope("prototype") public class ProductAction extends BaseAction<Product> { //Omit other codes... public void save() throws Exception { //Processing uploaded pictures, the next blog specifically analyzes the upload of struts2 file model.setDate(new Date()); //Set the current time, because the front desk does not pass the time field in, set it yourself here. System.out.println(model); //Product information storage productService.save(model); } } 2. Update the product
2.1 Update the UI implementation of the product
First, look at the code for the updated product part in query.jsp:
Next, let’s take a look at the content of update.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <%@ include file="/public/head.jspf" %> <style type="text/css"> form div { margin:5px; } </style> <script type="text/javascript"> $(function(){ //datagrid object var dg = parent.$("iframe[title='product management']").get(0).contentWindow.$("#dg"); //Remotely load $("#cc").combobox({ //Send the request to the query method in categoryAction for processing. Here you need to return the processed data to this side to display, so the background needs to package the data into json format and send it to url:'category_query.action', valueField:'id', textField:'type', //Our drop-down list shows the product's category name panelHeight:'auto', //Adaptive height panelWidth:120, //The drop-down list is a width:120 composed of two components, //To set two widths at the same time editable:false, //The drop-down box does not allow editing//combobox inherits combo inherits validatebox, so you can set verification directly here required:true, missingMessage:'Please select the category' }); // When completing the data echo, when updating, the user must first select the row to be updated. First we have to get which row var rows = dg.datagrid("getSelections"); //Load the corresponding data field of the row you get into the form to echo $("#ff").form('load',{ id:rows[0].id, name:rows[0].name, price:rows[0].price, remark:rows[0].remark, xremark:rows[0].xremark, comment:rows[0].commend, open:rows[0].open, 'category.id':rows[0].category.id //EasyUI does not support account.id point operations, so you need to add quotation marks}); //After echoing the data, set the verification function $("input[name=name]").validatebox({ required:true, missingMessage:'Please enter the category name' }); $("input[name=price]").numberbox({ required:true, missingMessage:'Please enter the product price', min:0, precision:2, //Retain two decimal places prefix:'$' }); $("input[name='fileImage.upload']").validatebox({ required:true, missingMessage:'Please upload the product image', //Set custom method validType:"format['gif,jpg,jpeg,png']"//The brackets are parameters}); $("textarea[name=remark]").validatebox({ required:true, missingMessage:'Please enter a simple description of the product' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'Please enter a simple description of the product' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'Please enter a simple description of the product' }); //Disable verification $("#ff").form("disableValidation"); //Register button's event $("#btn").click(function(){ //Enable verification $("#ff").form("enableValidation"); //If the verification is successful, submit data if($("#ff").form("validate")) { //Calling the submit method to submit data $("#ff").form('submit', { url: 'product_update.action', //When submitting the request to the update method of productAction executes success: function(){ //If successful, close the current window and refresh the page parent.$("#win").window("close"); dg.datagrid("reload"); } }); } }); }); </script> </head> <body> <form id="ff" method="post" enctype="multipart/form-data"> <div> <label for="name">Product name:</label> <input type="text" name="name" /> </div> <div> <label for="price">Product price:</label> <input type="text" name="price" /> </div> <div> <label>Update picture:</label> <input type="file" name="fileImage.upload" /> </div> <div> <label for="account">Product category:</label> <!-- Remote loading administrator data--> <input id="cc" name="category.id" /> </div> <div> <label for="remark">Simple description:</label> <textarea name="remark" cols="40" rows="4"></textarea> </div> <div> <label for="xremark">Detailed description:</label> <textarea name="xremark" cols="40" rows="8"></textarea> </div> <div> <label for="commend">Recommended products:</label> Yes:<input type="radio" name="commend" value="true" /> No:<input type="radio" name="commend" value="false" /> </div> <div> <label for="open">Effective products:</label> Listed:<input type="radio" name="open" value="true" /> Removed:<input type="radio" name="open" value="false" /> </div> <div> <a id="btn" href="#" data-options="iconCls:'icon-edit'">Update</a> <input type="hidden" name="id" /> </div> ` </form> </body> </html> The update part is basically the same as the update of the product category. I will not repeat it again. The following is the implementation of the background update part:
2.2 Updated product background implementation
@Controller("productAction") @Scope("prototype") public class ProductAction extends BaseAction<Product> { //Omit other codes... public void update() throws Exception { //Process the uploaded pictures, and the next blog specifically analyzes the upload of struts2 file model.setDate(new Date()); //Set the current time, because the front desk does not pass the time field in, set it yourself here. System.out.println(model); //Update product productService.update(model); } } Compared with updating product categories, there is only one more image upload operation. We need to process uploaded images in the background. We will analyze the file upload function of struts2 in detail in the next article.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.