SSH框架網(wǎng)上商城項(xiàng)目第10戰(zhàn)之搭建商品類基本模塊

更新時(shí)間：2016年06月03日 11:30:08 作者：eson_15

這篇文章主要為大家詳細(xì)介紹了SSH框架網(wǎng)上商城項(xiàng)目第10戰(zhàn)之搭建商品類基本模塊的相關(guān)資料，有一定的實(shí)用性，感興趣的小伙伴們可以參考一下

前面我們完成了與商品類別相關(guān)的業(yè)務(wù)邏輯，接下來我們開始做具體商品部分。
1. 數(shù)據(jù)庫(kù)建表并映射Model
首先我們?cè)跀?shù)據(jù)庫(kù)中新建一張表，然后使用逆向工程將表映射成Model類，表如下：

/*=============================*/ 
/* Table: 商品表結(jié)構(gòu)   */ 
/*=============================*/ 
create table product 
( 
 /* 商品編號(hào),自動(dòng)增長(zhǎng) */ 
 id     int primary key not null auto_increment, 
 /* 商品名稱 */ 
 name    varchar(20), 
 /* 商品價(jià)格 */ 
 price    decimal(8,2), 
 /* 商品圖片 */ 
 pic     varchar(200), 
 /* 商品簡(jiǎn)單介紹 */ 
 remark    longtext, 
 /* 商品詳細(xì)介紹 */ 
 xremark    longtext, 
 /* 商品生產(chǎn)日期 */ 
 date    timestamp default CURRENT_TIMESTAMP, 
 /* 是否為推薦商品,推薦商品才有可能顯示在商城首頁(yè) */ 
 commend    bool, 
 /* 是否為有效商品,有效商品才有可能顯示在商城首頁(yè) */ 
 open    bool, 
 /* 商品所在的類別編號(hào)*/ 
 cid     int, 
 constraint cid_FK foreign key(cid) references category(id) 
);

使用逆向工程映射為Model類就不贅述了，前面有提到如何使用逆向工程生成Model。

2. 完成商品類的Service層和Action的架構(gòu)
2.1 商品類的Service層架構(gòu)
與前面category一樣，product也得有個(gè)service來操作與商品相關(guān)的業(yè)務(wù)邏輯，所以我們得寫一個(gè)ProductService和ProductServiceImpl的架構(gòu)出來，具體如下：

//ProductService接口繼承BaseService<Product> 
public interface ProductService extends BaseService<Product> { 
  
} 
 
//ProductServiceImpl實(shí)現(xiàn)類繼承BaseServiceImpl<Product>，并實(shí)現(xiàn)上面的ProductService接口 
@Service("productService") 
public class ProductServiceImpl extends BaseServiceImpl<Product> implements ProductService { 
 
}

2.2 商品類的Action架構(gòu)
首先得完善一下BaseAction中關(guān)于Service層的注解

@Controller("baseAction") 
@Scope("prototype") 
public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> { 
 
 @Resource 
 protected ProductService productService; 
 
  //其他代碼省略，還是原來的代碼…… 
}

然后我們寫一個(gè)ProductAction繼承該方法：

public class ProductAction extends BaseAction<Product> { 
  
}

至此，關(guān)于商品的后臺(tái)架構(gòu)就基本搭建好了，接下來就是完善里面的具體功能和業(yè)務(wù)邏輯了。

3. 完成前臺(tái)的基本結(jié)構(gòu)
前臺(tái)的基本結(jié)構(gòu)和商品類的一樣，我們看一下已經(jīng)完成的商品類的前臺(tái)都有哪些文件：

