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

最新推荐文章于 2020-03-30 19:17:12 发布

小小工匠

最新推荐文章于 2020-03-30 19:17:12 发布

阅读量1.2w

点赞数 4

分类专栏：【实战-SSM In Action】文章标签： ssm实战

本文链接：https://blog.csdn.net/yangshangwei/article/details/80630699

版权

【实战-SSM In Action】同时被 2 个专栏收录

48 篇文章 19 订阅

订阅专栏

实战系列-SSM实战

48 篇文章 13 订阅

订阅专栏

文章目录

概述
商铺列表View层的开发
通过商铺列表页面点击进入商铺的管理页面的开发
Controller层配置路由
单元测试
- 验证获取店铺列表
- 验证商铺管理页面
Github地址

在这里插入图片描述

概述

大致效果如下

这里写图片描述

功能点

用户如果直接进入商铺管理页面，如果没有传入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

小小工匠

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
4
评论
实战SSM_O2O商铺_24【商铺列表】View层开发

概述商铺列表View层的开发shoplist.htmlshoplist.jsshoplist.css通过商铺列表页面点击进入商铺的管理页面的开发shopmanagement.htmlshopmanagement.jsshopmanagement.css单元测试Github地址概述大致效果如下功能点用户如果直接进入商铺管理页面，如果没...
复制链接

扫一扫