shop--8.商品类别--初始化展示

商店管理中的类别管理

功能：从后台返回商品信息，动态生成删除按钮

 

dao层

@Repository
public interface ProductCategoryDao {
    public List<ProductCategory> queryProductCategoryList(@Param( "shopId" ) long ShopId);
}

　　

SQL

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.shop.dao.ProductCategoryDao">

    <!--public List<ProductCategory> queryProductCategoryList(int ShopId);-->
    <select id="queryProductCategoryList" parameterType="java.lang.Long"
            resultType="com.shop.bean.ProductCategory">
        SELECT
        product_category_id,
        product_category_name,
        priority,
        create_time,
        shop_id
        FROM product_category
        WHERE
        shop_id=#{shopId}
        ORDER BY
        priority DESC
    </select>
    
</mapper>

　　

 

Service层

public interface ShopCategoryService {
    public List<ShopCategory>getShopCategoryList(ShopCategory shopCategoryCondition);
}

　　

impl

@Service
public class ProductCategoryServiceImpl implements ProductCategoryService{
    @Autowired
    ProductCategoryDao productCategoryDao;


    @Override
    public List<ProductCategory> getProductCategoryList(Long shopId) {
        return productCategoryDao.queryProductCategoryList( shopId );
    }
}

　　

Controller层

@Controller
@RequestMapping("/shopadmin")
public class ProductCategoryController {
    
    @Autowired
    private ProductCategoryService productCategoryService;

    @RequestMapping(value="/getproductcategorylist", method= RequestMethod.GET)
    @ResponseBody
    public Map<String, Object> getProductCategoryList(HttpServletRequest request){
        Map<String, Object> modelMap = new HashMap<>();
        //Shop currentShop = (Shop) request.getSession().getAttribute( "currentShop" );
        Shop currentShop = new Shop();
        currentShop.setShopId(1L);
        List<ProductCategory> productCategoryList = null;
        if(currentShop != null && currentShop.getShopId() > 0){
            productCategoryList = productCategoryService.getProductCategoryList( 1L );
            modelMap.put( "productCategoryList", productCategoryList );
            modelMap.put( "success", true );
        } else{
            modelMap.put( "errMsg", "没有商铺" );
            modelMap.put( "success", true );
        }
        return modelMap;
    }
}

　　

productcategorymanegement.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商店列表</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="../resources/css/shop/productcategorymanegement.css">
</head>
<body>
<header class="bar bar-nav">
    <h1 class="title">商品分类管理</h1>
</header>
<div class="content">
    <div class="content-block">
        <div class="row row-product-category">
            <div class="col-40">商店名称</div>
            <div class="col-40">状态</div>
            <div class="col-20">操作</div>
        </div>

        <div class="category-wrap">

        </div>
    </div>
    <div class="content-block">
        <div class="row">
            <div class="col-50">
                <a href="#" id="log-out"
                   class="button button-big button-fill button-danger">新增</a>
            </div>
            <div class="col-50">
                <a href="/shop/changepsw" class="button button-big button-fill button-success">提交</a>
            </div>
        </div>
    </div>
</div>



<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/shop/productcategorymanegement.js' charset='utf-8'></script>
</body>
</html>

　　

 

productcategorymanegement.js

$(function() {
    var shopId = 1;
    var listUrl = '/shopadmin/getproductcategorylist?shopId=' + shopId;
    var addUrl = '/myo2o/shop/addproductcategorys';
    var deleteUrl = '/myo2o/shop/removeproductcategory';
    getList();
    function getList() {
        $.getJSON(listUrl, function(data) {
            if (data.success) {
                $('.category-wrap').html('');
                var tempHtml = '';
                //遍历procategorylist的列表
                data.productCategoryList.map(function(item, index) {
                    tempHtml += ''
                        + '<div class="row row-product-category now">'
                        + '<div class="col-33 product-category-name">'
                        + item.productCategoryName
                        + '</div>'
                        + '<div class="col-33">'
                        + item.priority
                        + '</div>'
                        + '<div class="col-33"><a href="#" class="button delete" data-id="'
                        + item.productCategoryId
                        + '">删除</a></div>'
                        + '</div>';
                });
                //填进category-wrap控件里
                $('.category-wrap').append(tempHtml);
            }
        });
    }
});

　　

　　

 

 

productcategorymanegement.css

.row-product-category {
    border: 1px solid #999;
    padding: .5rem;
    border-bottom: none;
}
.row-product-category:last-child {
    border-bottom: 1px solid #999;
}
.category-input {
    border: none;
    background-color: #eee;
}
.product-category-name {
    white-space: nowrap;
    overflow-x: scroll;
}

　　

 

posted @ 2018-04-21 21:37  SkyeAngel  阅读(306)  评论(0)  编辑  收藏  举报