昨天我们做到了商铺所有类别的展示，和进入某个商铺时显示的商铺管理页面如：

今天要完成的就是这个页面点击类别管理的模块。

点开后进入这个页面。

展示了我们当前店铺所欲商品的分类，接下来我们实现它。

我们先梳理思路：我们要实现查询当前店铺的所有商品类表，那么就是说简单的查询tb_product_category这个类别即可。

DAO层：

要先建立一个productcategory专属的dao文件

返回一个ProductCategory类型的list集合

mapper.xml：

  <!--查询商品id信息-->
    <select id="queryProductCategoryList" resultType="productCategory" >
   select
   product_category_id,
   product_category_name,
   priority,
   create_time,
   shop_id
   FROM tb_product_category where shop_id=#{shopId}
   ORDER BY
   priority
   DESC
</select>

我们的查询语句很简单，没有多余的信息，注意：就算我们的返回类型时list，resultType=仍是productCategory（parampeter可以省，但是resulType不能省）

Service层：

ServiceImpl:

service曾没什么需要处理的，我们看controller

Controller:

由于我们新增加了商品类别展示所以有新的html我们要加入新的路由至新的页面

然后是查询方法：

   /*
     * 获取某个店铺下的所有商品类别
     * */
    @RequestMapping(value = "/getproductcategorybyshopid", method = RequestMethod.GET)
    @ResponseBody
    private Result<List<ProductCategory>> getProductCategoryList(HttpServletRequest request) {

        //从ShopManagementController中的getShopManageinfo方法中已经设置里这样的信息current中获取shopid
        Shop currentShop = (Shop) request.getSession().getAttribute("currentShop");
        List<ProductCategory> list = null;
        if (currentShop != null && currentShop.getShopId() > 0) {//如果shopid不为空，且大于0
            list = productCategoryService.getProductCategoryList(currentShop.getShopId());
            return new Result<List<ProductCategory>>(true, list);//通过result正确的构造器将前端所需内容存入
        } else {//如果失败
            ProductCategoryStateEnum productCategoryStateEnum = ProductCategoryStateEnum.INNER_ERROR;
            return new Result<List<ProductCategory>>(false, productCategoryStateEnum.getState(), productCategoryStateEnum.getStateInfo());
        }
    }

这次我们没用Ma类型返回前端，我们使用了一个对象，我们来看看这个对象。

之前我们也定义了dto，不过都在service层使用，当controller层调用service层的方法时，我们从service得到一个dto返回的对象，这个dto中封装了很多额外的东西包括service层的操作正确性，我们controller得到了这个dto，此时它里面已经包含了操作成功与否的信息，前端获取到可以根据这个对象里正确状态做出操作

因为这里我们的service没什么要做的，我们将这种形式使用到了controller层，

package storepro.dto;

public class Result<T> {

    // 是否成功的标识
    private boolean success;

    // 成功时返回的数据
    private T data;

    // 错误码
    private int errorCode;

    // 错误信息
    private String errMsg;

    /**
     * @Title:Result
     * @Description:空的构造函数
     */
    public Result() {
        super();
    }

    /**
     * @param success
     * @param data
     * @Title:Result
     * @Description:数据获取成功时使用的构造器
     */
    public Result(boolean success, T data) {
        this.success = success;
        this.data = data;
    }

    /***
     *
     *
     * @Title:Result
     *
     * @Description:数据获取失败时使用的构造器
     *
     * @param success
     * @param errorCode
     * @param errMsg
     */
    public Result(boolean success, int errorCode, String errMsg) {
        this.success = success;
        this.errorCode = errorCode;
        this.errMsg = errMsg;
    }


    public boolean isSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public int getErrorCode() {
        return errorCode;
    }

    public void setErrorCode(int errorCode) {
        this.errorCode = errorCode;
    }

    public String getErrMsg() {
        return errMsg;
    }

    public void setErrMsg(String errMsg) {
        this.errMsg = errMsg;
    }
}

当然操作的状态是通过一个枚举控制的，我们书写product_category用的枚举

package storepro.enums;

public enum ProductCategoryStateEnum {

    INNER_ERROR(-1001, "内部出错"), NULL_SHOP(-1001, "操作失败"),EMPTY_LIST(-1002,"添加数少于1")
    ,SUCCESS(1, "操作成功")
    ;

    private int state ;
    private String stateInfo;

