快捷導(dǎo)航

SSH框架網(wǎng)上商城項目第12戰(zhàn)之添加和更新商品功能

更新時間：2016年06月03日 11:53:32 作者：eson_15

這篇文章主要介紹了SSH框架網(wǎng)上商城項目第12戰(zhàn)之添加和更新商品功能的實現(xiàn)代碼，感興趣的小伙伴們可以參考一下

添加商品部分原理和添加商品類別是一樣的，參考文章：添加和更新商品類別，不過要比商品類別復(fù)雜，因為商品的屬性有很多，對應(yīng)的數(shù)據(jù)庫中的字段也就多了，添加商品還有個選項是上傳圖片，這一小塊內(nèi)容會在下一篇文章中單獨說明，因為這涉及到一個知識點，就是Struts2實現(xiàn)文件上傳功能。其他廢話不多說了，現(xiàn)在開始完善添加商品部分的代碼：
1. 添加商品
1.1 添加商品的UI實現(xiàn)
首先完成query.jsp中添加商品部分的代碼：

接下來我們看save.jsp中的具體實現(xiàn)：

<%@ 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中注冊新函數(shù) 
  $.extend($.fn.validatebox.defaults.rules,{ 
  //函數(shù)的名稱：{函數(shù)的實現(xiàn)體(又是一個json對象，里面包括函數(shù)的實現(xiàn)，和錯誤消息的設(shè)置)} 
  format:{ 
   //函數(shù)實現(xiàn)，如果返回為false，則驗證失敗 
   validator: function(value,param){ 
   //獲取當(dāng)前文件的后綴名 
   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}' 
  } 
  }); 
  
  //對商品類別的下拉列表框進(jìn)行遠(yuǎn)程加載 
  $("#cc").combobox({ 
  //將請求發(fā)送給categoryAction中的query方法處理，這里需要將處理好的數(shù)據(jù)返回到這邊來顯示了 ，所以后臺需要將數(shù)據(jù)打包成json格式發(fā)過來 
  url:'category_query.action', 
  valueField:'id', 
  textField:'type', //我們下拉列表中顯示的是所有的商品類別 
  panelHeight:'auto', //自適應(yīng)高度 
  panelWidth:120,//下拉列表是兩個組件組成的 
  width:120, //要同時設(shè)置兩個寬度才行 
  editable:false, //下拉框不允許編輯 
  //combobox繼承combo繼承validatebox，所以可以直接在這里設(shè)置驗證 
  required:true, 
  missingMessage:'請選擇所屬類別' 
  }); 
   
  $("input[name=name]").validatebox({ 
  required:true, 
  missingMessage:'請輸入商品名稱' 
  }); 
 
  $("input[name=price]").numberbox({ 
  required:true, 
  missingMessage:'請輸入商品價格', 
  min:0, 
  precision:2, //保留兩位小數(shù) 
  prefix:'$' 
  }); 
  $("input[name='fileImage.upload']").validatebox({ 
  required:true, 
  missingMessage:'請上傳商品圖片', 
  //設(shè)置自定義方法 
  validType:"format['gif,jpg,jpeg,png']"http://中括號里面是參數(shù) 
  }); 
 
  $("textarea[name=remark]").validatebox({ 
  required:true, 
  missingMessage:'請輸入商品的簡單描述' 
  }); 
  
  $("textarea[name=xremark]").validatebox({ 
  required:true, 
  missingMessage:'請輸入商品的簡單描述' 
  }); 
  
  //窗體彈出默認(rèn)時禁用驗證 
  $("#ff").form("disableValidation"); 
  
  //注冊button的事件 
  $("#submit").click(function(){ 
  //開啟驗證 
  $("#ff").form("enableValidation"); 
  //如果驗證成功，則提交數(shù)據(jù) 
  if($("#ff").form("validate")) { 
   //調(diào)用submit方法提交數(shù)據(jù) 
   $("#ff").form('submit', { 
   url: 'product_save.action', 
   success: function(){ 
    //如果成功了，關(guān)閉當(dāng)前窗口 
    parent.$("#win").window("close"); 
    parent.$("iframe[title='商品管理']").get(0).contentWindow.$("#dg").datagrid("reload"); 
   } 
   }); 
  } 
  }); 
  
  //注冊button的事件 
  $("#reset").click(function(){ 
  $("#ff").form("disableValidation");//重置不需要表單驗證 
  //重置當(dāng)前表單數(shù)據(jù) 
  $("#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>詳細(xì)描述:</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 添加商品的后臺實現(xiàn)

@Controller("productAction") 
@Scope("prototype") 
public class ProductAction extends BaseAction<Product> { 
 
 //省略其他代碼…… 
 
 public void save() throws Exception { 
 //處理上傳的圖片，下一篇博客專門分析struts2文件上傳 
  
 model.setDate(new Date()); //設(shè)置一下當(dāng)前時間，因為前臺沒有把時間字段傳進(jìn)來，這里自己設(shè)置一下即可 
 System.out.println(model); 
 //商品信息入庫 
 productService.save(model); 
 } 
}

2. 更新商品
2.1 更新商品的UI實現(xiàn)
首先看下query.jsp中更新商品部分的代碼：

接下來看看update.jsp的內(nèi)容：

<%@ 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"); 
  
  //對商品類的下拉列表框進(jìn)行遠(yuǎn)程加載 
  $("#cc").combobox({ 
  //將請求發(fā)送給categoryAction中的query方法處理，這里需要將處理好的數(shù)據(jù)返回到這邊來顯示了 ，所以后臺需要將數(shù)據(jù)打包成json格式發(fā)過來 
  url:'category_query.action', 
  valueField:'id', 
  textField:'type', //我們下拉列表中顯示的是商品的類別名 
  panelHeight:'auto', //自適應(yīng)高度 
  panelWidth:120,//下拉列表是兩個組件組成的 
  width:120, //要同時設(shè)置兩個寬度才行 
  editable:false, //下拉框不允許編輯 
  //combobox繼承combo繼承validatebox，所以可以直接在這里設(shè)置驗證 
  required:true, 
  missingMessage:'請選擇所屬類別' 
  }); 
  
  // 完成數(shù)據(jù)的回顯，更新時，用戶肯定先選擇了要更新的那一行，首先我們得拿到那一行 
  var rows = dg.datagrid("getSelections"); 
  //將拿到的那一行對應(yīng)的數(shù)據(jù)字段加載到表單里，實現(xiàn)回顯 
  $("#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這種點操作，所以要加個引號 
  }); 
 
  //回顯完了數(shù)據(jù)后，設(shè)置一下驗證功能 
  $("input[name=name]").validatebox({ 
  required:true, 
  missingMessage:'請輸入類別名稱' 
  }); 
  $("input[name=price]").numberbox({ 
  required:true, 
  missingMessage:'請輸入商品價格', 
  min:0, 
  precision:2, //保留兩位小數(shù) 
  prefix:'$' 
  }); 
  $("input[name='fileImage.upload']").validatebox({ 
  required:true, 
  missingMessage:'請上傳商品圖片', 
  //設(shè)置自定義方法 
  validType:"format['gif,jpg,jpeg,png']"http://中括號里面是參數(shù) 
  }); 
 
  $("textarea[name=remark]").validatebox({ 
  required:true, 
  missingMessage:'請輸入商品的簡單描述' 
  }); 
  
  $("textarea[name=xremark]").validatebox({ 
  required:true, 
  missingMessage:'請輸入商品的簡單描述' 
  }); 
  //窗體彈出默認(rèn)時禁用驗證 
  $("#ff").form("disableValidation"); 
  //注冊button的事件 
  $("#btn").click(function(){ 
  //開啟驗證 
  $("#ff").form("enableValidation"); 
  //如果驗證成功，則提交數(shù)據(jù) 
  if($("#ff").form("validate")) { 
   //調(diào)用submit方法提交數(shù)據(jù) 
   $("#ff").form('submit', { 
   url: 'product_update.action', //提交時將請求傳給productAction的update方法執(zhí)行 
   success: function(){ 
    //如果成功了，關(guān)閉當(dāng)前窗口，并刷新頁面 
    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> 
  <!-- 遠(yuǎn)程加載管理員數(shù)據(jù) --> 
  <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">詳細(xì)描述:</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>

更新部分與商品類別的更新基本相同，不再贅述，下面是后臺更新部分的實現(xiàn)：
2.2 更新商品的后臺實現(xiàn)

@Controller("productAction") 
@Scope("prototype") 
public class ProductAction extends BaseAction<Product> { 
 
 //省略其他代碼…… 
 
 public void update() throws Exception { 
 //處理上傳的圖片，下一篇博客專門分析struts2文件上傳 
  
 model.setDate(new Date()); //設(shè)置一下當(dāng)前時間，因為前臺沒有把時間字段傳進(jìn)來，這里自己設(shè)置一下即可 
 System.out.println(model); 
 //更新商品 
 productService.update(model); 
 } 
}

跟更新商品類別相比，唯一多了個圖片上傳的操作，要在后臺處理上傳的圖片，我們在下一篇文章詳細(xì)分析struts2的文件上傳功能。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: