移动商城第三篇（商品管理）【查询商品、添加商品】

---

tags: 移动商城项目

---

逆向生成item

将表名设置成eb_item就行了。

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

查询商品

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

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

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

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

创建商品的Controller

@Controller
@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>

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

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

创建查询条件对象

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

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

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

• 开始页数
• 结束页数
• 当前页数【页面传递过来的】

因此，我们的查询对象是这样子的：

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;
    }

}

创建分页对象

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;
    }

}

编写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="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

@Repository
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

@Service
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";
    }

}

得到所有的品牌

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

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

        <select id="brandId" name="brandId" >

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

---

设置默认的上架状态

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

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

到目前为止，我们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>

审核条件回显：只要查询条件的值等于审核条件的值，那么就选中！

    <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>

模糊查询回显：

<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>

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

        <%--得到上下架状态的值--%>
         <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");
            }
        });

页面的上分页

            <%--页数--%>
            <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();
            });

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

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

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

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

解释：

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

• 如果我们查询了所有数据，我们跳转到第7页，再设置条件为“三星”，如果直接使用PageNo的话，那么系统就会去找“三星”的第七页数据，显然，这是不合理的，当我们设置了查询条件时，应该跳转到的是“三星”的第一页数据！
• 归终到底，currentPageNo它就是根据我们当前条件来进行跳转！如果查询条件修改了，那么PageNo默认的值是为1的(因为通过隐藏域带过去的数据一直都是0)。

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

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

    <a href="${path}/item/toAddItem.do" class="btn80x20" title="添加商品">添加商品</a>

    /**
     * 跳转到添加商品页面
     * @return
     */
    @RequestMapping("/toAddItem.do")
    public String toAddItem() {

        return "item/addItem";
    }

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

基本信息

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

<select id="brandId" name="brandId">
    <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>

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);
        }

添加基本属性测试

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

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

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

        /*对于商品的id，我们是自增长的。*/
        <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}
      )

大字段数据

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

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

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

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

加载对应的映射文件：

Dao层

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

@Repository
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目录下。

引入核心的JS文件

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<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();

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

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