    /**
     *
     *
     * @Title:ProductCategoryStateEnum
     *
     * @Description:构造函数
     *
     * @param state
     * @param stateInfo
     */
    private ProductCategoryStateEnum(int state, String stateInfo) {
        this.state = state;
        this.stateInfo = stateInfo;
    }

    public int getState() {
        return state;
    }

    public String getStateInfo() {
        return stateInfo;
    }

    /**
     *
     *
     * @Title: stateOf
     *
     * @Description:
     *               通过state获取productCategoryStateEnum,从而可以调用ProductCategoryStateEnum
     *               #getStateInfo()获取stateInfo
     *
     * @param index
     * @return
     *
     * @return: ProductCategoryStateEnum
     */
    public static ProductCategoryStateEnum stateOf(int index) {
        for (ProductCategoryStateEnum productCategoryStateEnum : values()) {
            if (productCategoryStateEnum.getState() == index) {
                return productCategoryStateEnum;
            }
        }
        return null;
    }

}

转自：https://blog.csdn.net/yangshangwei/article/details/80710973

View层

根据控制层的路由规则以及viewResolver

这里写图片描述

需要在shop目录下编写 productcategorymanage.html

productcategorymanage.html

<span style="color:#000000"><code><span style="color:#4f4f4f"><!DOCTYPE html></span>
<span style="color:#006666"><<span style="color:#4f4f4f">html</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">"utf-8"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">http-equiv</span>=<span style="color:#009900">"X-UA-Compatible"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"IE=edge"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">title</span>></span>商品分类<span style="color:#006666"></<span style="color:#4f4f4f">title</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"viewport"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"initial-scale=1, maximum-scale=1"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"shortcut icon"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/favicon.ico"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-capable"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"yes"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-status-bar-style"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"black"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"</span>></span>
<span style="color:#880000"><!-- 自定义的CSS --></span>    
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"../resources/css/shop/productcategorymanage.css"</span>></span> 

<span style="color:#006666"></<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">body</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">header</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"bar bar-nav"</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">h1</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"title"</span>></span>商品分类<span style="color:#006666"></<span style="color:#4f4f4f">h1</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">header</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content"</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row row-product-category"</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-33"</span>></span>商品目录<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-33"</span>></span>优先级<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-33"</span>></span>操作<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
            <span style="color:#880000"><!-- 通过js从后台加载数据，动态的添加内容 --></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"product-categroy-wrap"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>

        <span style="color:#880000"><!-- 预占两个按钮，后续完善 --></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row"</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"#"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill button-success"</span>
                        <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"new"</span>></span>新增<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"#"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"submit"</span>></span>提交<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>

    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/sj/lib/zepto/zepto.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/common/common.js'</span>
        <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/shop/productcategorymanage.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">body</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">html</span>></span>
</code></span>

productcategorymanage.js

<span style="color:#000000"><code>$(<span style="color:#000088">function</span> <span style="color:#4f4f4f">()</span> {

    <span style="color:#000088">var</span> shopId = getQueryString(<span style="color:#009900">"shopId"</span>);
    <span style="color:#000088">var</span> productCategoryURL = <span style="color:#009900">'/o2o/shopadmin/getproductcategorybyshopId?shopId='</span> + shopId;

    $.getJSON(productCategoryURL,<span style="color:#000088">function</span><span style="color:#4f4f4f">(data)</span>{
        <span style="color:#000088">if</span> (data.success) {
            <span style="color:#000088">var</span> dataList = data.data;
            $(<span style="color:#009900">'.product-categroy-wrap'</span>).html(<span style="color:#009900">''</span>);
            <span style="color:#000088">var</span> tempHtml = <span style="color:#009900">''</span>;
            dataList.map(<span style="color:#000088">function</span><span style="color:#4f4f4f">(item, index)</span> {
                        tempHtml += <span style="color:#009900">''</span>
                                + <span style="color:#009900">'<div class="row row-product-category now">'</span>
                                + <span style="color:#009900">'<div class="col-33 product-category-name">'</span>
                                + item.productCategoryName
                                + <span style="color:#009900">'</div>'</span>
                                + <span style="color:#009900">'<div class="col-33">'</span>
                                + item.priority
                                + <span style="color:#009900">'</div>'</span>
                                + <span style="color:#009900">'<div class="col-33"><a href="#" class="button delete" data-id="'</span>
                                + item.productCategoryId
                                + <span style="color:#009900">'">删除</a></div>'</span> + <span style="color:#009900">'</div>'</span>;
                    });
            $(<span style="color:#009900">'.product-categroy-wrap'</span>).append(tempHtml);
        }
    });

});</code></span>

