前面我們完成了與商品類别相關的業務邏輯,接下來我們開始做具體商品部分。

  1. 數據庫建表并映射Model

  首先我們在數據庫中新建一張表,然後使用逆向工程将表映射成Model類,表如下:

SQL代碼
  1. /*=============================*/    
  2. /* Table: 商品表結構            */    
  3. /*=============================*/    
  4. create table product    
  5. (    
  6.    /* 商品編号,自動增長 */    
  7.    id                  int primary key not null auto_increment,    
  8.    /* 商品名稱 */    
  9.    name                varchar(20),    
  10.    /* 商品價格 */    
  11.    price               decimal(8,2),    
  12.    /* 商品圖片 */    
  13.    pic                 varchar(200),    
  14.    /* 商品簡單介紹 */    
  15.    remark              longtext,    
  16.    /* 商品詳細介紹 */    
  17.    xremark             longtext,    
  18.    /* 商品生産日期 */    
  19.    date                timestamp default CURRENT_TIMESTAMP,    
  20.    /* 是否為推薦商品,推薦商品才有可能顯示在商城首頁 */    
  21.    commend             bool,    
  22.    /* 是否為有效商品,有效商品才有可能顯示在商城首頁 */    
  23.    open                bool,    
  24.    /* 商品所在的類别編号*/    
  25.    cid                  int,    
  26.    constraint cid_FK foreign key(cid) references category(id)    
  27. );    

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

  2. 完成商品類的Service層和Action的架構

  2.1 商品類的Service層架構

  與前面category一樣,product也得有個service來操作與商品相關的業務邏輯,所以我們得寫一個ProductService和ProductServiceImpl的架構出來,具體如下:

Java代碼
  1. //ProductService接口繼承BaseService<Product>    
  2. public interface ProductService extends BaseService<Product> {    
  3.         
  4. }    
  5.     
  6. //ProductServiceImpl實現類繼承BaseServiceImpl<Product>,并實現上面的ProductService接口    
  7. @Service("productService")    
  8. public class ProductServiceImpl extends BaseServiceImpl<Product> implements ProductService {    
  9.     
  10. }    

  2.2 商品類的Action架構

  首先得完善一下BaseAction中關于Service層的注解

Java代碼
  1. @Controller("baseAction")    
  2. @Scope("prototype")    
  3. public class BaseAction<T> extends ActionSupport implements RequestAware,SessionAware,ApplicationAware,ModelDriven<T> {    
  4.     
  5.     @Resource    
  6.     protected ProductService productService;    
  7.     
  8.         //其他代碼省略,還是原來的代碼……      
  9. }  

  然後我們寫一個ProductAction繼承該方法:

Java代碼
  1. public class ProductAction extends BaseAction<Product> {    
  2.         
  3. }    

  至此,關于商品的後台架構就基本搭建好了,接下來就是完善裡面的具體功能和業務邏輯了。

  3. 完成前台的基本結構

  前台的基本結構和商品類的一樣,我們看一下已經完成的商品類的前台都有哪些文件:

SSH電商項目實戰之十:商品類基本模塊的搭建

  我們先根據其商品類的前台文件,拷貝一份到product文件夾中,然後我們再做相應的修改。先來分析一下流程:首先index.jsp到aindex.jsp顯示左側菜單欄,當點擊類别管理時,進入category/query.jsp頁面右側顯示所有商品類别信息,搜索和删除功能均在此頁面,不需要彈出新的窗口,添加彈出save.jsp窗口,更新彈出update.jsp窗口。當點擊商品管理的時候,進入product/query.jsp頁面右側顯示所有商品信息,搜索和删除功能均在此頁面完成,添加和更新分别彈出save.jsp和update.jsp。接下來我們把各個頁面的框架搭建好,然後往相應的部分填東西即可。

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

SSH電商項目實戰之十:商品類基本模塊的搭建

  接下來,我們完成query.jsp的框架:

XML/HTML代碼
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4.   <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6.     <style type="text/css">    
  7.         body {    
  8.             margin: 1px;    
  9.         }    
  10.         .searchbox {    
  11.           margin: -3;    
  12.         }    
  13.     </style>    
  14.     <script type="text/javascript">    
  15.         $(function(){    
  16.             $('#dg').datagrid({       
  17.                 //url地址改為請求productAction中的queryJoinCategory方法    
  18.                 url:'product_queryJoinCategory.action',    
  19.                 loadMsg:'Loading......',    
  20.                 queryParams:{name:''},//這裡參數改成name,參數值為空,表示我們要顯示所有商品,後台是根據商品name屬性查詢的    
  21.                 //width:300,    
  22.                 fitColumns:true,    
  23.                 striped:true,    
  24.                 nowrap:true,    
  25.                 singleSelect:false,    
  26.                 pagination:true,    
  27.                 pageSize:5,    
  28.                 pageList:[5,10,15,20],    
  29.                 idField:'id',//指定id為标識字段,在删除,更新的時候有用,如果配置此字段,在翻頁時,換頁不會影響選中的項    
  30.                     
  31.                 //toolbar定義添加、删除、更新按鈕以及搜索框    
  32.                 toolbar: [{    
  33.                     iconCls: 'icon-add',    
  34.                     text:'添加商品',    
  35.                     handler: function(){    
  36.                         //添加觸發代碼    
  37.                     }    
  38.                  },'-',{    
  39.                     iconCls: 'icon-edit',    
  40.                     text:'更新商品',    
  41.                     handler: function(){    
  42.                                             //添加觸發代碼    
  43.                     }    
  44.                  },'-',{    
  45.                     iconCls: 'icon-remove',    
  46.                      text:'删除商品',    
  47.                     handler: function(){    
  48.                         //添加觸發代碼                        
  49.                     }    
  50.                 },'-',{ //查詢按鈕不是LinkButton,它有語法,但是也支持解析HTML标簽    
  51.                     text:"<input id='ss' name='serach' />"    
  52.                 }],    
  53.                 rowStyler: function(index,row){    
  54.                     console.info("index" + index + "," + row)    
  55.                     if(index % 2 == 0) {    
  56.                         return 'background-color:#fff;';    
  57.                     } else {    
  58.                         return 'background-color:#c4e1e1;';    
  59.                     }    
  60.                         
  61.                  },    
  62.                 frozenColumns:[[    
  63.                      {field:'checkbox',checkbox:true},    
  64.                     {field:'id',title:'商品編号',width:100}       
  65.                  ]],    
  66.                 columns:[[                         
  67.                     {field:'name',title:'商品名稱',width:100},        
  68.                     {field:'price',title:'商品價格',width:100},    
  69.                     {field:'remark',title:'簡單描述',width:100},    
  70.                     {field:'xremark',title:'詳細描述',width:100},    
  71.                     {field:'date',title:'上架時間',width:100},    
  72.                     {field:'commend',title:'推薦商品',width:100,      
  73.                         formatter: function(value,row,index){    
  74.                             if(value) {    
  75.                                 return "<input type='checkbox' checked='checked' disabled='true'";    
  76.                             } else {    
  77.                                 return "<input type='checkbox' disabled='true'";    
  78.                             }    
  79.                          }    
  80.                     },    
  81.                     {field:'open',title:'有效商品',width:100,      
  82.                         formatter: function(value,row,index){    
  83.                             if(value) {    
  84.                                 return "<input type='checkbox' checked='checked' disabled='true'";    
  85.                             } else {    
  86.                                 return "<input type='checkbox' disabled='true'";    
  87.                             }    
  88.                         }    
  89.                      },    
  90.                     {field:'category.type',title:'所屬商品類别',width:200, //category.type是商品類别    
  91.                         formatter: function(value,row,index){    
  92.                             if(row.category != null && row.category.type != null) {    
  93.                                 return row.category.type; //如果商品類别不為空,返回商品類别    
  94.                             } else {    
  95.                                 return "此商品暫時未分類";    
  96.                             }    
  97.                          }      
  98.                     }    
  99.                 ]]        
  100.             });     
  101.             //把普通的文本框轉化為查詢搜索文本框    
  102.             $('#ss').searchbox({     
  103.                 //觸發查詢事件    
  104.                  searcher:function(value,name){ //value表示輸入的值    
  105.                     //添加觸發代碼    
  106.                 },     
  107.                 prompt:'請輸入搜索關鍵字'     
  108.             });     
  109.         });    
  110.     </script>    
  111.   </head>    
  112.       
  113.   <body>    
  114.     <table id="dg"></table>    
  115.         
  116.   </body>    
  117. </html>    

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