我們先根據(jù)其商品類的前臺(tái)文件，拷貝一份到product文件夾中，然后我們?cè)僮鱿鄳?yīng)的修改。先來分析一下流程：首先index.jsp到aindex.jsp顯示左側(cè)菜單欄，當(dāng)點(diǎn)擊類別管理時(shí)，進(jìn)入category/query.jsp頁(yè)面右側(cè)顯示所有商品類別信息，搜索和刪除功能均在此頁(yè)面，不需要彈出新的窗口，添加彈出save.jsp窗口，更新彈出update.jsp窗口。當(dāng)點(diǎn)擊商品管理的時(shí)候，進(jìn)入product/query.jsp頁(yè)面右側(cè)顯示所有商品信息，搜索和刪除功能均在此頁(yè)面完成，添加和更新分別彈出save.jsp和update.jsp。接下來我們把各個(gè)頁(yè)面的框架搭建好，然后往相應(yīng)的部分填東西即可。

首先在aindex.jsp中添加如下代碼：

接下來，我們完成query.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"> 
  body { 
   margin: 1px; 
  } 
  .searchbox { 
   margin: -3; 
  } 
 </style> 
 <script type="text/javascript"> 
  $(function(){ 
   $('#dg').datagrid({  
    //url地址改為請(qǐng)求productAction中的queryJoinCategory方法 
    url:'product_queryJoinCategory.action', 
    loadMsg:'Loading......', 
    queryParams:{name:''},//這里參數(shù)改成name，參數(shù)值為空，表示我們要顯示所有商品，后臺(tái)是根據(jù)商品name屬性查詢的 
    //width:300, 
    fitColumns:true, 
    striped:true, 
    nowrap:true, 
    singleSelect:false, 
    pagination:true, 
    pageSize:5, 
    pageList:[5,10,15,20], 
    idField:'id',//指定id為標(biāo)識(shí)字段，在刪除，更新的時(shí)候有用，如果配置此字段，在翻頁(yè)時(shí)，換頁(yè)不會(huì)影響選中的項(xiàng) 
     
    //toolbar定義添加、刪除、更新按鈕以及搜索框 
    toolbar: [{ 
     iconCls: 'icon-add', 
     text:'添加商品', 
     handler: function(){ 
      //添加觸發(fā)代碼 
     } 
     },'-',{ 
     iconCls: 'icon-edit', 
     text:'更新商品', 
     handler: function(){ 
           //添加觸發(fā)代碼 
     } 
     },'-',{ 
     iconCls: 'icon-remove', 
      text:'刪除商品', 
     handler: function(){ 
      //添加觸發(fā)代碼      
     } 
    },'-',{ //查詢按鈕不是LinkButton，它有語(yǔ)法，但是也支持解析HTML標(biāo)簽 
     text:"<input id='ss' name='serach' />" 
    }], 
    rowStyler: function(index,row){ 
     console.info("index" + index + "," + row) 
     if(index % 2 == 0) { 
      return 'background-color:#fff;'; 
     } else { 
      return 'background-color:#c4e1e1;'; 
     } 
      
     }, 
    frozenColumns:[[ 
      {field:'checkbox',checkbox:true}, 
     {field:'id',title:'商品編號(hào)',width:100}  
     ]], 
    columns:[[      
     {field:'name',title:'商品名稱',width:100},  
     {field:'price',title:'商品價(jià)格',width:100}, 
     {field:'remark',title:'簡(jiǎn)單描述',width:100}, 
     {field:'xremark',title:'詳細(xì)描述',width:100}, 
     {field:'date',title:'上架時(shí)間',width:100}, 
     {field:'commend',title:'推薦商品',width:100, 
      formatter: function(value,row,index){ 
       if(value) { 
        return "<input type='checkbox' checked='checked' disabled='true'"; 
       } else { 
        return "<input type='checkbox' disabled='true'"; 
       } 
       } 
     }, 
     {field:'open',title:'有效商品',width:100, 
      formatter: function(value,row,index){ 
       if(value) { 
        return "<input type='checkbox' checked='checked' disabled='true'"; 
       } else { 
        return "<input type='checkbox' disabled='true'"; 
       } 
      } 
      }, 
     {field:'category.type',title:'所屬商品類別',width:200, //category.type是商品類別 
      formatter: function(value,row,index){ 
       if(row.category != null && row.category.type != null) { 
        return row.category.type; //如果商品類別不為空，返回商品類別 
       } else { 
        return "此商品暫時(shí)未分類"; 
       } 
       } 
     } 
    ]]  
   }); 
   //把普通的文本框轉(zhuǎn)化為查詢搜索文本框 
   $('#ss').searchbox({ 
    //觸發(fā)查詢事件 
     searcher:function(value,name){ //value表示輸入的值 
     //添加觸發(fā)代碼 
    }, 
    prompt:'請(qǐng)輸入搜索關(guān)鍵字' 
   }); 
  }); 
 </script> 
 </head> 
 
 <body> 
 <table id="dg"></table> 
  
 </body> 