productcategorymanage.css

<span style="color:#000000"><code><span style="color:#9b703f">.row-product-category</span> {
    border:<span style="color:#009900"> <span style="color:#009900">1</span>px solid <span style="color:#006666">#999</span></span>;
    padding:<span style="color:#009900"> .<span style="color:#009900">5</span>rem</span>;
    border-bottom:<span style="color:#009900"> none</span>;
}
<span style="color:#9b703f">.row-product-category</span><span style="color:#000000">:last-child</span> {
    border-bottom:<span style="color:#009900"> <span style="color:#009900">1</span>px solid <span style="color:#006666">#999</span></span>;
}
<span style="color:#9b703f">.category-input</span> {
    border:<span style="color:#009900"> none</span>;
    background-color:<span style="color:#009900"> <span style="color:#006666">#eee</span></span>;
}
<span style="color:#9b703f">.product-category-name</span> {
    white-space:<span style="color:#009900"> nowrap</span>;
    overflow-x:<span style="color:#009900"> scroll</span>;
}</code></span>

运行测试

可以通过前台debug和后台debug的方式，一步步的联调，会得到如下结果。

这里写图片描述

进入这个界面我们要完成批量新增的页面：

首先我们梳理思路，我们是批量新增的话，dao层传入的参数必须是list，service需要做的就是对controller传来的数据进行判断（既然进行判断是否可用，我们需要用dto的类）并调用方法，并将处理结果返回给controllet层交给controller

dao层：

mapper.xml:

 <!--批量增加商品信息-->
    <!--collection:表示类型
        item="productCategory" 表示每个元素
        index="index" 下标
        separator=","表示每个列名之间通过什么分割
        注意：insert into 后面的列名顺序和valuse（）里的属性名顺序必须相同

    -->
    <insert id="batchInsertProductCategory" parameterType="java.util.List" >
       INSERT   INTO tb_product_category(product_category_name,priority,create_time,shop_id)
       VALUES
       <foreach collection="list" item="productCategory" index="index" separator=",">
          (
              #{productCategory.productCategoryName},
              #{productCategory.priority},
              #{productCategory.createTime},
               #{productCategory.shopId}

          )
       </foreach>

    </insert>

service：

service层的实现：

   @Override
    @Transactional//事务处理
    //批量增加商品信息
    public ProductCategoryExecution batchInsertProductCategory(List<ProductCategory> productCategoryList) throws ProductCategoryOperationException {
      if(productCategoryList!=null&&productCategoryList.size()>0) {//如果传入的list不为空或者list的值大于0
         try{
            int effectNum=productCategoryDao.batchInsertProductCategory(productCategoryList);   //进行加入操作
             if (effectNum<=0){
                 throw new ProductCategoryOperationException("店铺类别创建失败");
             }else {
                 return new ProductCategoryExecution(ProductCategoryStateEnum.SUCCESS,productCategoryList,effectNum );//操作成功
             }
         }catch (Exception e){
                throw new ProductCategoryOperationException("加入失败"+e.getMessage());
         }

      }else
           return new ProductCategoryExecution(ProductCategoryStateEnum.EMPTY_LIST );//操作失败
    }

因为是commit操作，我们要在方法上加上事务注解。

我们要进行判断是否成功的操作，并且insert语句会返回一个加入的行数，所以我们书写dto来完成。

package storepro.dto;

import storepro.entity.ProductCategory;
import storepro.enums.ProductCategoryStateEnum;

import java.util.List;

/**
 *
 *
 * @ClassName: ProductCategoryExecution
 *
 * @Description: 封装操作ProductCategory的返回结果，包括操作状态和ProductCategory信息
 */
public class ProductCategoryExecution {

    private int state;
    private String stateInfo;

    // 因为是批量操作,所以使用List
    private List<ProductCategory> productCategoryList;

    private int count;


    /**
     *
     *
     * @Title:ProductCategoryExecution
     *
     * @Description:空的构造函数
     */
    public ProductCategoryExecution() {
        super();
    }


    /**
     *
     *
     * @Title:ProductCategoryExecution
     *
     * @Description:操作成功的时候使用的构造函数,返回操作状态和ProductCategory集合
     *
     * @param productCategoryStateEnum
     * @param productCategoryList
     * @param count
     */
    public ProductCategoryExecution(ProductCategoryStateEnum productCategoryStateEnum, List<ProductCategory> productCategoryList, int count) {
        this.state = productCategoryStateEnum.getState();
        this.stateInfo = productCategoryStateEnum.getStateInfo();
        this.productCategoryList = productCategoryList;
        this.count = count;
    }


