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的文件上傳功效。
以上就是本文的全體內容,願望對年夜家的進修有所贊助,也願望年夜家多多支撐。