</html>

接下來我們完成productAction中的queryJoinCategory方法，在這之前，先要完成service部分，我們都是先從底層慢慢往上開發(fā)的：

//ProductService接口 
public interface ProductService extends BaseService<Product> { 
  
 //查詢商品信息，級(jí)聯(lián)類別 
 public List<Product> queryJoinCategory(String type, int page, int size); //使用商品的名稱查詢 
 //根據(jù)關(guān)鍵字查詢總記錄數(shù) 
 public Long getCount(String type); 
} 
 
@SuppressWarnings("unchecked") 
@Service("productService") 
public class ProductServiceImpl extends BaseServiceImpl<Product> implements ProductService { 
 
 @Override 
 public List<Product> queryJoinCategory(String name, int page, int size) { 
  String hql = "from Product p left join fetch p.category where p.name like :name"; 
  return getSession().createQuery(hql) 
    .setString("name", "%" + name + "%") 
    .setFirstResult((page-1) * size) //從第幾個(gè)開始顯示 
    .setMaxResults(size) //顯示幾個(gè) 
    .list(); 
 } 
  
 @Override 
 public Long getCount(String name) { 
  String hql = "select count(p) from Product p where p.name like :name"; 
  return (Long) getSession().createQuery(hql) 
   .setString("name", "%" + name + "%") 
   .uniqueResult(); //返回一條記錄:總記錄數(shù) 
 } 
 
}

下面可以完成productAction中的queryJoinCategory方法了：

@Controller("productAction") 
@Scope("prototype") 
public class ProductAction extends BaseAction<Product> { 
  
 public String queryJoinCategory() { 
  System.out.println("name:" + model.getName()); 
  System.out.println("page：" + page); 
  System.out.println("rows：" + rows); 
   
  //用來存儲(chǔ)分頁(yè)的數(shù)據(jù) 
  pageMap = new HashMap<String, Object>(); 
   
  //根據(jù)關(guān)鍵字和分頁(yè)的參數(shù)查詢相應(yīng)的數(shù)據(jù) 
  List<Product> productList = productService.queryJoinCategory(model.getName(), page, rows); 
  pageMap.put("rows", productList); //存儲(chǔ)為JSON格式 
  //根據(jù)關(guān)鍵字查詢總記錄數(shù) 
  Long total = productService.getCount(model.getName()); 
//  System.out.println(total); 
  pageMap.put("total", total); //存儲(chǔ)為JSON格式 
  return "jsonMap"; 
 } 
 
}

接下來在struts.xml中進(jìn)行配置，跟之前的商品類一樣的流程，到這里可以看出，開發(fā)好了一個(gè)，下面一個(gè)就快了：

<action name="product_*" class="productAction" method="{1}"> 
 <result name="jsonMap" type="json"> 
  <param name="root">pageMap</param> 
  <param name="excludeProperties"> 
   <!-- rows[0].category.account --> 
   <!-- 把所有account過濾掉，否則會(huì)出現(xiàn)懶加載問題，該部分下面截圖 -->   
  </param> 
 </result> 
</action>