    /**
     *
     *
     * @Title:ProductCategoryExecution
     *
     * @Description:操作失败的时候返回的信息，仅包含状态和状态描述即可
     *
     * @param productCategoryStateEnum
     */
    public ProductCategoryExecution(ProductCategoryStateEnum productCategoryStateEnum) {
        this.state = productCategoryStateEnum.getState();
        this.stateInfo = productCategoryStateEnum.getStateInfo();
    }

    public int getState() {
        return state;
    }

    public void setState(int state) {
        this.state = state;
    }

    public String getStateInfo() {
        return stateInfo;
    }

    public void setStateInfo(String stateInfo) {
        this.stateInfo = stateInfo;
    }

    public List<ProductCategory> getProductCategoryList() {
        return productCategoryList;
    }

    public void setProductCategoryList(List<ProductCategory> productCategoryList) {
        this.productCategoryList = productCategoryList;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

}

里面封装了productcategory的集合和操作状态和总数

接下来完成Controller：

    /*批量增加商品类别*/
    @RequestMapping(value = "/addproductcategory", method = RequestMethod.POST)
    @ResponseBody
    /*
     * @RequestBody：能自动接收前台传来的内容
     * */
    private Map<String, Object> addProductCategory(@RequestBody List<ProductCategory> productCategoryList, HttpServletRequest request) {
        Map<String, Object> modelMap = new HashMap<String, Object>();
        if (productCategoryList != null && productCategoryList.size() > 0) {//如果符合条件
            //获得店铺信息
            //这里获得id是通过shopmanage的controller当进入商品管理界面时从前端传来的shopid进行操作的getshopmanageinfo方法
            Shop current = (Shop) request.getSession().getAttribute("currentShop");
            for (ProductCategory pc : productCategoryList) {//给每个商品附上店铺id，这个店铺信息通过session
                // 保存
                pc.setShopId(current.getShopId());
            }

            try {
                ProductCategoryExecution productCategoryExecution = productCategoryService.batchInsertProductCategory(productCategoryList);//我们插入商品,交给sevice实现
                if (productCategoryExecution.getState() == ProductCategoryStateEnum.SUCCESS.getState()) {
                    modelMap.put("success", true);//返回一个成功处理的信
                    modelMap.put("effectNum", productCategoryExecution.getCount());
                } else {
                    modelMap.put("success", false);
                    modelMap.put("errMsg", productCategoryExecution.getStateInfo());
                }
            } catch (ProductCategoryOperationException e) {
                modelMap.put("success", false);
                modelMap.put("errMsg", e.toString());
                return modelMap;
            }
        } else {
            modelMap.put("success", false);
            modelMap.put("errMsg", "请至少输入一个商品类别");
            return modelMap;
        }
        return modelMap;
    }

要着重说的我们这里获得的id是当我们进入管理页面时，如果我们会获得shopid并且把shopid存入session，这里可以直接调用到shopid，我们要用shopid是因为怕将商品类别存错商铺，接下来是

View层

转自：

https://blog.csdn.net/yangshangwei/article/details/80764157

根据控制层的路由规则以及viewResolver

这里写图片描述

需要在shop目录下编写 productcategorymanage.html

productcategorymanage.html

<span style="color:#000000"><code><span style="color:#4f4f4f"><!DOCTYPE html></span>
<span style="color:#006666"><<span style="color:#4f4f4f">html</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">"utf-8"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">http-equiv</span>=<span style="color:#009900">"X-UA-Compatible"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"IE=edge"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">title</span>></span>商品分类<span style="color:#006666"></<span style="color:#4f4f4f">title</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"viewport"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"initial-scale=1, maximum-scale=1"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"shortcut icon"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/favicon.ico"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-capable"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"yes"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-status-bar-style"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"black"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"</span>></span>
<span style="color:#880000"><!-- 自定义的CSS --></span>    
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span>
    <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"../resources/css/shop/productcategorymanage.css"</span>></span> 

<span style="color:#006666"></<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">body</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">header</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"bar bar-nav"</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">h1</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"title"</span>></span>商品分类<span style="color:#006666"></<span style="color:#4f4f4f">h1</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">header</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content"</span>></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row row-product-category"</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-33"</span>></span>商品目录<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-33"</span>></span>优先级<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-33"</span>></span>操作<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
            <span style="color:#880000"><!-- 通过js从后台加载数据，动态的添加内容 --></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"product-categroy-wrap"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>

