实战SSM_O2O商铺_24【商铺列表】View层开发
生活随笔
收集整理的這篇文章主要介紹了
实战SSM_O2O商铺_24【商铺列表】View层开发
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 概述
- 商鋪列表View層的開發(fā)
- shoplist.html
- shoplist.js
- shoplist.css
- 通過商鋪列表頁面點(diǎn)擊進(jìn)入商鋪的管理頁面的開發(fā)
- shopmanagement.html
- shopmanagement.js
- shopmanagement.css
- Controller層配置路由
- 單元測試
- 驗(yàn)證獲取店鋪列表
- 驗(yàn)證商鋪管理頁面
- Github地址
概述
大致效果如下
功能點(diǎn)
-
用戶如果直接進(jìn)入商鋪管理頁面，如果沒有傳入shopId或者session中沒有對(duì)應(yīng)的信息，直接強(qiáng)制跳轉(zhuǎn)到商鋪列表頁面
-
商鋪管理頁面的 【商鋪信息】按鈕，如果傳入了shopId則為編輯商鋪
商鋪列表View層的開發(fā)
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">狀態(tài)</div><div class="col-20">操作</div></div><!-- 通過js從后臺(tái)加載數(shù)據(jù)，動(dòng)態(tài)的添加內(nèi)容 --><div class="shop-wrap"></div></div><div class="content-block"><div class="row"><div class="col-50"><!-- 先預(yù)占兩個(gè)按鈕，后續(xù)完善 --><a href="" id="log-out"class="button button-big button-fill button-danger">退出系統(tǒng)</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(){// 調(diào)用，加載數(shù)據(jù)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 '店鋪非法';}}// 進(jìn)入到商鋪的管理頁面,請(qǐng)求/shopadmin/shopmanagement ，進(jìn)入到管理頁面function goShop(status,shopId){if (status == 1 ) {return '<a href="/o2o/shopadmin/shopmanagement?shopId=' + shopId + '">進(jìn)入</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 {}通過商鋪列表頁面點(diǎn)擊進(jìn)入商鋪的管理頁面的開發(fā)
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"><!-- 待開發(fā) --><a href="/o2o/shopadmin/productmanage" class="button button-big button-fill">商品管理</a></div><div class="col-50 mb"><!-- 待開發(fā) --><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(){// 獲取shopIdvar shopId = getQueryString("shopId");// 商鋪管理的urlvar shopInfoUrl = '/o2o/shopadmin/getshopmanageInfo?shopId=' + shopId;$.getJSON(shopInfoUrl,function (data) {// 如果后臺(tái)返回redirect=true,則跳轉(zhuǎn)后臺(tái)到設(shè)置的urlif(data.redirect){window.location.href = data.url;}else{// 如果后臺(tái)返回redirect=false，則設(shè)置shopId并給 按鈕設(shè)置超鏈接屬性（即編輯商鋪）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層配置路由
涉及到兩個(gè)頁面，不允許直接訪問，所以需要在Controller層配置路由轉(zhuǎn)發(fā)
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";}單元測試
驗(yàn)證獲取店鋪列表
com.artisan.o2o.web.shopadmin.ShopController#getShopList方法加入斷點(diǎn)
tomcat以debug的模式啟動(dòng)，啟動(dòng)后 訪問 http://localhost:8080/o2o/shopadmin/shoplist
逐步調(diào)測
檢查結(jié)果是否符合預(yù)期，如果都沒問題的話，就可以得到如下前端頁面
驗(yàn)證商鋪管理頁面
首先我們先回顧下控制層的邏輯
當(dāng)瀏覽器的請(qǐng)求 如下
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);此時(shí)將shop放在session中，key為currentShop，并且告訴View層 無需跳轉(zhuǎn)，停留在該頁面。
如果訪問的是http://localhost:8080/o2o/shopadmin/shopmanagement 沒有傳遞shopId，想直接訪問 商鋪管理頁面 ， 我們首先獲取shopId,
工具類 ：
此時(shí)，shopId = -1 , 走如下邏輯
if (shopId < 0) {// 嘗試從當(dāng)前session中獲取Shop currentShop = (Shop) request.getSession().getAttribute("currentShop");if (currentShop == null) {// 如果當(dāng)前session中也沒有shop信息,告訴view層 重定向modelMap.put("redirect", true);modelMap.put("url", "/o2o/shopadmin/shoplist");}else{// 告訴view層 進(jìn)入該頁面modelMap.put("redirect", false);modelMap.put("shopId", currentShop.getShopId());}}首先嘗試從session中通過key來獲取該shop信息，取到的話，告訴前端View層，無需跳轉(zhuǎn)，并將shopId傳遞給View層，方便給 shopInfo 這個(gè)按鈕設(shè)置超鏈接，傳入shopId,點(diǎn)擊即為編輯商鋪。
如果session中還是沒有shop的信息，告訴view層跳轉(zhuǎn)到商鋪列表
if(data.redirect){window.location.href = data.url;}所以測試的時(shí)候，為了安全起見，請(qǐng)將瀏覽器的緩存清空。
首先訪問
http://localhost:8080/o2o/shopadmin/shopmanagement ,因?yàn)榈谝淮卧L問，沒有傳入shopId ,session中也沒有數(shù)據(jù)，會(huì)跳轉(zhuǎn)到 http://localhost:8080/o2o/shopadmin/shoplist 商鋪列表頁面
然后在訪問一個(gè) http://localhost:8080/o2o/shopadmin/shopmanagement?shopId=5 ,進(jìn)入到shopId=5的店鋪管理頁面。
最后在http://localhost:8080/o2o/shopadmin/shopmanagement ，因?yàn)?第二次訪問了shopId=5的店鋪，session中存入了數(shù)據(jù)，所以也進(jìn)入到shopId=5的店鋪管理頁面。
這部分僅僅是session的操作，是否有權(quán)限進(jìn)入改頁面后續(xù)會(huì)通過攔截器來實(shí)現(xiàn)。
我們還預(yù)留了幾個(gè)按鈕，接著繼續(xù)實(shí)現(xiàn)吧
Github地址
代碼地址： https://github.com/yangshangwei/o2o
總結(jié)
以上是生活随笔為你收集整理的实战SSM_O2O商铺_24【商铺列表】View层开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实战SSM_O2O商铺_23【商铺列表】
- 下一篇： Oracle-维护存在主键的分区表时的注