逆向生成item
 

将表名设置成eb_item就行了。

        <table schema="" tableName="eb_item" enableCountByExample="false"            enableUpdateByExample="false" enableDeleteByExample="false"            enableSelectByExample="false" selectByExampleQueryId="false"        >        </table>
       </table>
查询商品

由于我们查询商品的话,可能商品的数量是非常大的,因此我们需要用到分页…

对于分页,我们现在就一点也不陌生了。无非就是把分页所用到的数据封装到page对象中,我们在dao层

首先,我们来看一下对应的原型界面把:

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城 这里写图片描述

我们想要看这个原型界面的话,现在是点不进去的了,因为我们把JSP文件放在WEB-INF下了。因此,我们用Controller做一个转发就行了

创建商品的Controller

@Controller@RequestMapping("item")public class EbItemController {    @RequestMapping("/listItem.do")    public String listItem() {        return "item/list";    }}
@RequestMapping("item")
public class EbItemController {

   @RequestMapping("/listItem.do")
   public String listItem() {
       return "item/list";
   }

}

接着,修改页面上跳转的请求链接:

    <li><a href="${path}/item/listItem.do"><samp class="t05"></samp>商品录入/上下架</a></li><a href="${path}/item/listItem.do"><samp class="t05"></samp>商品录入/上下架</a></li>

我们发现页面是这样子的。

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_02 这里写图片描述

我们可以从原型界面上知道:用户可以根据多个条件来对我们的数据进行筛选,并且我们是需要做分页的

创建查询条件对象

由于查询条件有多个,那么我们可以把这些条件封装成一个对象。

在页面上我们可以发现到4个查询条件:

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_03 这里写图片描述

用于我们的分页有三个条件变量

因此,我们的查询对象是这样子的:

package com.rl.ecps.model;public class QueryCondition {    private Integer auditStatus;    private Integer showStatus;    private Long brandId;    private String itemName;    private Integer startNum;    private Integer endNum;    private Integer pageNo;    public Integer getPageNo() {        return pageNo;    }    public void setPageNo(Integer pageNo) {        this.pageNo = pageNo;    }    public Integer getAuditStatus() {        return auditStatus;    }    public void setAuditStatus(Integer auditStatus) {        this.auditStatus = auditStatus;    }    public Integer getShowStatus() {        return showStatus;    }    public void setShowStatus(Integer showStatus) {        this.showStatus = showStatus;    }    public Long getBrandId() {        return brandId;    }    public void setBrandId(Long brandId) {        this.brandId = brandId;    }    public String getItemName() {        return itemName;    }    public void setItemName(String itemName) {        this.itemName = itemName;    }    public Integer getStartNum() {        return startNum;    }    public void setStartNum(Integer startNum) {        this.startNum = startNum;    }    public Integer getEndNum() {        return endNum;    }    public void setEndNum(Integer endNum) {        this.endNum = endNum;    }}

public class QueryCondition {

   private Integer auditStatus;

   private Integer showStatus;

   private Long brandId;

   private String itemName;

   private Integer startNum;

   private Integer endNum;

   private Integer pageNo;



   public Integer getPageNo() {
       return pageNo;
   }

   public void setPageNo(Integer pageNo) {
       this.pageNo = pageNo;
   }

   public Integer getAuditStatus() {
       return auditStatus;
   }

   public void setAuditStatus(Integer auditStatus) {
       this.auditStatus = auditStatus;
   }

   public Integer getShowStatus() {
       return showStatus;
   }

   public void setShowStatus(Integer showStatus) {
       this.showStatus = showStatus;
   }

   public Long getBrandId() {
       return brandId;
   }

   public void setBrandId(Long brandId) {
       this.brandId = brandId;
   }

   public String getItemName() {
       return itemName;
   }

   public void setItemName(String itemName) {
       this.itemName = itemName;
   }

   public Integer getStartNum() {
       return startNum;
   }

   public void setStartNum(Integer startNum) {
       this.startNum = startNum;
   }

   public Integer getEndNum() {
       return endNum;
   }

   public void setEndNum(Integer endNum) {
       this.endNum = endNum;
   }


}

创建分页对象

package com.rl.ecps.utils;import java.util.List;public class Page {    /**     * 当前页码(已知)     */    private int pageNo = 1;    /**     * 每页记录数(已知)     */    private int pageSize = 5;    /**     * 指定查询条件下 的记录数(已知)     */    private int totalCount = 0;    /**     * 指定查询下的总页数(未知)     */    private int totalPage = 1;    /**     * 开始行号(未知)     */    private int startNum = 0;    /**     * 未知     */    private int endNum = 0;    private List<?> list;    public int getPageNo() {        return pageNo;    }    public void setPageNo(int pageNo) {        this.pageNo = pageNo;    }    public int getPageSize() {        return pageSize;    }    public void setPageSize(int pageSize) {        this.pageSize = pageSize;    }    public int getTotalCount() {        return totalCount;    }    public void setTotalCount(int totalCount) {        this.totalCount = totalCount;    }    /**     * totalCount       pageSize        totalPage     *    0                10               1     *    95               10               10     *    100              10               10     *      *      *      * @return     */    public int getTotalPage() {        totalPage = totalCount/pageSize;        if(totalCount == 0 || totalCount%pageSize != 0){            totalPage++;        }        return totalPage;    }    public void setTotalPage(int totalPage) {        this.totalPage = totalPage;    }    public int getStartNum() {        return (pageNo - 1)*pageSize;    }    public void setStartNum(int startNum) {        this.startNum = startNum;    }    public int getEndNum() {        return pageNo*pageSize + 1;    }    public void setEndNum(int endNum) {        this.endNum = endNum;    }    public List<?> getList() {        return list;    }    public void setList(List<?> list) {        this.list = list;    }}

import java.util.List;

public class Page {

   /**
    * 当前页码(已知)
    */

   private int pageNo = 1;

   /**
    * 每页记录数(已知)
    */

   private int pageSize = 5;
   /**
    * 指定查询条件下 的记录数(已知)
    */

   private int totalCount = 0;
   /**
    * 指定查询下的总页数(未知)
    */

   private int totalPage = 1;
   /**
    * 开始行号(未知)
    */

   private int startNum = 0;

   /**
    * 未知
    */

   private int endNum = 0;
   private List<?> list;

   public int getPageNo() {
       return pageNo;
   }

   public void setPageNo(int pageNo) {
       this.pageNo = pageNo;
   }

   public int getPageSize() {
       return pageSize;
   }

   public void setPageSize(int pageSize) {
       this.pageSize = pageSize;
   }

   public int getTotalCount() {
       return totalCount;
   }

   public void setTotalCount(int totalCount) {
       this.totalCount = totalCount;
   }

   /**
    * totalCount       pageSize        totalPage
    *    0                10               1
    *    95               10               10
    *    100              10               10
    *
    *
    *
    * @return
    */

   public int getTotalPage() {
       totalPage = totalCount/pageSize;
       if(totalCount == 0 || totalCount%pageSize != 0){
           totalPage++;
       }
       return totalPage;
   }

   public void setTotalPage(int totalPage) {
       this.totalPage = totalPage;
   }

   public int getStartNum() {
       return (pageNo - 1)*pageSize;
   }

   public void setStartNum(int startNum) {
       this.startNum = startNum;
   }

   public int getEndNum() {
       return pageNo*pageSize + 1;
   }

   public void setEndNum(int endNum) {
       this.endNum = endNum;
   }

   public List<?> getList() {
       return list;
   }

   public void setList(List<?> list) {
       this.list = list;
   }

}

编写SQL

