添加商品部分原理和添加商品類別是一樣的，參考文章：添加和更新商品類別，不過要比商品類別復雜，因為商品的屬性有很多，對應的數據庫中的字段也就多了，添加商品還有個選項是上傳圖片，這一小塊內容會在下一篇文章中單獨說明，因為這涉及到一個知識點，就是Struts2實現文件上傳功能。其他廢話不多說了，現在開始完善添加商品部分的代碼：
1. 添加商品
1.1 添加商品的UI實現
首先完成query.jsp中添加商品部分的代碼：
接下來我們看save.jsp中的具體實現：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<%@ 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 添加商品的后臺實現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@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的內容：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<%@ 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 更新商品的后臺實現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@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的文件上傳功能。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