Java代碼
  1. //ProductService接口    
  2. public interface ProductService extends BaseService<Product> {    
  3.         
  4.     //查詢商品信息,級聯類别    
  5.     public List<Product> queryJoinCategory(String type, int page, int size); //使用商品的名稱查詢    
  6.     //根據關鍵字查詢總記錄數    
  7.     public Long getCount(String type);    
  8. }    
  9.     
  10. @SuppressWarnings("unchecked")    
  11. @Service("productService")    
  12. public class ProductServiceImpl extends BaseServiceImpl<Product> implements ProductService {    
  13.     
  14.     @Override    
  15.     public List<Product> queryJoinCategory(String name, int page, int size) {    
  16.         String hql = "from Product p left join fetch p.category where p.name like :name";    
  17.         return getSession().createQuery(hql)    
  18.                 .setString("name""%" + name + "%")    
  19.                 .setFirstResult((page-1) * size) //從第幾個開始顯示    
  20.                 .setMaxResults(size) //顯示幾個    
  21.                 .list();    
  22.     }    
  23.         
  24.     @Override    
  25.     public Long getCount(String name) {    
  26.         String hql = "select count(p) from Product p where p.name like :name";    
  27.         return (Long) getSession().createQuery(hql)    
  28.             .setString("name""%" + name + "%")    
  29.             .uniqueResult(); //返回一條記錄:總記錄數    
  30.     }    
  31.     
  32. }    

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

Java代碼
  1. @Controller("productAction")    
  2. @Scope("prototype")    
  3. public class ProductAction extends BaseAction<Product> {    
  4.         
  5.     public String queryJoinCategory() {    
  6.         System.out.println("name:" + model.getName());    
  7.         System.out.println("page:" + page);    
  8.         System.out.println("rows:" + rows);    
  9.             
  10.         //用來存儲分頁的數據    
  11.         pageMap = new HashMap<String, Object>();    
  12.             
  13.         //根據關鍵字和分頁的參數查詢相應的數據    
  14.         List<Product> productList = productService.queryJoinCategory(model.getName(), page, rows);    
  15.         pageMap.put("rows", productList); //存儲為JSON格式    
  16.         //根據關鍵字查詢總記錄數    
  17.         Long total = productService.getCount(model.getName());    
  18. //      System.out.println(total);    
  19.         pageMap.put("total", total); //存儲為JSON格式    
  20.         return "jsonMap";    
  21.     }    
  22.     
  23. }    

  接下來在struts.xml中進行配置,跟之前的商品類一樣的流程,到這裡可以看出,開發好了一個,下面一個就快了:

XML/HTML代碼
  1. <action name="product_*" class="productAction" method="{1}">    
  2.     <result name="jsonMap" type="json">    
  3.         <param name="root">pageMap</param>    
  4.         <param name="excludeProperties">    
  5.             <!-- rows[0].category.account -->    
  6.             <!-- 把所有account過濾掉,否則會出現懶加載問題,該部分下面截圖 -->             
  7.         </param>    
  8.     </result>    
  9. </action>    

SSH電商項目實戰之十:商品類基本模塊的搭建

  這樣後台程序寫好了,然後開啟tomcat,測試一下,當我們點擊左側菜單欄的商品管理時,會彈出右邊如下窗口:

SSH電商項目實戰之十:商品類基本模塊的搭建

  這樣我們就完成了商品管理窗口的框架了。

 

除非特别注明,雞啄米文章均為原創
轉載請标明本文地址:http://dnsf85p.top/software/770.html
2018年3月7日
作者:雞啄米 分類:軟件開發 浏覽: 評論:2