        <span style="color:#880000"><!-- 预占两个按钮，后续完善 --></span>
        <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
            <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row"</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"#"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill button-success"</span>
                        <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"new"</span>></span>新增<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
                <span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
                    <span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"#"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill"</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"submit"</span>></span>提交<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
                <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
            <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
        <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
    <span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>

    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/sj/lib/zepto/zepto.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/common/common.js'</span>
        <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
    <span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span>
        <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/shop/productcategorymanage.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">body</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">html</span>></span>
</code></span>

productcategorymanage.js

<span style="color:#000000"><code>$(<span style="color:#000088">function</span> <span style="color:#4f4f4f">()</span> {

    <span style="color:#000088">var</span> shopId = getQueryString(<span style="color:#009900">"shopId"</span>);
    <span style="color:#000088">var</span> productCategoryURL = <span style="color:#009900">'/o2o/shopadmin/getproductcategorybyshopId?shopId='</span> + shopId;

    $.getJSON(productCategoryURL,<span style="color:#000088">function</span><span style="color:#4f4f4f">(data)</span>{
        <span style="color:#000088">if</span> (data.success) {
            <span style="color:#000088">var</span> dataList = data.data;
            $(<span style="color:#009900">'.product-categroy-wrap'</span>).html(<span style="color:#009900">''</span>);
            <span style="color:#000088">var</span> tempHtml = <span style="color:#009900">''</span>;
            dataList.map(<span style="color:#000088">function</span><span style="color:#4f4f4f">(item, index)</span> {
                        tempHtml += <span style="color:#009900">''</span>
                                + <span style="color:#009900">'<div class="row row-product-category now">'</span>
                                + <span style="color:#009900">'<div class="col-33 product-category-name">'</span>
                                + item.productCategoryName
                                + <span style="color:#009900">'</div>'</span>
                                + <span style="color:#009900">'<div class="col-33">'</span>
                                + item.priority
                                + <span style="color:#009900">'</div>'</span>
                                + <span style="color:#009900">'<div class="col-33"><a href="#" class="button delete" data-id="'</span>
                                + item.productCategoryId
                                + <span style="color:#009900">'">删除</a></div>'</span> + <span style="color:#009900">'</div>'</span>;
                    });
            $(<span style="color:#009900">'.product-categroy-wrap'</span>).append(tempHtml);
        }
    });

});</code></span>

productcategorymanage.css

<span style="color:#000000"><code><span style="color:#9b703f">.row-product-category</span> {
    border:<span style="color:#009900"> <span style="color:#009900">1</span>px solid <span style="color:#006666">#999</span></span>;
    padding:<span style="color:#009900"> .<span style="color:#009900">5</span>rem</span>;
    border-bottom:<span style="color:#009900"> none</span>;
}
<span style="color:#9b703f">.row-product-category</span><span style="color:#000000">:last-child</span> {
    border-bottom:<span style="color:#009900"> <span style="color:#009900">1</span>px solid <span style="color:#006666">#999</span></span>;
}
<span style="color:#9b703f">.category-input</span> {
    border:<span style="color:#009900"> none</span>;
    background-color:<span style="color:#009900"> <span style="color:#006666">#eee</span></span>;
}
<span style="color:#9b703f">.product-category-name</span> {
    white-space:<span style="color:#009900"> nowrap</span>;
    overflow-x:<span style="color:#009900"> scroll</span>;
}</code></span>

运行测试

可以通过前台debug和后台debug的方式，一步步的联调，会得到如下结果。

这里写图片描述

接下来实现删除操作。

整理思路：删除需要获得shopid和productcategoryid，当作参数传入进行删除，其实和add方法信则新增没什么区别，看实现

DAO：

service层：

service实现：

    //删除相应的信息
    @Transactional
    @Override
    public ProductCategoryExecution deleteProductCategory(long productCategoryId, long shopId) {
        try {
            int effectNum=productCategoryDao.deleteProductCategory(productCategoryId,shopId);
            if (effectNum<=0){
                throw new ProductCategoryOperationException("商品类别删除失败");
            }else {
                return new ProductCategoryExecution(ProductCategoryStateEnum.SUCCESS);//成功操作
            }
        }catch (ProductCategoryOperationException e){
            throw new ProductCategoryOperationException("deleteProductCategory error:"+e.getMessage());
        }
    }

和add方法没什么区别，不做讲解

controller：

