实战SSM

xiaoxiao2021-02-28 40

文章目录

概述商铺列表View层的开发shoplist.htmlshoplist.jsshoplist.css 通过商铺列表页面点击进入商铺的管理页面的开发shopmanagement.htmlshopmanagement.jsshopmanagement.css 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>  <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">  <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>  <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

转载请注明原文地址: https://www.6miu.com/read-2626148.html

技术

最新回复(0)