概述

大致效果如下

这里写图片描述

功能点

用户如果直接进入商铺管理页面，如果没有传入shopId或者session中没有对应的信息，直接强制跳转到商铺列表页面
商铺管理页面的【商铺信息】按钮，如果传入了shopId则为编辑商铺

商铺列表View层的开发

shoplist.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="/o2o/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/shoplist.css">
    </head>
<body>
    <header class="bar bar-nav">
        <h1 class="title">商铺列表</h1>
    </header>
    <div class="content">
        <div class="content-block">
            <p>你好,<span id="user-name"></span>
            <a class="pull-right" href="/o2o/shopadmin/shopoperation">增加店铺</a>
            </p>
            <div class="row row-shop">
                <div class="col-40">商店名称</div>
                <div class="col-40">状态</div>
                <div class="col-20">操作</div>
            </div>
            <!-- 通过js从后台加载数据，动态的添加内容 -->
            <div class="shop-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=""  id="change-pwd"
                        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/shoplist.js' charset='utf-8'></script>
</body>
</html>

shoplist.js

$(function(){

    // 调用，加载数据
    getshoplist();

    function getshoplist(){
        $.ajax({
            url:"/o2o/shopadmin/getshoplist",
            type:"get",
            dataType:"json",
            success:function(data){
                if (data.success) {
                    handleList(data.shopList);
                    handleUser(data.user);
                }
            }
        });
    }

    function handleUser(data){
        $('#user-name').text(data.name);
    }

    function handleList(data){
        var shopListHtml = '';
        data.map(function(item,index){
            shopListHtml += '<div class="row row-shop"><div class="col-40">'
                + item.shopName + '</div><div class="col-40">'
                + shopStatus(item.enableStatus)
                +'</div><div class="col-20">'
                + goShop(item.enableStatus,item.shopId)
                +'</div></div>'
        });
        $('.shop-wrap').html(shopListHtml);
    }


    function shopStatus(status){
        if (status == 0 ) {
            return '审核中';
        } else if (status == 1) {
            return '审核通过';
        } else{
            return '店铺非法';
        }
    }

    // 进入到商铺的管理页面,请求/shopadmin/shopmanagement ，进入到管理页面
    function goShop(status,shopId){
        if (status == 1 ) {
            return '<a href="/o2o/shopadmin/shopmanagement?shopId=' + shopId + '">进入</a>';
        }else{
            return '';
        }
    }


});

shoplist.css

.row-shop {
    border: 1px solid #999;
    padding: .5rem;
    border-bottom: none;
}
.row-shop:last-child {
    border-bottom: 1px solid #999;
}
.shop-name {
    white-space: nowrap;
    overflow-x: scroll;
}
.shop-wrap a {

}

通过商铺列表页面点击进入商铺的管理页面的开发

shopmanagement.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="/o2o/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/shopmanagement.css">
    </head>
<body>
    <header class="bar bar-nav">
        <h1 class="title">商铺管理</h1>
    </header>
    <div class="content">
        <div class="content-block">
            <div class="row">
                <div class="col-50 mb">
                    <!--增加id,方便在js中操作-->
                    <a id="shopInfo" href="/o2o/shopadmin/shopoperation" class="button button-big button-fill">商铺信息</a>
                </div>
                <div class="col-50 mb">
                    <!-- 待开发 -->
                    <a href="/o2o/shopadmin/productmanage" class="button button-big button-fill">商品管理</a>
                </div>
                <div class="col-50 mb">
                    <!-- 待开发 -->
                    <a href="/o2o/shopadmin/productcategorymanage" class="button button-big button-fill">类别管理</a>
                </div>
                <div class="col-100 mb">
                    <a href="/o2o/shopadmin/shoplist" class="button button-big button-fill button-danger">返回</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>
    <!--引入自定义的js -->
    <script type='text/javascript' src='../resources/js/shop/shopmanagement.js' charset='utf-8'></script>
    <script type='text/javascript' src='../resources/js/common/common.js' charset='utf-8'></script>
</body>
</html>

shopmanagement.js