  @RequestMapping(value = "/removeproductcategory", method = RequestMethod.POST)
    @ResponseBody
    /*
     * @RequestBody：能自动接收前台传来的内容
     * */
    private Map<String, Object> removeProductCategory(Long productCategoryId, HttpServletRequest request) {
        Map<String, Object> modelMap = new HashMap<String, Object>();
        if (productCategoryId != null && productCategoryId > 0) {//如果符合条件
            //获得当前店铺信息
            //这里获得id是通过shopmanage的controller当进入商品管理界面时从前端传来的shopid进行操作的
            Shop currentShop = (Shop) request.getSession().getAttribute("currentShop");
            if (currentShop != null && currentShop.getShopId() != null) {//确认商品是否为空
                try {
                    ProductCategoryExecution productCategoryExecution = productCategoryService.deleteProductCategory(productCategoryId, currentShop.getShopId());//我们插入商品,交给sevice实现
                    if (productCategoryExecution.getState() == ProductCategoryStateEnum.SUCCESS.getState()) {
                        modelMap.put("success", true);//返回一个成功处理的信
                        modelMap.put("effectNum", productCategoryExecution.getCount());
                    } else {
                        modelMap.put("success", false);
                        modelMap.put("errMsg", productCategoryExecution.getStateInfo());
                    }
                } catch (ProductCategoryOperationException e) {
                    modelMap.put("success", false);
                    modelMap.put("errMsg", e.toString());
                    return modelMap;
                }
            } else {
                modelMap.put("success", false);
                modelMap.put("errMsg", ProductCategoryStateEnum.NULL_SHOP.getStateInfo());
            }
        } else {
            modelMap.put("success", false);
            modelMap.put("errMsg", "请选择输入一个商品类别");
            return modelMap;
        }
        return modelMap;
    }

和add方法没什么区别，看view层

View层

转自https://blog.csdn.net/yangshangwei/article/details/80772107

productcategorymanage.js

增加如下代码

 var deleteProductCategoryUrl = '/o2o/shopadmin/removeproductcategory';

// 一种是需要提交到后台的删除  now  ，另外一种是 新增但未提交到数据库中的删除 temp

    $('.product-categroy-wrap').on('click', '.row-product-category.now .delete',
            function(e) {
                var target = e.currentTarget;
                $.confirm('确定么?', function() {
                    $.ajax({
                        url : deleteProductCategoryUrl,
                        type : 'POST',
                        data : {
                            productCategoryId : target.dataset.id,
                        },
                        dataType : 'json',
                        success : function(data) {
                            if (data.success) {
                                $.toast('删除成功！');
                                // 重新加载数据
                                getProductCategoryList();
                            } else {
                                $.toast('删除失败！');
                            }
                        }
                    });
                });
            });

    $('.product-categroy-wrap').on('click', '.row-product-category.temp .delete',
            function(e) {
                $(this).parent().parent().remove();
            });

联调

前端页面debug, 后端也可以加入断点，以debug的方式开启tomcat，逐步调测

效果如下：

这里写图片描述

SSM项目之商铺系统-商铺管理之类别管理展示(十四)

展示了我们当前店铺所欲商品的分类，接下来我们实现它。

DAO层：

mapper.xml：

Service层：

Controller:

View层

productcategorymanage.html

productcategorymanage.js

productcategorymanage.css

运行测试

进入这个界面我们要完成批量新增的页面：

dao层：

mapper.xml:

service：

service层的实现：

View层

productcategorymanage.html

productcategorymanage.js

productcategorymanage.css

运行测试

接下来实现删除操作。

DAO：

service层：

service实现：

controller：

View层

productcategorymanage.js

联调

猜你喜欢

SSM项目之商铺系统-商铺管理之类别管理展示(十四)

展示了我们当前店铺所欲商品的分类，接下来我们实现它 。

DAO层：

mapper.xml：

Service层：

Controller:

View层

productcategorymanage.html

productcategorymanage.js

productcategorymanage.css

运行测试

进入这个界面我们要完成批量新增的页面：

dao层：

mapper.xml:

service：

service层的实现：

View层

productcategorymanage.html

productcategorymanage.js

productcategorymanage.css

运行测试

接下来实现删除操作。

DAO：

service层：

service实现：

controller：

View层

productcategorymanage.js

联调

猜你喜欢

展示了我们当前店铺所欲商品的分类，接下来我们实现它。