由于我们的条件未必是存在的,因此我们使用到了动态SQL。

 <!--根据条件查询分页查询数据-->    <select id="selectItemByCondition" parameterType="com.rl.ecps.model.QueryCondition" resultMap="BaseResultMap">        select * from (        select eb_item.*,ROWNUM rn from eb_item        <where>            <if test="brandId != null">                brand_id = #{brandId}            </if>            <if test="auditStatus != null">                and audit_status = #{auditStatus}            </if>            <if test="showStatus != null">                and show_status = #{showStatus}            </if>            <if test="itemName != null">                and item_name like '%${itemName}%'            </if>            <![CDATA[ and rownum <  ]]> #{endNum}        </where>        order by item_id desc        )t        where t.rn <![CDATA[ > ]]>#{startNum}    </select>
   <select id="selectItemByCondition" parameterType="com.rl.ecps.model.QueryCondition" resultMap="BaseResultMap">
       select * from (
       select eb_item.*,ROWNUM rn from eb_item
       <where>
           <if test="brandId != null">
               brand_id = #{brandId}
           </if>
           <if test="auditStatus != null">
               and audit_status = #{auditStatus}
           </if>
           <if test="showStatus != null">
               and show_status = #{showStatus}
           </if>
           <if test="itemName != null">
               and item_name like '%${itemName}%'
           </if>
           <![CDATA[ and rownum <  ]]> #{endNum}
       </where>
       order by item_id desc
       )t
       where t.rn <![CDATA[ > ]]>#{startNum}
   </select>
    <!--根据条件查询总页数-->    <select id="selectItemByConditionCount" parameterType="com.rl.ecps.model.QueryCondition" resultType="int">        SELECT count(item_id) from eb_item t        <where>            <if test="brandId != null">                t.brand_id = #{brandId}            </if>            <if test="auditStatus != null">                and t.audit_status = #{auditStatus}            </if>            <if test="showStatus != null">                and t.show_status = #{showStatus}            </if>            <if test="itemName != null">                and t.item_name like '%${itemName}%'            </if>        </where>    </select>
   <select id="selectItemByConditionCount" parameterType="com.rl.ecps.model.QueryCondition" resultType="int">

       SELECT count(item_id) from eb_item t
       <where>
           <if test="brandId != null">
               t.brand_id = #{brandId}
           </if>
           <if test="auditStatus != null">
               and t.audit_status = #{auditStatus}
           </if>
           <if test="showStatus != null">
               and t.show_status = #{showStatus}
           </if>
           <if test="itemName != null">
               and t.item_name like '%${itemName}%'
           </if>
       </where>
   </select>

编写Dao

@Repositorypublic class EbItemDaoImpl extends SqlSessionDaoSupport implements EbItemDao  {    String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemMapper.";    public List<EbItem> selectItemByCondition(QueryCondition queryCondition) {        return this.getSqlSession().selectList(nameSpace + "selectItemByCondition", queryCondition);    }    public int selectItemByConditionCount(QueryCondition queryCondition) {        return this.getSqlSession().selectOne(nameSpace + "selectItemByConditionCount", queryCondition);    }}
public class EbItemDaoImpl extends SqlSessionDaoSupport implements EbItemDao  {
   String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemMapper.";
   public List<EbItem> selectItemByCondition(QueryCondition queryCondition) {
       return this.getSqlSession().selectList(nameSpace + "selectItemByCondition", queryCondition);
   }
   public int selectItemByConditionCount(QueryCondition queryCondition) {
       return this.getSqlSession().selectOne(nameSpace + "selectItemByConditionCount", queryCondition);
   }
}

编写service

@Servicepublic class EbItemServiceImpl implements EbItemService {    @Qualifier("ebItemDaoImpl")    @Autowired    private EbItemDao itemDao;    public Page selectItemByCondition(QueryCondition queryCondition) {        //查询当前条件下的总页数        int count = itemDao.selectItemByConditionCount(queryCondition);        //根据总页数和当前页数【qc从前端拿到的】,计算得出其他分页属性的数据        Page page = new Page();        page.setTotalCount(count);        page.setPageNo(queryCondition.getPageNo());        int startNum = page.getStartNum();        int endNum = page.getEndNum();        //将计算出来的开始页数和结束页数封装到qc中,获取数据库中的数据        queryCondition.setStartNum(startNum);        queryCondition.setEndNum(endNum);        List<EbItem> ebItems = itemDao.selectItemByCondition(queryCondition);        //设置到page对象中        page.setList(ebItems);        return page ;    }}
public class EbItemServiceImpl implements EbItemService {

   @Qualifier("ebItemDaoImpl")
   @Autowired
   private EbItemDao itemDao;

   public Page selectItemByCondition(QueryCondition queryCondition) {

       //查询当前条件下的总页数
       int count = itemDao.selectItemByConditionCount(queryCondition);

       //根据总页数和当前页数【qc从前端拿到的】,计算得出其他分页属性的数据
       Page page = new Page();
       page.setTotalCount(count);
       page.setPageNo(queryCondition.getPageNo());
       int startNum = page.getStartNum();
       int endNum = page.getEndNum();

       //将计算出来的开始页数和结束页数封装到qc中,获取数据库中的数据
       queryCondition.setStartNum(startNum);
       queryCondition.setEndNum(endNum);
       List<EbItem> ebItems = itemDao.selectItemByCondition(queryCondition);

       //设置到page对象中
       page.setList(ebItems);

       return page ;
   }
}

编写Controller

@Controller@RequestMapping("/item")public class EbItemController {    @Qualifier("ebItemServiceImpl")    @Autowired    private EbItemService itemService;    @Qualifier("ebBrandServiceImpl")    @Autowired    private EbBrandService ebBrandService;    @RequestMapping("/listItem.do")    public String listItem(QueryCondition queryCondition, Model model) {        //拿到所有的品牌,用于给用户下拉框选择        List<EbBrand> ebBrands = ebBrandService.selectBrand();        //如果是第一次访问的话,那么默认是没有当前页号的,因此赋值为1        if (queryCondition.getPageNo() == null) {            queryCondition.setPageNo(1);        }        //得到分页数据        Page page = itemService.selectItemByCondition(queryCondition);        model.addAttribute("page", page);        model.addAttribute("ebBrands", ebBrands);        //回显条件数据        model.addAttribute("queryCondition", queryCondition);        return "item/list";    }}
@RequestMapping("/item")
public class EbItemController {


   @Qualifier("ebItemServiceImpl")
   @Autowired
   private EbItemService itemService;
   @Qualifier("ebBrandServiceImpl")
   @Autowired
   private EbBrandService ebBrandService;


   @RequestMapping("/listItem.do")
   public String listItem(QueryCondition queryCondition, Model model) {
       //拿到所有的品牌,用于给用户下拉框选择
       List<EbBrand> ebBrands = ebBrandService.selectBrand();

       //如果是第一次访问的话,那么默认是没有当前页号的,因此赋值为1
       if (queryCondition.getPageNo() == null) {
           queryCondition.setPageNo(1);
       }

       //得到分页数据
       Page page = itemService.selectItemByCondition(queryCondition);

       model.addAttribute("page", page);
       model.addAttribute("ebBrands", ebBrands);

       //回显条件数据
       model.addAttribute("queryCondition", queryCondition);

       return "item/list";
   }

}

得到所有的品牌

使用下拉框来进行遍历出我们所有的品牌就行了。

开始的时候使用一个空值”全部品牌“

        <select id="brandId" name="brandId" >            <option value="">全部品牌</option>            <c:forEach items="${ebBrands}" var="brand">                <option value="${brand.brandId}">${brand.brandName}</option>            </c:forEach>        </select>

           <option value="">全部品牌</option>
           <c:forEach items="${ebBrands}" var="brand">
               <option value="${brand.brandId}">${brand.brandName}</option>
           </c:forEach>
       </select>
移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_04 这里写图片描述

设置默认的上架状态

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_05 这里写图片描述

在我们的页面上,是没有原始的上架状态的。我们使用class属性设置默认的查询上架状态:

        <a id="label6" href="${path}/item/queryItemByCondtion.do" title="全部实体商品" class="here">全部</a></a>

测试条件查询

        <%--上架的状态模块--%>        <h2 class="h2_ch"><span id="tabs" class="l">        <a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a>        <a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"           class="nor">未上架</a>        <a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"           class="nor">已上架</a>    </span></h2>        <form id="form1" name="form1" action="${path}/item/listItem.do" method="post">            <%--得到初始的上下架状态的值--%>            <input type="hidden" name="showStatus" value="${queryCondition.showStatus}">            <%--条件查询模块--%>            <div class="sch">                <p>搜索:                    <select id="brandId" name="brandId">                        <option value="">全部品牌</option>                        <c:forEach items="${ebBrands}" var="brand">                            <option value="${brand.brandId}">${brand.brandName}</option>                        </c:forEach>                    </select>                    <select id="auditStatus" name="auditStatus">                        <option value="" selected>全部审核状态</option>                        <option value="0">待审核</option>                        <option value="1">通过</option>                        <option value="2">不通过</option>                    </select>                    <input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray"/>                    <input type="submit" id="goSearch" class="hand btn60x20" value="查询"/>                </p>            </div>
       <h2 class="h2_ch"><span id="tabs" class="l">
       <a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a>
       <a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"
          class="nor">
未上架</a>
       <a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"
          class="nor">
已上架</a>
   </span></h2>

       <form id="form1" name="form1" action="${path}/item/listItem.do" method="post">


           <%--得到初始的上下架状态的值--%>
           <input type="hidden" name="showStatus" value="${queryCondition.showStatus}">

           <%--条件查询模块--%>
           <div class="sch">
               <p>搜索:
                   <select id="brandId" name="brandId">
                       <option value="">全部品牌</option>
                       <c:forEach items="${ebBrands}" var="brand">
                           <option value="${brand.brandId}">${brand.brandName}</option>
                       </c:forEach>
                   </select>
                   <select id="auditStatus" name="auditStatus">
                       <option value="" selected>全部审核状态</option>
                       <option value="0">待审核</option>
                       <option value="1">通过</option>
                       <option value="2">不通过</option>
                   </select>
                   <input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray"/>
                   <input type="submit" id="goSearch" class="hand btn60x20" value="查询"/>
               </p>
           </div>

到目前为止,我们4个查询条件可以都使用了。接下来就是我们的数据回显了。

为什么要数据回显??我们一旦使用了条件查询,跳转到对应的controller时,返回的页面的查询条件就没有了,这是不合理的。因此我们要对条件查询进行回显

品牌回显:只要查询条件的值等于品牌对应的值,那么我们就选中!

        <select id="brandId" name="brandId">            <option value="">全部品牌</option>            <c:forEach items="${ebBrands}" var="brand">                <option value="${brand.brandId}"  <c:if test="${queryCondition.brandId == brand.brandId}">selected</c:if>>                ${brand.brandName}                </option>            </c:forEach>        </select>
           <option value="">全部品牌</option>
           <c:forEach items="${ebBrands}" var="brand">
               <option value="${brand.brandId}"  <c:if test="${queryCondition.brandId == brand.brandId}">selected</c:if>>
               ${brand.brandName}
               </option>
           </c:forEach>
       </select>

审核条件回显:只要查询条件的值等于审核条件的值,那么就选中!

    <select id="auditStatus" name="auditStatus">        <option value="" selected>全部审核状态</option>        <option value="0" <c:if test="${queryCondition.auditStatus==0}">selected</c:if>>待审核</option>        <option value="1" <c:if test="${queryCondition.auditStatus==1}">selected</c:if>>通过</option>        <option value="2" <c:if test="${queryCondition.auditStatus==2}">selected</c:if>>不通过</option>    </select>
       <option value="" selected>全部审核状态</option>
       <option value="0" <c:if test="${queryCondition.auditStatus==0}">selected</c:if>>待审核</option>
       <option value="1" <c:if test="${queryCondition.auditStatus==1}">selected</c:if>>通过</option>
       <option value="2" <c:if test="${queryCondition.auditStatus==2}">selected</c:if>>不通过</option>
   </select>

模糊查询回显:

<input type="text" id="searchText" name="itemName" title="请输入商品名称" class="text20 medium gray" value="${queryCondition.itemName}"/>

上架状态条件回显:

上架状态的条件并不是通过表单来提交的,而是直接使用超链接定位的。

        <a id="label6" href="${path}/item/listItem.do" title="全部实体商品" class="here">全部</a>        <a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"           class="nor">未上架</a>        <a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"           class="nor">已上架</a></a>
       <a id="label4" href="${path}/item/listItem.do?showStatus=1" title="未上架实体商品"
          class="nor">
未上架</a>
       <a id="label5" href="${path}/item/listItem.do?showStatus=0" title="已上架实体商品"
          class="nor">
已上架</a>

当我们店家未上架商品的时候,我们的样式应该是会改变到here属性上的。因此,我们想要上架状态条件回显,首先得获取到对应的值

        <%--得到上下架状态的值--%>         <input type="hidden" id="showStatus" name="showStatus" value="${queryCondition.showStatus}">
        <input type="hidden" id="showStatus" name="showStatus" value="${queryCondition.showStatus}">

使用jquery代码进行控制样式

        $(function () {            var showStatusVal =  $("#showStatus").val();            if(showStatusVal=='0') {                $("#label5").attr("class", "here");            }else if(showStatusVal=='1') {                $("#label4").attr("class", "here");            }else {                $("#label6").attr("class", "here");            }        });
           var showStatusVal =  $("#showStatus").val();
           if(showStatusVal=='0') {
               $("#label5").attr("class", "here");
           }else if(showStatusVal=='1') {
               $("#label4").attr("class", "here");
           }else {
               $("#label6").attr("class", "here");
           }
       });
页面的上分页 移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_06 这里写图片描述
            <%--页数--%>            <div class="page_c">                <span class="l inb_a">                </span>                <span class="r page">                    <input type="hidden" id="pageNo" name="pageNo" />                    <input type="hidden" value="${page.totalCount}" id="totalCount" name="totalCount"/>                    <input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/>                    <input type="hidden" value="${page.totalPage}" id="totalPage" name="totalPage"/>                            共<var id="pagePiece" class="orange">${page.totalCount}</var>条<var                        id="pageTotal">${page.pageNo}/${page.totalPage}</var>                    <a href="javascript:void(0);" id="previous" class="show" title="上一页">上一页</a>                    <a href="javascript:void(0);" id="next" class="show" title="下一页">下一页</a>                </span>            </div>
           <div class="page_c">
               <span class="l inb_a">
               </span>
               <span class="r page">
                   <input type="hidden" id="pageNo" name="pageNo" />
                   <input type="hidden" value="${page.totalCount}" id="totalCount" name="totalCount"/>
                   <input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/>
                   <input type="hidden" value="${page.totalPage}" id="totalPage" name="totalPage"/>
                           共<var id="pagePiece" class="orange">${page.totalCount}</var><var
                       id="pageTotal">
${page.pageNo}/${page.totalPage}</var>

                   <a href="javascript:void(0);" id="previous" class="show" title="上一页">上一页</a>
                   <a href="javascript:void(0);" id="next" class="show" title="下一页">下一页</a>
               </span>
           </div>

我们也可以使用Jquery代码来对分页进行页面的逻辑控制

            //得到当前页数,总页数            var pageNoVal = parseInt($("#currentPageNo").val());//1,2            var totalPageVal = parseInt($("#totalPage").val());            //上一页和下一页都不显示的条件            if (pageNoVal ==1 && pageNoVal==totalPageVal ) {                $("#previous").hide();                $("#next").hide();            }//显示下一页,不显示上一页的条件            else if (pageNoVal == 1 && pageNoVal < totalPageVal) {                $("#next").show();                $("#previous").hide();            } //既显示上一页和下一页的条件            else if(pageNoVal > 1 && pageNoVal < totalPageVal) {                $("#next").show();                $("#previous").show();            }//显示上一页,不显示下一页的条件            else if(pageNoVal > 1 && pageNoVal==totalPageVal) {                $("#next").hide();                $("#previous").show();            }            //按钮点击事件            $("#next").click(function () {                //将当前页数+1,设置到我们的隐藏域中                pageNoVal++;//2                $("#pageNo").val(pageNoVal);//2                //提交表单                $("#form1").submit();            });            $("#previous").click(function () {                //将当前页数+1,设置到我们的隐藏域中                pageNoVal--;                $("#pageNo").val(pageNoVal);                //提交表单                $("#form1").submit();            });
           var pageNoVal = parseInt($("#currentPageNo").val());//1,2
           var totalPageVal = parseInt($("#totalPage").val());

           //上一页和下一页都不显示的条件
           if (pageNoVal ==1 && pageNoVal==totalPageVal ) {
               $("#previous").hide();
               $("#next").hide();
           }//显示下一页,不显示上一页的条件
           else if (pageNoVal == 1 && pageNoVal < totalPageVal) {
               $("#next").show();
               $("#previous").hide();
           } //既显示上一页和下一页的条件
           else if(pageNoVal > 1 && pageNoVal < totalPageVal) {
               $("#next").show();
               $("#previous").show();
           }//显示上一页,不显示下一页的条件
           else if(pageNoVal > 1 && pageNoVal==totalPageVal) {
               $("#next").hide();
               $("#previous").show();
           }

           //按钮点击事件
           $("#next").click(function () {

               //将当前页数+1,设置到我们的隐藏域中
               pageNoVal++;//2
               $("#pageNo").val(pageNoVal);//2

               //提交表单
               $("#form1").submit();
           });

           $("#previous").click(function () {
               //将当前页数+1,设置到我们的隐藏域中
               pageNoVal--;
               $("#pageNo").val(pageNoVal);

               //提交表单
               $("#form1").submit();
           });

需要值得注意的是:我们在input标签上多了一行这么一段代码:

    <input type="hidden" value="${page.pageNo}" id="currentPageNo" name="currentPageNo"/>

那为什么我们要使用currentPageNo这么一行代码呢???而我们的Jquery代码也是拿currentPageNo它的值作为我们页面跳转

如果没有这行代码,直接使用PageNo会怎么样呢??

解释:

其实我们的页面跳转也是需要根据查询条件的结果来进行跳转的

添加商品之基本属性和大字段数据(FCK文本编辑器)

修改对应的超链接url,controller转发到对应的JSP页面

    <a href="${path}/item/toAddItem.do" class="btn80x20" title="添加商品">添加商品</a></a>
    /**     * 跳转到添加商品页面     * @return     */    @RequestMapping("/toAddItem.do")    public String toAddItem() {        return "item/addItem";    }
   @RequestMapping("/toAddItem.do")
   public String toAddItem() {

       return "item/addItem";
   }

我们发现添加商品页面是由4个选项卡组成:

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_07 这里写图片描述

基本信息

在基本信息的选项卡中,还是需要我们查询所有的品牌数据,在页面上给用户选择:

<select id="brandId" name="brandId">    <option value="">请选择</option>    <c:forEach items="${ebBrands }" var="brand">        <option value="${brand.brandId }">${brand.brandName }</option>    </c:forEach></select>
   <option value="">请选择</option>
   <c:forEach items="${ebBrands }" var="brand">
       <option value="${brand.brandId }">${brand.brandName }</option>
   </c:forEach>
</select>

上传文件

我们在添加品牌的时候已经做过了上传文件的功能了,逻辑大致是一样的,我们拿过来修改一些东西即可!

在表单form标签中,记得要使用以下的数据类型进行表单提交!

  enctype="multipart/form-data" 

修改对应的name名称

                <p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file"                                         onchange='submitUpload()'/><span id="submitImgTip" class="pos">请上传图片宽为120px,高为50px,大小不超过100K。</span>                    <input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲!您忘记上传图片了。"/>                    <span></span>                </p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file"
                                        onchange='submitUpload()'/>
<span id="submitImgTip" class="pos">请上传图片宽为120px,高为50px,大小不超过100K。</span>


                   <input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲!您忘记上传图片了。"/>
                   <span></span>
               </p>

Jquery代码:

  function submitUpload() {            var opt = {                //重新指定form的action的值                url: "${path}/upload/uploadPic.do",                type: "post",                dateType: "json",                success: function (responseText) {                    var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig, ""));                    $("#imgsImgSrc").attr("src", jsonObj.realPath);                    $("#imgs").val(jsonObj.relativePath);                },                error: function () {                    alert("系统错误");                }            };            $("#form111").ajaxSubmit(opt);        }
           var opt = {
               //重新指定form的action的值
               url: "${path}/upload/uploadPic.do",
               type: "post",
               dateType: "json",
               success: function (responseText) {
                   var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig, ""));
                   $("#imgsImgSrc").attr("src", jsonObj.realPath);
                   $("#imgs").val(jsonObj.relativePath);
               },
               error: function () {
                   alert("系统错误");
               }
           };
           $("#form111").ajaxSubmit(opt);
       }
移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_08 这里写图片描述

添加基本属性测试

到目前位置,我们的Controller可以拿到Item页面全部的基本属性:

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_09 这里写图片描述 移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_10 这里写图片描述

商品基本属性中的隐藏属性

商品的id是使用oracle中的序列进行自动增长

         /*对于商品的id,我们是自增长的。*/        <selectKey keyProperty="itemId" order="BEFORE" resultType="long">            select seqitemid.nextval from dual        </selectKey><selectKey keyProperty="itemId" order="BEFORE" resultType="long">
           select seqitemid.nextval from dual
       </selectKey>

对于审核状态,默认设置为0【待审核】
对于上架状态,默认设置为1【下架】
对于销售量,默认设置为0【并没有人购买】

在Mapper中把对应的属性设置默认值

(#{itemId,jdbcType=DECIMAL}, #{itemName,jdbcType=VARCHAR}, #{itemNo,jdbcType=VARCHAR},       #{brandId,jdbcType=DECIMAL}, #{catId,jdbcType=DECIMAL}, #{tagImgId,jdbcType=DECIMAL},       #{tagImg,jdbcType=DECIMAL}, #{isNew,jdbcType=DECIMAL}, #{isGood,jdbcType=DECIMAL},       #{isHot,jdbcType=DECIMAL}, #{promotion,jdbcType=VARCHAR}, 0,       1, #{imgs,jdbcType=VARCHAR}, #{keywords,jdbcType=VARCHAR},       #{pageDesc,jdbcType=VARCHAR}, #{itemRecycle,jdbcType=DECIMAL}, #{onSaleTime,jdbcType=TIMESTAMP},       #{checkTime,jdbcType=TIMESTAMP}, #{updateTime,jdbcType=TIMESTAMP}, #{updateUserId,jdbcType=DECIMAL},       sysdate, #{checkerUserId,jdbcType=DECIMAL}, #{fullPathDeploy,jdbcType=VARCHAR},       #{fullPathDeployOffer,jdbcType=VARCHAR}, #{originalItemId,jdbcType=DECIMAL}, #{lastStatus,jdbcType=DECIMAL},       #{merchantId,jdbcType=DECIMAL}, #{itemSort,jdbcType=DECIMAL}, 0,       #{createUserId,jdbcType=DECIMAL}, #{simLevel,jdbcType=DECIMAL}, #{giftDesc,jdbcType=VARCHAR},       #{giftImg,jdbcType=VARCHAR}, #{giftShowType,jdbcType=VARCHAR}, #{imgSize1,jdbcType=VARCHAR}      )
     #{tagImg,jdbcType=DECIMAL}, #{isNew,jdbcType=DECIMAL}, #{isGood,jdbcType=DECIMAL},
     #{isHot,jdbcType=DECIMAL}, #{promotion,jdbcType=VARCHAR}, 0,
     1, #{imgs,jdbcType=VARCHAR}, #{keywords,jdbcType=VARCHAR},
     #{pageDesc,jdbcType=VARCHAR}, #{itemRecycle,jdbcType=DECIMAL}, #{onSaleTime,jdbcType=TIMESTAMP},
     #{checkTime,jdbcType=TIMESTAMP}, #{updateTime,jdbcType=TIMESTAMP}, #{updateUserId,jdbcType=DECIMAL},
     sysdate, #{checkerUserId,jdbcType=DECIMAL}, #{fullPathDeploy,jdbcType=VARCHAR},
     #{fullPathDeployOffer,jdbcType=VARCHAR}, #{originalItemId,jdbcType=DECIMAL}, #{lastStatus,jdbcType=DECIMAL},
     #{merchantId,jdbcType=DECIMAL}, #{itemSort,jdbcType=DECIMAL}, 0,
     #{createUserId,jdbcType=DECIMAL}, #{simLevel,jdbcType=DECIMAL}, #{giftDesc,jdbcType=VARCHAR},
     #{giftImg,jdbcType=VARCHAR}, #{giftShowType,jdbcType=VARCHAR}, #{imgSize1,jdbcType=VARCHAR}
     )

大字段数据

我们第二个选项卡的原型界面如下:

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_11 这里写图片描述

我们需要用到另外一张表:

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_12 这里写图片描述

因此我们需要逆向工程对应的表:

    <table schema="" tableName="EB_ITEM_CLOB" enableCountByExample="false"            enableUpdateByExample="false" enableDeleteByExample="false"            enableSelectByExample="false" selectByExampleQueryId="false"        >

加载对应的映射文件:

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_13 这里写图片描述

Dao层

id是EbItemClob无法从页面上获取的,因此我们需要传递进去。

@Repositorypublic class EbItemClobDaoImpl extends SqlSessionDaoSupport implements EbItemClobDao {    String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemClobMapper.";    public void saveItemClob(EbItemClob ebItemClob, Long itemId) {        ebItemClob.setItemId(itemId);        this.getSqlSession().insert(nameSpace + "insert", ebItemClob);    }}
public class EbItemClobDaoImpl extends SqlSessionDaoSupport implements EbItemClobDao {
   String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemClobMapper.";
   public void saveItemClob(EbItemClob ebItemClob, Long itemId) {
       ebItemClob.setItemId(itemId);
       this.getSqlSession().insert(nameSpace + "insert", ebItemClob);
   }
}

fckEditor文本编辑器

其实就是一个文本域,而该文本域是能带有格式的。以前我们使用过“富文本编辑器”就是这么的一种,这次我们使用fckEditor文本编辑器

首先,把我们的下载下来的文档加入到web目录下。

移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_14 这里写图片描述

引入核心的JS文件

<script type="text/javascript" src="<c:url value='/${system }/res/plugins/fckeditor/fckeditor.js'/>"></script>"<c:url value='/${system }/res/plugins/fckeditor/fckeditor.js'/>"></script>

创建出FCK对象,设置相关属性:

            var fck = new FCKeditor("itemDesc");            fck.BasePath = "${path}/ecps/console/res/plugins/fckeditor/";            fck.Config["ImageUploadURL"] = "${path}/upload/uploadForFck.do?typeStr=Image";            fck.Height = 400;            fck.ToolbarSet = "Default";            fck.ReplaceTextarea();new FCKeditor("itemDesc");
           fck.BasePath = "${path}/ecps/console/res/plugins/fckeditor/";
           fck.Config["ImageUploadURL"] = "${path}/upload/uploadForFck.do?typeStr=Image";
           fck.Height = 400;
           fck.ToolbarSet = "Default";
           fck.ReplaceTextarea();

itemDesc就是我们文档域的id值:

 <textarea name="itemDesc" id="itemDesc"></textarea></textarea>

创建出处理uploadForFck.do的方法:

 @RequestMapping("/uploadForFck.do")    public void uploadForFck(HttpServletRequest request, HttpServletResponse response) throws IOException {        //把request转换成复杂request        MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;        //获得文件        Map<String, MultipartFile> map = mr.getFileMap();        Set<String> set = map.keySet();        Iterator<String> it = set.iterator();        String fileInputName = it.next();        MultipartFile imgsFile = map.get(fileInputName);        //上传文件的名字是不能相同的,因此我们设置一下文件的名称        String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());        Random random = new Random();        for(int i = 0; i < 3; i++){            fileName = fileName + random.nextInt(10);        }        //拿到该文件的原始名称        String originalFilename = imgsFile.getOriginalFilename();        //获取该文件的后缀        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));        /***         * 绝对路径是留给页面src属性做显示的         * 相对路径是保存在数据库中,通过input来进行提交的。         */        //获得上传文件的绝对路径        String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix;        //获得相对路径        String relativePath = "/upload/"+fileName+suffix;        //创建jersy的客户端        Client client = Client.create();        //创建web资源对象        WebResource wr = client.resource(realPath);        //拿到文件的二进制数据,使用web资源对象上传        byte[] bytes = imgsFile.getBytes();        wr.put(bytes);        /**         * 在FCK中,我们就不再是使用JSON来返回了,我们使用的是内部的对象         */        UploadResponse ur = new UploadResponse(UploadResponse.EN_OK,realPath);        response.getWriter().print(ur);    }"/uploadForFck.do")
   public void uploadForFck(HttpServletRequest request, HttpServletResponse response) throws IOException {


       //把request转换成复杂request
       MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
       //获得文件
       Map<String, MultipartFile> map = mr.getFileMap();
       Set<String> set = map.keySet();
       Iterator<String> it = set.iterator();
       String fileInputName = it.next();
       MultipartFile imgsFile = map.get(fileInputName);


       //上传文件的名字是不能相同的,因此我们设置一下文件的名称
       String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
       Random random = new Random();
       for(int i = 0; i < 3; i++){
           fileName = fileName + random.nextInt(10);
       }
       //拿到该文件的原始名称
       String originalFilename = imgsFile.getOriginalFilename();

       //获取该文件的后缀
       String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

       /***
        * 绝对路径是留给页面src属性做显示的
        * 相对路径是保存在数据库中,通过input来进行提交的。
        */

       //获得上传文件的绝对路径
       String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix;
       //获得相对路径
       String relativePath = "/upload/"+fileName+suffix;

       //创建jersy的客户端
       Client client = Client.create();
       //创建web资源对象
       WebResource wr = client.resource(realPath);

       //拿到文件的二进制数据,使用web资源对象上传
       byte[] bytes = imgsFile.getBytes();
       wr.put(bytes);

       /**
        * 在FCK中,我们就不再是使用JSON来返回了,我们使用的是内部的对象
        */

       UploadResponse ur = new UploadResponse(UploadResponse.EN_OK,realPath);
       response.getWriter().print(ur);

   }
移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_15 这里写图片描述 移动商城第三篇(商品管理)【查询商品、添加商品】_移动商城_16 这里写图片描述

在controller中使用EbItemClob对象,即可接收我们的大字段数据!

       @RequestMapping("/addItem.do")        public void addItem(EbItem ebItem, EbItemClob ebItemClob) {    }"/addItem.do")
       public void addItem(EbItem ebItem, EbItemClob ebItemClob) {

   }

总结

如果文章有错的地方欢迎指正,大家互相交流。习惯在微信看技术文章,想要获取更多的Java资源的同学,可以关注微信公众号:Java3y