$(function(){

    // 获取shopId
    var shopId = getQueryString("shopId");
    // 商铺管理的url
    var shopInfoUrl = '/o2o/shopadmin/getshopmanageInfo?shopId=' + shopId;

    $.getJSON(shopInfoUrl,function (data) {
        // 如果后台返回redirect=true,则跳转后台到设置的url
        if(data.redirect){
            window.location.href = data.url;
        }else{
            // 如果后台返回redirect=false，则设置shopId并给 按钮设置超链接属性（即编辑商铺）
            if (data.shopId != undefined && data.shopId != null){
                shopId = data.shopId;
            }
            $('#shopInfo').attr('href','/o2o/shopadmin/shopoperation?shopId=' + shopId);
        }
    });


});

shopmanagement.css

.mb {
    margin-bottom: .5rem;
}

Controller层配置路由

涉及到两个页面，不允许直接访问，所以需要在Controller层配置路由转发

com.artisan.o2o.web.shopadmin.ShopAdminController.java

    @RequestMapping(value = "/shoplist", method = RequestMethod.GET)
    public String shopList() {
        return "shop/shoplist";
    }

    @RequestMapping(value = "/shopmanagement", method = RequestMethod.GET)
    public String shopManagement() {
        return "shop/shopmanagement";
    }

单元测试

验证获取店铺列表

com.artisan.o2o.web.shopadmin.ShopController#getShopList方法加入断点

这里写图片描述

tomcat以debug的模式启动，启动后访问 http://localhost:8080/o2o/shopadmin/shoplist

逐步调测

这里写图片描述

检查结果是否符合预期，如果都没问题的话，就可以得到如下前端页面

这里写图片描述

验证商铺管理页面

首先我们先回顾下控制层的逻辑

这里写图片描述

当浏览器的请求如下

http://localhost:8080/o2o/shopadmin/shopmanagement?shopId=5

即shopId合法

Shop shop = new Shop();
shop.setShopId(shopId);
// 将currentShop放到session中
request.getSession().setAttribute("currentShop", shop);
modelMap.put("redirect", false);

此时将shop放在session中，key为currentShop，并且告诉View层无需跳转，停留在该页面。

如果访问的是http://localhost:8080/o2o/shopadmin/shopmanagement 没有传递shopId，想直接访问商铺管理页面，我们首先获取shopId,

工具类：
这里写图片描述

此时，shopId = -1 , 走如下逻辑

    if (shopId < 0) {
            // 尝试从当前session中获取
            Shop currentShop = (Shop) request.getSession().getAttribute("currentShop");
            if (currentShop == null) {
                // 如果当前session中也没有shop信息,告诉view层 重定向
                modelMap.put("redirect", true);
                modelMap.put("url", "/o2o/shopadmin/shoplist");
            }else{
                // 告诉view层 进入该页面
                modelMap.put("redirect", false);
                modelMap.put("shopId", currentShop.getShopId());
            }
        }

首先尝试从session中通过key来获取该shop信息，取到的话，告诉前端View层，无需跳转，并将shopId传递给View层，方便给 shopInfo 这个按钮设置超链接，传入shopId,点击即为编辑商铺。
这里写图片描述

如果session中还是没有shop的信息，告诉view层跳转到商铺列表

 if(data.redirect){
            window.location.href = data.url;
        }

所以测试的时候，为了安全起见，请将浏览器的缓存清空。

首先访问
http://localhost:8080/o2o/shopadmin/shopmanagement ,因为第一次访问，没有传入shopId ,session中也没有数据，会跳转到 http://localhost:8080/o2o/shopadmin/shoplist 商铺列表页面

然后在访问一个 http://localhost:8080/o2o/shopadmin/shopmanagement?shopId=5 ,进入到shopId=5的店铺管理页面。

最后在http://localhost:8080/o2o/shopadmin/shopmanagement ，因为第二次访问了shopId=5的店铺，session中存入了数据，所以也进入到shopId=5的店铺管理页面。

这部分仅仅是session的操作，是否有权限进入改页面后续会通过拦截器来实现。

我们还预留了几个按钮，接着继续实现吧

Github地址

代码地址： https://github.com/yangshangwei/o2o

实战SSM_O2O商铺_24【商铺列表】View层开发

概述

商铺列表View层的开发

shoplist.html

shoplist.js

shoplist.css

通过商铺列表页面点击进入商铺的管理页面的开发

shopmanagement.html

shopmanagement.js

shopmanagement.css

Controller层配置路由

单元测试

验证获取店铺列表

验证商铺管理页面

Github地址

猜你喜欢