SSH框架網上商城項目第12戰之添加和更新商品功效。本站提示廣大學習愛好者:(SSH框架網上商城項目第12戰之添加和更新商品功效)文章只能為提供參考,不一定能成為您想要的結果。以下是SSH框架網上商城項目第12戰之添加和更新商品功效正文
添加商品部門道理和添加商品種別是一樣的,參考文章:添加和更新商品種別,不外要比商品種別龐雜,由於商品的屬性有許多,對應的數據庫中的字段也就多了,添加商品還有個選項是上傳圖片,這一小塊內容會鄙人一篇文章中零丁解釋,由於這觸及到一個常識點,就是Struts2完成文件上傳功效。其他空話不多說了,如今開端完美添加商品部門的代碼:
1. 添加商品
1.1 添加商品的UI完成
起首完成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> <%@ include file="/public/head.jspf" %> <style type="text/css"> form div { margin:10px; } </style> <script type="text/javascript"> $(function(){ //自界說驗證辦法向validatebox.defaults.rules中注冊新函數 $.extend($.fn.validatebox.defaults.rules,{ //函數的稱號:{函數的完成體(又是一個json對象,外面包含函數的完成,和毛病新聞的設置)} format:{ //函數完成,假如前往為false,則驗證掉敗 validator: function(value,param){ //獲得以後文件的後綴名 var ext = value.substring(value.lastIndexOf('.') + 1); //獲得支撐的文件後綴名,然後比擬便可 var arr = param[0].split(","); for(var i = 0; i < arr.length; i++) { if(ext == arr[i]) return true; } return false; }, //毛病新聞 message: '文件後綴必需為:{0}' } }); //對商品種別的下拉列表框停止長途加載 $("#cc").combobox({ //將要求發送給categoryAction中的query辦法處置,這裡須要將處置好的數據前往到這邊來顯示了 ,所今後台須要將數據打包成json格局發過去 url:'category_query.action', valueField:'id', textField:'type', //我們下拉列表中顯示的是一切的商品種別 panelHeight:'auto', //自順應高度 panelWidth:120,//下拉列表是兩個組件構成的 width:120, //要同時設置兩個寬度才行 editable:false, //下拉框不許可編纂 //combobox繼續combo繼續validatebox,所以可以直接在這裡設置驗證 required:true, missingMessage:'請選擇所屬種別' }); $("input[name=name]").validatebox({ required:true, missingMessage:'請輸出商品稱號' }); $("input[name=price]").numberbox({ required:true, missingMessage:'請輸出商品價錢', min:0, precision:2, //保存兩位小數 prefix:'$' }); $("input[name='fileImage.upload']").validatebox({ required:true, missingMessage:'請上傳商品圖片', //設置自界說辦法 validType:"format['gif,jpg,jpeg,png']"//中括號外面是參數 }); $("textarea[name=remark]").validatebox({ required:true, missingMessage:'請輸出商品的簡略描寫' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'請輸出商品的簡略描寫' }); //窗體彈出默許時禁用驗證 $("#ff").form("disableValidation"); //注冊button的事宜 $("#submit").click(function(){ //開啟驗證 $("#ff").form("enableValidation"); //假如驗證勝利,則提交數據 if($("#ff").form("validate")) { //挪用submit辦法提交數據 $("#ff").form('submit', { url: 'product_save.action', success: function(){ //假如勝利了,封閉以後窗口 parent.$("#win").window("close"); parent.$("iframe[title='商品治理']").get(0).contentWindow.$("#dg").datagrid("reload"); } }); } }); //注冊button的事宜 $("#reset").click(function(){ $("#ff").form("disableValidation");//重置不須要表單驗證 //重置以後表雙數據 $("#ff").form("reset"); }); }); </script> </head> <body> <form title="添加商品" id="ff" method="post" enctype="multipart/form-data"> <div> <label>商品稱號:</label> <input type="text" name="name" /> </div> <div> <label>商品價錢:</label> <input type="text" name="price" /> </div> <div> <label>圖片上傳:</label> <input type="file" name="fileImage.upload" /> </div> <div> <label>所屬種別:</label> <input id="cc" name="category.id"/> </div> <div> <label>參加推舉:</label> 推舉:<input type="radio" name="commend" checked="checked" value="true" /> 不推舉:<input type="radio" name="commend" value="false" /> </div> <div> <label>能否有用:</label> 上架:<input type="radio" name="open" checked="checked"value="true" /> 下架:<input type="radio" name="open" value="false" /> </div> <div> <label>簡略描寫:</label> <textarea name="remark" cols="40" rows="4"></textarea> </div> <div> <label>具體描寫:</label> <textarea name="xremark" cols="40" rows="8"></textarea> </div> <div> <a id="submit" href="#" class="easyui-linkbutton">添 加</a> <a id="reset" href="#" class="easyui-linkbutton">重 置</a> </div> </form> </body> </html>
我們重要來看一下下面js代碼中中自界說辦法部門,重要是界說對上傳的圖片的驗證,詳細剖析以下:
然後在圖片驗證這塊便可以應用自界說的辦法了:
1.2 添加商品的後台完成
@Controller("productAction") @Scope("prototype") public class ProductAction extends BaseAction<Product> { //省略其他代碼…… public void save() throws Exception { //處置上傳的圖片,下一篇博客專門剖析struts2文件上傳 model.setDate(new Date()); //設置一下以後時光,由於前台沒有把時光字段傳出去,這裡本身設置一下便可 System.out.println(model); //商品信息入庫 productService.save(model); } }
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> <%@ include file="/public/head.jspf" %> <style type="text/css"> form div { margin:5px; } </style> <script type="text/javascript"> $(function(){ //iframe中的datagrid對象 var dg = parent.$("iframe[title='商品治理']").get(0).contentWindow.$("#dg"); //對商品類的下拉列表框停止長途加載 $("#cc").combobox({ //將要求發送給categoryAction中的query辦法處置,這裡須要將處置好的數據前往到這邊來顯示了 ,所今後台須要將數據打包成json格局發過去 url:'category_query.action', valueField:'id', textField:'type', //我們下拉列表中顯示的是商品的種別名 panelHeight:'auto', //自順應高度 panelWidth:120,//下拉列表是兩個組件構成的 width:120, //要同時設置兩個寬度才行 editable:false, //下拉框不許可編纂 //combobox繼續combo繼續validatebox,所以可以直接在這裡設置驗證 required:true, missingMessage:'請選擇所屬種別' }); // 完成數據的回顯,更新時,用戶確定先選擇了要更新的那一行,起首我們得拿到那一行 var rows = dg.datagrid("getSelections"); //將拿到的那一行對應的數據字段加載到表單裡,完成回顯 $("#ff").form('load',{ id:rows[0].id, name:rows[0].name, price:rows[0].price, remark:rows[0].remark, xremark:rows[0].xremark, commend:rows[0].commend, open:rows[0].open, 'category.id':rows[0].category.id //EasyUI不支撐account.id這類點操作,所以要加個引號 }); //回顯完了數據後,設置一下驗證功效 $("input[name=name]").validatebox({ required:true, missingMessage:'請輸出種別稱號' }); $("input[name=price]").numberbox({ required:true, missingMessage:'請輸出商品價錢', min:0, precision:2, //保存兩位小數 prefix:'$' }); $("input[name='fileImage.upload']").validatebox({ required:true, missingMessage:'請上傳商品圖片', //設置自界說辦法 validType:"format['gif,jpg,jpeg,png']"//中括號外面是參數 }); $("textarea[name=remark]").validatebox({ required:true, missingMessage:'請輸出商品的簡略描寫' }); $("textarea[name=xremark]").validatebox({ required:true, missingMessage:'請輸出商品的簡略描寫' }); //窗體彈出默許時禁用驗證 $("#ff").form("disableValidation"); //注冊button的事宜 $("#btn").click(function(){ //開啟驗證 $("#ff").form("enableValidation"); //假如驗證勝利,則提交數據 if($("#ff").form("validate")) { //挪用submit辦法提交數據 $("#ff").form('submit', { url: 'product_update.action', //提交時將要求傳給productAction的update辦法履行 success: function(){ //假如勝利了,封閉以後窗口,並刷新頁面 parent.$("#win").window("close"); dg.datagrid("reload"); } }); } }); }); </script> </head> <body> <form title="更新商品" id="ff" method="post" enctype="multipart/form-data"> <div> <label for="name">商品稱號:</label> <input type="text" name="name" /> </div> <div> <label for="price">商品價錢:</label> <input type="text" name="price" /> </div> <div> <label>更新圖片:</label> <input type="file" name="fileImage.upload" /> </div> <div> <label for="account">所屬商品類:</label> <!-- 長途加載治理員數據 --> <input id="cc" name="category.id" /> </div> <div> <label for="remark">簡略描寫:</label> <textarea name="remark" cols="40" rows="4"></textarea> </div> <div> <label for="xremark">具體描寫:</label> <textarea name="xremark" cols="40" rows="8"></textarea> </div> <div> <label for="commend">推舉商品:</label> 是:<input type="radio" name="commend" value="true" /> 否:<input type="radio" name="commend" value="false" /> </div> <div> <label for="open">有用商品:</label> 上架:<input type="radio" name="open" value="true" /> 下架:<input type="radio" name="open" value="false" /> </div> <div> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">更新</a> <input type="hidden" name="id" /> </div> ` </form> </body> </html>
更新部門與商品種別的更新根本雷同,不再贅述,上面是後台更新部門的完成:
2.2 更新商品的後台完成
@Controller("productAction") @Scope("prototype") public class ProductAction extends BaseAction<Product> { //省略其他代碼…… public void update() throws Exception { //處置上傳的圖片,下一篇博客專門剖析struts2文件上傳 model.setDate(new Date()); //設置一下以後時光,由於前台沒有把時光字段傳出去,這裡本身設置一下便可 System.out.println(model); //更新商品 productService.update(model); } }
跟更新商品種別比擬,獨一多了個圖片上傳的操作,要在後台處置上傳的圖片,我們鄙人一篇文章具體剖析struts2的文件上傳功效。
以上就是本文的全體內容,願望對年夜家的進修有所贊助,也願望年夜家多多支撐。