9-1 首頁背景的開發
Dao層：
/**
* 根據傳入的查詢條件（頭條名查詢頭條）
*
* @param headLineCondition
* @return
*/
List<HeadLine> queryHeadLine(@Param("headLineCondition") HeadLine headLineCondition);
<select id="queryHeadLine" resultType="com.doit.o2o.entity.HeadLine">
SELECT line_id,line_name,line_link,line_img,priority,enable_status,create_time,last_edit_time
FROM tb_head_line
<where>
<if test="headLineCondition.enableStatus!=null">
and enable_status = #{headLineCondition.enableStatus}
</if>
</where>
ORDER BY priority DESC
</select>
Service層：
/**
* 根據傳入的條件傳回指定的頭條清單
* @param headLineCondition
* @return
* @throws IOException
*/
List<HeadLine> getHeadLineList(HeadLine headLineCondition) throws IOException;
@Service
public class HeadLineServiceImpl implements HeadLineService{
@Autowired
private HeadLineDao headLineDao;
@Override
public List<HeadLine> getHeadLineList(HeadLine headLineCondition) throws IOException {
return headLineDao.queryHeadLine(headLineCondition);
}
}
Controller層：
@Controller
@RequestMapping("/frontend")
public class MainPageController {
@Autowired
private ShopCategoryService shopCategoryService;
@Autowired
private HeadLineService headLineService;
/**
* 初始化前端展示系統的首頁資訊，包括擷取一級店鋪類别清單一級頭條清單
* @return
*/
@RequestMapping(value="/listmainpageinfo",method=RequestMethod.GET)
@ResponseBody
private Map<String,Object> listMainPageInfo(){
Map<String,Object> modelMap = new HashMap<String,Object>();
List<ShopCategory> shopCategoryList= new ArrayList<ShopCategory>();
List<HeadLine> headLineList= new ArrayList<HeadLine>();
try{
//擷取一級店鋪類别清單（即parentId為空的ShopCategory）
shopCategoryList = shopCategoryService.getShopCategoryList(null);
modelMap.put("shopCategoryList", shopCategoryList);
}catch(Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
return modelMap;
}
try{
//擷取狀态可用（1）的頭條清單
HeadLine headLineCondition = new HeadLine();
headLineCondition.setEnableStatus(1);
headLineList = headLineService.getHeadLineList(headLineCondition);
modelMap.put("headLineList", headLineList);
}catch(Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
return modelMap;
}
modelMap.put("success", true);
return modelMap;
}
}
9-2 首頁前端的開發上
index.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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="../resources/css/frontend/index/index.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="page-group">
<div class="page">
<header class="bar bar-nav">
<!-- <a class="button button-link button-nav pull-left" href="/demos/card" target="_blank" rel="external nofollow" data-transition='slide-out'>
<span class="icon icon-left"></span>
傳回
</a> -->
<h1 class="title">My School O2O</h1>
</header>
<nav class="bar bar-tab">
<a class="tab-item active" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > <span
class="icon icon-home"></span> <span class="tab-label">首頁</span>
</a> <a class="tab-item" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id='me'> <span class="icon icon-me"></span>
<span class="tab-label">我</span>
</a>
</nav>
<div class="content">
<!-- 這裡是頁面内容區 -->
<div class="swiper-container index-banner" data-space-between='10'>
<div class="swiper-wrapper">
<!-- <div class="swiper-slide img-wrap">
<img class="banner-img" src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
</div>
<div class="swiper-slide img-wrap">
<img class="banner-img" src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
</div>
<div class="swiper-slide img-wrap">
<img class="banner-img" src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt="">
</div> -->
</div>
<div class="swiper-pagination"></div>
</div>
<div class='total-shop-button'>
<a href="/o2o/frontend/shoplist" target="_blank" rel="external nofollow" external>全部商店</a>
</div>
<!-- 一級類别展示區域 -->
<div class="row">
<!-- <div class="col-50 shop-classify">
<div class='word'>
<p class='shop-title'>本期推薦</p>
<p class='shop-desc'>近期相關活動、新款上市、旅遊資訊</p>
</div>
<div class='shop-classify-img-warp'>
<img class='shop-img' src="static/index/display13.png">
</div>
</div> -->
</div>
</div>
</div>
<!--側邊欄 -->
<div class="panel-overlay"></div>
<div class="panel panel-right panel-reveal" id="panel-left-demo">
<div class="content-block">
<p>
<a href="/o2o/frontend/myrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">消費記錄</a>
</p>
<p>
<a href="/o2o/frontend/mypoint" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">我的積分</a>
</p>
<p>
<a href="/o2o/frontend/pointrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">積分兌換記錄</a>
</p>
<!-- Click on link with "close-panel" class will close panel -->
</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/frontend/index.js'
charset='utf-8'></script>
</body>
</html>
index.js
$(function() {
//定義通路背景，擷取頭條清單以及一級類别清單的URL
var url = '/o2o/frontend/listmainpageinfo';
//通路背景，擷取頭條清單以及一級類别清單
$.getJSON(url, function (data) {
if (data.success) {
//擷取背景傳遞過來的頭條清單
var headLineList = data.headLineList;
var swiperHtml = '';
//周遊頭條清單，并拼接出輪播圖組
headLineList.map(function (item, index) {
swiperHtml += ''
+ '<div class="swiper-slide img-wrap">'
+ '<a href="'+item.lineLink
+ '"external><img class="banner-img" src="'+ item.lineImg
+'" alt="'+ item.lineName +'"></a>'+ '</div>';
});
//将輪播圖組指派給前端HTML控件
$('.swiper-wrapper').html(swiperHtml);
$(".swiper-container").swiper({
//設定輪播圖輪換時間為1秒
autoplay: 1000,
//使用者對輪播圖進行操作時，是否自動停止autoplay
autoplayDisableOnInteraction: false
});
//擷取背景傳遞過來的大類清單
var shopCategoryList = data.shopCategoryList;
var categoryHtml = '';
//周遊大類清單，并拼接出兩兩(col-50)一行的類别
shopCategoryList.map(function (item, index) {
categoryHtml += ''
+ '<div class="col-50 shop-classify" data-category='+ item.shopCategoryId +'>'
+ '<div class="word">'
+ '<p class="shop-title">'+ item.shopCategoryName +'</p>'
+ '<p class="shop-desc">'+ item.shopCategoryDesc +'</p>'
+ '</div>'
+ '<div class="shop-classify-img-warp">'
+ '<img class="shop-img" src="'+ item.shopCategoryImg +'">'
+ '</div>'
+ '</div>';
});
//将拼接好的類别指派給前端HTML控件進行展示
$('.row').html(categoryHtml);
}
});
//若點選"我的"，則顯示側欄
$('#me').click(function () {
$.openPanel('#panel-left-demo');
});
$('.row').on('click', '.shop-classify', function (e) {
var shopCategoryId = e.currentTarget.dataset.category;
var newUrl = '/o2o/frontend/shoplist?parentId=' + shopCategoryId;
window.location.href = newUrl;
});
});
index.css
.index-banner {
height: 35%;
padding-bottom: 0.4rem;
}
.img-wrap {
overflow: hidden;
}
.banner-img {
width: 100%;
height: 100%;
}
.total-shop-button {
height: 1.5rem;
line-height: 1.5rem;
padding-left: 0.85rem;
margin-bottom: 0.4rem;
position: relative;
cursor: pointer;
}
.total-shop-button:before {
content: '';
display: inline-block;
position: absolute;
left: 0;
width: 0.15rem;
height: 1.5rem;
background-color: #0894ec;
}
.shop-classify {
height: 3.3rem;
padding: 0.2rem;
cursor: pointer;
}
.shop-classify > .word {
width: 65%;
height: 100%;
overflow: hidden;
float: left;
}
.shop-classify > .word > p {
margin: 0;
}
.shop-classify > .word > .shop-title {
margin: 0;
font-size: 0.8rem;
}
.shop-classify > .word > .shop-desc {
margin: 0;
font-size: 0.4rem;
}
// .shop-classify > .shop-img {
// width: 2.4rem;
// height: 2.4rem;
// margin-left: 0.2rem;
// display: inline-block;
// }
.shop-classify > .shop-classify-img-warp {
width: 30%;
height: 100%;
margin-left: 0.2rem;
display: inline-block;
}
.shop-classify > .shop-classify-img-warp > .shop-img {
width: 100%;
height: 100%;
}
9-3 首頁前端的開發下
建立FrontendController：
package com.doit.o2o.web.frontend;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping("/frontend")
public class FrontendController {
@RequestMapping(value="index",method=RequestMethod.GET)
private String index(){
return "frontend/index";
}
}
【Java實戰】SSM到SpringBoot校園商鋪全棧開發第9章 前端展示系統 9-1 首頁背景的開發 9-2 首頁前端的開發上 9-3 首頁前端的開發下 9-4 docBase與upload的含義 9-5 店鋪清單頁後端的開發 9-6 店鋪清單頁前端的開發上 9-7 店鋪清單頁前端的開發下 9-8 店鋪詳情頁的開發上 9-9 店鋪詳情頁的開發下 9-10 商品詳情頁的開發 9-11 前端展示系統bug修複 9-12 前端展示系統開發總結
在server.xml檔案中最後添加：
<Context docBase="F:\\projectdev\\upload" path="/upload"/>
使得對本地伺服器/upload路徑下的通路映射到指定的檔案目錄F:\projectdev\upload下。
9-4 docBase與upload的含義
略
9-5 店鋪清單頁後端的開發
Controller層：
package com.doit.o2o.web.frontend;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.doit.o2o.dto.ShopExecution;
import com.doit.o2o.entity.Area;
import com.doit.o2o.entity.Shop;
import com.doit.o2o.entity.ShopCategory;
import com.doit.o2o.service.AreaService;
import com.doit.o2o.service.ShopCategoryService;
import com.doit.o2o.service.ShopService;
import com.doit.o2o.util.HttpServletRequestUtil;
@Controller
@RequestMapping("/frontend")
public class ShopListController {
@Autowired
private ShopService shopService;
@Autowired
private ShopCategoryService shopCategoryService;
@Autowired
private AreaService areaService;
/**
* 傳回商品清單頁裡的ShopCategory清單（二級或一級），以及區域資訊清單
* @param request
* @return
*/
@RequestMapping(value = "/listshopspageinfo", method = RequestMethod.GET)
@ResponseBody
private Map<String,Object> listShopsPageInfo(HttpServletRequest request){
Map<String,Object> modelMap = new HashMap<String,Object>();
//試着從前端請求中擷取parentId
long parentId = HttpServletRequestUtil.getLong(request, "parentId");
List<ShopCategory> shopCategoryList = null;
if(parentId!=-1){
//如果parentId存在，則取出該一級ShopCategory下的二級ShopCategory清單
try{
ShopCategory shopCategoryCondition = new ShopCategory();
ShopCategory parent = new ShopCategory();
parent.setShopCategoryId(parentId);
shopCategoryCondition.setParent(parent);
shopCategoryList = shopCategoryService.getShopCategoryList(shopCategoryCondition);
}catch(Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
}
}else{
try{
//如果parentId不存在，則取出一級ShopCategory（使用者在首頁選擇的是全部商店清單）
shopCategoryList = shopCategoryService.getShopCategoryList(null);
}catch(Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
}
}
modelMap.put("shopCategoryList", shopCategoryList);
List<Area> areaList = null;
try {
//擷取區域清單資訊
areaList = areaService.getAreaList();
modelMap.put("areaList", areaList);
modelMap.put("success", true);
return modelMap;
} catch (Exception e) {
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
}
return modelMap;
}
@RequestMapping(value="/listshops",method=RequestMethod.GET)
@ResponseBody
private Map<String,Object> listShops(HttpServletRequest request){
Map<String,Object> modelMap= new HashMap<String,Object>();
//擷取頁碼
int pageIndex = HttpServletRequestUtil.getInt(request, "pageIndex");
//擷取一頁需要顯示的資料條數
int pageSize = HttpServletRequestUtil.getInt(request, "pageSize");
//非空判斷
if ((pageIndex > -1) && (pageSize > -1)) {
//試着擷取一級類别Id
long parentId = HttpServletRequestUtil.getLong(request, "parentId");
//試着擷取特定二級類别Id
long shopCategoryId = HttpServletRequestUtil.getLong(request,
"shopCategoryId");
//試着擷取區域Id
int areaId = HttpServletRequestUtil.getInt(request, "areaId");
//試着擷取模糊查詢的名字
String shopName = HttpServletRequestUtil.getString(request,
"shopName");
//擷取組合之後的查詢條件
Shop shopCondition = compactShopCondition4Search(parentId,
shopCategoryId, areaId, shopName);
//根據查詢條件和分頁資訊擷取店鋪資訊清單，并傳回總數
ShopExecution se = shopService.getShopList(shopCondition,
pageIndex, pageSize);
modelMap.put("shopList", se.getShopList());
modelMap.put("count", se.getCount());
modelMap.put("success", true);
} else {
modelMap.put("success", false);
modelMap.put("errMsg", "empty pageSize or pageIndex");
}
return modelMap;
}
/**
* 組合查詢條件，并将條件封裝到ShopCondition對象裡傳回
* @param parentId
* @param shopCategoryId
* @param areaId
* @param shopName
* @return
*/
private Shop compactShopCondition4Search(long parentId,
long shopCategoryId, int areaId, String shopName) {
Shop shopCondition = new Shop();
if (parentId != -1L) {
//查詢某個一級ShopCategory下面的所有二級ShopCatery裡面的店鋪清單
ShopCategory childCategory = new ShopCategory();
ShopCategory parentCategory = new ShopCategory();
parentCategory.setShopCategoryId(parentId);
childCategory.setParent(parentCategory);
shopCondition.setShopCategory(childCategory);
}
if (shopCategoryId != -1L) {
//查詢某個二級ShopCategory下面的店鋪清單
ShopCategory shopCategory = new ShopCategory();
shopCategory.setShopCategoryId(shopCategoryId);
shopCondition.setShopCategory(shopCategory);
}
if (areaId != -1L) {
//查詢位于某個區域Id下的店鋪清單
Area area = new Area();
area.setAreaId(areaId);
shopCondition.setArea(area);
}
if (shopName != null) {
//查詢名字裡包含shopName的店鋪清單
shopCondition.setShopName(shopName);
}
//前端展示的店鋪都是稽核成功的店鋪
shopCondition.setEnableStatus(1);
return shopCondition;
}
}
9-6 店鋪清單頁前端的開發上
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="/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="../resources/css/frontend/shoplist/shoplist.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="page-group">
<div class="page">
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left" external
href="index" target="_blank" rel="external nofollow" data-transition='slide-out'> <span
class="icon icon-left"></span> 傳回
</a>
<h1 class="title">商店清單</h1>
</header>
<div class="bar bar-header-secondary">
<div class="searchbar">
<a class="searchbar-cancel">取消</a>
<!-- 搜尋欄 -->
<div class="search-input">
<label class="icon icon-search" for="search"></label> <input
type="search" id='search' placeholder='輸入關鍵字...' />
</div>
</div>
</div>
<nav class="bar bar-tab">
<a class="tab-item" href="/o2o/frontend/index" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" external> <span
class="icon icon-home"></span> <span class="tab-label">首頁</span>
</a> <a class="tab-item" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="me"> <span
class="icon icon-me"></span> <span class="tab-label">我</span>
</a>
</nav>
<div class="content infinite-scroll infinite-scroll-bottom"
data-distance="100">
<!-- 類别清單展示區 -->
<div class="shoplist-button-div" id="shoplist-search-div">
<!-- <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">所有貨物</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">吃的</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">喝的</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">Usual Button 1</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">Usual Button 1</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">Usual Button 1</a> -->
</div>
<div class="select-wrap">
<!-- 區域清單展示區 -->
<select class="select" id="area-search"></select>
</div>
<!-- 店鋪清單在此添加 -->
<div class="list-div shop-list">
<!-- <div class="card">
<div class="card-header">傳統火鍋店</div>
<div class="card-content">
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media">
<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
</div>
<div class="item-inner">
<div class="item-subtitle"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="card-footer">
<span>2015/01/15</span>
<span>5 評論</span>
</div>
</div> -->
</div>
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
</div>
</div>
<!--側邊欄 -->
<div class="panel-overlay"></div>
<div class="panel panel-right panel-reveal" id="panel-left-demo">
<div class="content-block">
<p>
<a href="/o2o/frontend/myrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">消費記錄</a>
</p>
<p>
<a href="/o2o/frontend/mypoint" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">我的積分</a>
</p>
<p>
<a href="/o2o/frontend/pointrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">積分兌換記錄</a>
</p>
<!-- Click on link with "close-panel" class will close panel -->
</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/common/common.js' charset='utf-8'></script>
<script type='text/javascript'
src='../resources/js/frontend/shoplist.js' charset='utf-8'></script>
</body>
</html>
9-7 店鋪清單頁前端的開發下
shoplist.js:
$(function() {
var loading = false;
//分頁允許傳回的最大條數，超過此數則禁止通路背景
var maxItems = 999;
//一頁傳回的最大條數
var pageSize = 10;
//擷取店鋪清單的URL
var listUrl = '/o2o/frontend/listshops';
//擷取店鋪類别清單以及區域清單的URL
var searchDivUrl = '/o2o/frontend/listshopspageinfo';
//頁碼
var pageNum = 1;
//從位址欄URL裡嘗試擷取parentId shop category id
var parentId = getQueryString('parentId');
var areaId = '';
var shopCategoryId = '';
var shopName = '';
/**
* 擷取店鋪類别清單以及區域清單資訊
* @returns
*/
function getSearchDivData() {
//如果傳入了parentId，則取出此一級類别下面的所有二級類别
var url = searchDivUrl + '?' + 'parentId=' + parentId;
$
.getJSON(
url,
function(data) {
if (data.success) {
//擷取背景傳回過來的店鋪類别清單
var shopCategoryList = data.shopCategoryList;
var html = '';
html += '<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button" data-category-id=""> 全部類别 </a>';
//周遊店鋪類别清單，并拼接出a标簽集
shopCategoryList
.map(function(item, index) {
html += '<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button" data-category-id='
+ item.shopCategoryId
+ '>'
+ item.shopCategoryName
+ '</a>';
});
//将拼接好的類别标簽嵌入前台的html元件裡
$('#shoplist-search-div').html(html);
var selectOptions = '<option value="">全部街道</option>';
//擷取背景傳回過來的區域資訊清單
var areaList = data.areaList;
//周遊區域資訊清單，拼接出option标簽集
areaList.map(function(item, index) {
selectOptions += '<option value="'
+ item.areaId + '">'
+ item.areaName + '</option>';
});
//将标簽集添加進area清單裡
$('#area-search').html(selectOptions);
}
});
}
//渲染出店鋪類别清單以及區域清單以供搜尋
getSearchDivData();
/**
* 擷取分頁展示的店鋪清單資訊
* @param pageSize
* @param pageIndex
* @returns
*/
function addItems(pageSize, pageIndex) {
// 拼接出查詢的URL，賦空值預設就去掉這個的限制，有值就代表按這個條件查詢
var url = listUrl + '?' + 'pageIndex=' + pageIndex + '&pageSize='
+ pageSize + '&parentId=' + parentId + '&areaId=' + areaId
+ '&shopCategoryId=' + shopCategoryId + '&shopName=' + shopName;
//設定加載符，若還在背景取資料則不能再次通路背景，避免多次重複加載
loading = true;
//通路背景擷取相應查詢條件下的店鋪清單
$.getJSON(url, function(data) {
if (data.success) {
//擷取目前查詢條件下店鋪的總數
maxItems = data.count;
var html = '';
//周遊店鋪清單，拼接出卡片集合
data.shopList.map(function(item, index) {
html += '' + '<div class="card" data-shop-id="'
+ item.shopId + '">' + '<div class="card-header">'
+ item.shopName + '</div>'
+ '<div class="card-content">'
+ '<div class="list-block media-list">' + '<ul>'
+ '<li class="item-content">'
+ '<div class="item-media">' + '<img src="'
+ item.shopImg + '" width="44">' + '</div>'
+ '<div class="item-inner">'
+ '<div class="item-subtitle">' + item.shopDesc
+ '</div>' + '</div>' + '</li>' + '</ul>'
+ '</div>' + '</div>' + '<div class="card-footer">'
+ '<p class="color-gray">'
+ new Date(item.lastEditTime).Format("yyyy-MM-dd")
+ '更新</p>' + '<span>點選檢視</span>' + '</div>'
+ '</div>';
});
//将卡片集合添加到目标HTML元件裡
$('.list-div').append(html);
//擷取目前為止已顯示的卡片總數，包含之前已經加載的
var total = $('.list-div .card').length;
//若總數達到跟按照此查詢條件列出來的總數一緻，則停止背景的加載
if (total >= maxItems) {
// // 加載完畢，則登出無限加載事件，以防不必要的加載
// $.detachInfiniteScroll($('.infinite-scroll'));
// // 删除加載提示符
// $('.infinite-scroll-preloader').remove();
// 隐藏加載提示符
$('.infinite-scroll-preloader').hide();
}else{
$('.infinite-scroll-preloader').show();
}
//否則頁碼加1，繼續load出新的店鋪
pageNum += 1;
//加載結束，可以再次加載了
loading = false;
//重新整理頁面，顯示新加載的店鋪
$.refreshScroller();
}
});
}
// 預先加載20條
addItems(pageSize, pageNum);
//下滑螢幕自動進行分頁搜尋
$(document).on('infinite', '.infinite-scroll-bottom', function() {
if (loading)
return;
addItems(pageSize, pageNum);
});
//點選店鋪的卡片進入該店鋪的詳情頁
$('.shop-list').on('click', '.card', function(e) {
var shopId = e.currentTarget.dataset.shopId;
window.location.href = '/o2o/frontend/shopdetail?shopId=' + shopId;
});
//選擇新的店鋪類别之後，重置頁碼，清空原先的店鋪清單，按照新的類别去查詢
$('#shoplist-search-div').on(
'click',
'.button',
function(e) {
if (parentId) {// 如果傳遞過來的是一個父類下的子類
shopCategoryId = e.target.dataset.categoryId;
//若之前已標明了别的category，則移除其標明效果，改成標明新的
if ($(e.target).hasClass('button-fill')) {
$(e.target).removeClass('button-fill');
shopCategoryId = '';
} else {
$(e.target).addClass('button-fill').siblings()
.removeClass('button-fill');
}
//由于查詢條件改變，清空店鋪清單再進行查詢
$('.list-div').empty();
//重置頁碼
pageNum = 1;
addItems(pageSize, pageNum);
} else {// 如果傳遞過來的父類為空，則按照父類查詢
parentId = e.target.dataset.categoryId;
if ($(e.target).hasClass('button-fill')) {
$(e.target).removeClass('button-fill');
parentId = '';
} else {
$(e.target).addClass('button-fill').siblings()
.removeClass('button-fill');
}
//由于查詢條件改變，清空店鋪清單再進行查詢
$('.list-div').empty();
//重置頁碼
pageNum = 1;
addItems(pageSize, pageNum);
parentId = '';
}
});
//需要查詢的店鋪名字發生變化後，重置頁碼，清空原先的店鋪清單，按照新的名字去查詢
$('#search').on('change', function(e) {
shopName = e.target.value;
$('.list-div').empty();
pageNum = 1;
addItems(pageSize, pageNum);
});
//區域資訊發生變化後，重置頁碼，清空原先的店鋪清單，按照新的區域去查詢
$('#area-search').on('change', function() {
areaId = $('#area-search').val();
$('.list-div').empty();
pageNum = 1;
addItems(pageSize, pageNum);
});
//點選後打開右側欄
$('#me').click(function() {
$.openPanel('#panel-left-demo');
});
//初始化頁面
$.init();
});
shoplist.css :
.infinite-scroll-preloader {
margin-top: -5px;
}
.shoplist-button-div {
margin: 0 .3rem;
}
.shoplist-button-div > .button {
width: 30%;
height: 1.5rem;
line-height: 1.5rem;
display: inline-block;
margin: 1%;
overflow: hidden;
}
.select-wrap {
margin: 0 .5rem;
}
.select {
border: 1px solid #0894ec;
color: #0894ec;
background-color: #efeff4;
width: 100%;
height: 1.5rem;
font-size: .7rem;
}
9-8 店鋪詳情頁的開發上
Controller層：
package com.doit.o2o.web.frontend;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.doit.o2o.dto.ProductExecution;
import com.doit.o2o.entity.Product;
import com.doit.o2o.entity.ProductCategory;
import com.doit.o2o.entity.Shop;
import com.doit.o2o.service.ProductCategoryService;
import com.doit.o2o.service.ProductService;
import com.doit.o2o.service.ShopService;
import com.doit.o2o.util.HttpServletRequestUtil;
@Controller
@RequestMapping("/frontend")
public class ShopDetailContoller {
@Autowired
private ShopService shopService;
@Autowired
private ProductCategoryService productCategoryService;
@Autowired
private ProductService productService;
/**
* 擷取店鋪資訊以及該店鋪下面的商品類别清單
* @param request
* @return
*/
@RequestMapping(value="/listshopdetailpageinfo",method=RequestMethod.GET)
@ResponseBody
private Map<String,Object> listShopDetailPageInfo(HttpServletRequest request){
Map<String, Object> modelMap = new HashMap<String, Object>();
long shopId = HttpServletRequestUtil.getLong(request, "shopId");
Shop shop = null;
List<ProductCategory> productCategoryList = null;
if (shopId != -1) {
//擷取店鋪Id為shopId的店鋪資訊
shop = shopService.getByShopId(shopId);
//擷取店鋪下面的商品類别清單
productCategoryList = productCategoryService.getProductCategoryList(shopId);
modelMap.put("shop", shop);
modelMap.put("productCategoryList", productCategoryList);
modelMap.put("success", true);
} else {
modelMap.put("success", false);
modelMap.put("errMsg", "empty shopId");
}
return modelMap;
}
/**
* 依據查詢條件分頁列出該店鋪下面的所有商品
* @param request
* @return
*/
@RequestMapping(value = "/listproductsbyshop", method = RequestMethod.GET)
@ResponseBody
private Map<String, Object> listProductsByShop(HttpServletRequest request) {
Map<String, Object> modelMap = new HashMap<String, Object>();
//擷取頁碼
int pageIndex = HttpServletRequestUtil.getInt(request, "pageIndex");
//擷取一頁需要顯示的條數
int pageSize = HttpServletRequestUtil.getInt(request, "pageSize");
//擷取店鋪Id
long shopId = HttpServletRequestUtil.getLong(request, "shopId");
//空值判斷
if ((pageIndex > -1) && (pageSize > -1) && (shopId > -1)) {
//嘗試擷取商品類别Id
long productCategoryId = HttpServletRequestUtil.getLong(request,
"productCategoryId");
//嘗試擷取模糊查找的商品名
String productName = HttpServletRequestUtil.getString(request,
"productName");
//組合查詢
Product productCondition = compactProductCondition4Search(shopId,
productCategoryId, productName);
//按照傳入的查詢條件以及分頁資訊傳回相應商品清單以及總數
ProductExecution pe = productService.getProductList(
productCondition, pageIndex, pageSize);
modelMap.put("productList", pe.getProductList());
modelMap.put("count", pe.getCount());
modelMap.put("success", true);
} else {
modelMap.put("success", false);
modelMap.put("errMsg", "empty pageSize or pageIndex or shopId");
}
return modelMap;
}
private Product compactProductCondition4Search(long shopId,
long productCategoryId, String productName) {
Product productCondition = new Product();
Shop shop = new Shop();
shop.setShopId(shopId);
productCondition.setShop(shop);
if (productCategoryId != -1L) {
ProductCategory productCategory = new ProductCategory();
productCategory.setProductCategoryId(productCategoryId);
productCondition.setProductCategory(productCategory);
}
if (productName != null) {
productCondition.setProductName(productName);
}
productCondition.setEnableStatus(1);
return productCondition;
}
}
9-9 店鋪詳情頁的開發下
shopdetail.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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="../resources/css/frontend/shopdetail/shopdetail.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="page-group">
<div class="page">
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left" external href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"
onClick="javascript :history.back(-1);" data-transition='slide-out'>
<span class="icon icon-left"></span> 傳回
</a>
<h1 class="title" id="shop-name">店鋪詳情</h1>
</header>
<nav class="bar bar-tab">
<a class="tab-item" href="/o2o/frontend/index" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" external> <span
class="icon icon-home"></span> <span class="tab-label">首頁</span>
</a> <a class="tab-item" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="me"> <span
class="icon icon-me"></span> <span class="tab-label">我</span>
</a>
</nav>
<div class="content infinite-scroll infinite-scroll-bottom"
data-distance="100">
<!-- 這裡是頁面内容區 -->
<div class="shop-detail-dev">
<div class="card">
<div valign="bottom"
class="card-header color-white no-border no-padding">
<img class='card-cover' id="shop-cover-pic" src="" alt="">
</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">
<span id="shop-update-time"></span>
</p>
<p id="shop-desc"></p>
</div>
</div>
<div class="card-footer">
<!-- <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="link">贊</a> -->
<!-- <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="link">更多</a> -->
</div>
</div>
</div>
<!-- 商品類别清單展示區 -->
<div class="shopdetail-button-div" id="shopdetail-button-div">
<!-- <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">所有貨物</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">吃的</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">喝的</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">Usual Button 1</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">Usual Button 1</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button">Usual Button 1</a> -->
</div>
<!-- 商品名字搜尋區 -->
<div class="detail-search">
<div class="searchbar">
<a class="searchbar-cancel">取消</a>
<div class="search-input">
<label class="icon icon-search" for="search"></label> <input
type="search" id='search' placeholder='輸入關鍵字...' />
</div>
</div>
</div>
<!-- 商品清單展示區 -->
<div class="list-div">
<!-- <div class="card">
<div class="card-header">傳統火鍋店</div>
<div class="card-content">
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media">
<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
</div>
<div class="item-inner">
<div class="item-subtitle"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="card-footer">
<span>2015/01/15</span>
<span>5 評論</span>
</div>
</div> -->
</div>
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
</div>
<!--側邊欄 -->
<div class="panel-overlay"></div>
<div class="panel panel-right panel-reveal" id="panel-left-demo">
<div class="content-block">
<p>
<a href="/o2o/frontend/myrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">消費記錄</a>
</p>
<p>
<a href="/o2o/frontend/mypoint" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">我的積分</a>
</p>
<p>
<a href="/o2o/frontend/pointrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">積分兌換記錄</a>
</p>
<!-- Click on link with "close-panel" class will close panel -->
</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/common/common.js' charset='utf-8'></script>
<script type='text/javascript'
src='../resources/js/frontend/shopdetail.js' charset='utf-8'></script>
</body>
</html>
shopdetail.js:
$(function() {
var loading = false;
//分頁允許傳回的最大條數，超過此數則禁止通路背景
var maxItems = 20;
//預設一頁傳回的商品數
var pageSize = 10;
//列出商品清單的URL
var listUrl = '/o2o/frontend/listproductsbyshop';
//預設的頁碼
var pageNum = 1;
//從位址欄裡擷取shopId
var shopId = getQueryString('shopId');
var productCategoryId = '';
var productName = '';
//擷取本店資訊以及商品類别資訊清單的URL
var searchDivUrl = '/o2o/frontend/listshopdetailpageinfo?shopId='
+ shopId;
function getSearchDivData() {
var url = searchDivUrl;
$
.getJSON(
url,
function(data) {
if (data.success) {
var shop = data.shop;
$('#shop-cover-pic').attr('src', shop.shopImg);
$('#shop-update-time').html(
new Date(shop.lastEditTime)
.Format("yyyy-MM-dd"));
$('#shop-name').html(shop.shopName);
$('#shop-desc').html(shop.shopDesc);
$('#shop-addr').html(shop.shopAddr);
$('#shop-phone').html(shop.phone);
//擷取背景傳回的該店鋪的商品清單
var productCategoryList = data.productCategoryList;
var html = '';
//周遊商品清單，生成可以點選搜尋相應商品類别下的商品的a标簽
productCategoryList
.map(function(item, index) {
html += '<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="button" data-product-search-id='
+ item.productCategoryId
+ '>'
+ item.productCategoryName
+ '</a>';
});
//将商品類别a标簽綁定到相應的HTML元件中
$('#shopdetail-button-div').html(html);
}
});
}
//渲染出店鋪基本資訊以及商品類别清單以供搜尋
getSearchDivData();
/**
* 擷取分頁展示的商品清單資訊
* @param pageSize
* @param pageIndex
* @returns
*/
function addItems(pageSize, pageIndex) {
// 拼接處查詢的URL，賦空值預設就去掉這個條件的限制
var url = listUrl + '?' + 'pageIndex=' + pageIndex + '&pageSize='
+ pageSize + '&productCategoryId=' + productCategoryId
+ '&productName=' + productName + '&shopId=' + shopId;
//設定加載符，若還在背景取資料則不能再次通路背景，避免多次重複加載
loading = true;
//通路背景擷取相應查詢條件下的商品清單
$.getJSON(url, function(data) {
if (data.success) {
//擷取目前查詢條件下的商品的總數
maxItems = data.count;
var html = '';
//周遊商品清單，拼接出卡片集合
data.productList.map(function(item, index) {
html += '' + '<div class="card" data-product-id='
+ item.productId + '>'
+ '<div class="card-header">' + item.productName
+ '</div>' + '<div class="card-content">'
+ '<div class="list-block media-list">' + '<ul>'
+ '<li class="item-content">'
+ '<div class="item-media">' + '<img src="'
+ item.imgAddr + '" width="44">' + '</div>'
+ '<div class="item-inner">'
+ '<div class="item-subtitle">' + item.productDesc
+ '</div>' + '</div>' + '</li>' + '</ul>'
+ '</div>' + '</div>' + '<div class="card-footer">'
+ '<p class="color-gray">'
+ new Date(item.lastEditTime).Format("yyyy-MM-dd")
+ '更新</p>' + '<span>點選檢視</span>' + '</div>'
+ '</div>';
});
//将卡片集合添加到目标HTML元件裡
$('.list-div').append(html);
//擷取目前為止已顯示的卡片總數，包含之前已經加載的
var total = $('.list-div .card').length;
if (total >= maxItems) {
// // 加載完畢，則登出無限加載事件，以防不必要的加載
// $.detachInfiniteScroll($('.infinite-scroll'));
// // 删除加載提示符
// $('.infinite-scroll-preloader').remove();
// 隐藏加載提示符
$('.infinite-scroll-preloader').hide();
}else{
$('.infinite-scroll-preloader').show();
}
//否則頁碼加1，繼續load出新的店鋪
pageNum += 1;
//加載結束，可以再次加載了
loading = false;
//重新整理頁面，顯示新加載的店鋪
$.refreshScroller();
}
});
}
//預先加載10條商品資訊
addItems(pageSize, pageNum);
//下滑螢幕自動進行分頁搜尋
$(document).on('infinite', '.infinite-scroll-bottom', function() {
if (loading)
return;
addItems(pageSize, pageNum);
});
//選擇新的商品類别之後，重置頁碼，清空原先的商品清單，按照新的類别去查詢
$('#shopdetail-button-div').on(
'click',
'.button',
function(e) {
//擷取商品類别Id
productCategoryId = e.target.dataset.productSearchId;
if (productCategoryId) {
//若之前已標明了别的category，則移除其標明效果，改成標明新的
if ($(e.target).hasClass('button-fill')) {
$(e.target).removeClass('button-fill');
productCategoryId = '';
} else {
$(e.target).addClass('button-fill').siblings()
.removeClass('button-fill');
}
$('.list-div').empty();
pageNum = 1;
addItems(pageSize, pageNum);
}
});
//點選商品的卡片進入該商品的詳情頁
$('.list-div')
.on(
'click',
'.card',
function(e) {
var productId = e.currentTarget.dataset.productId;
window.location.href = '/o2o/frontend/productdetail?productId='
+ productId;
});
//需要查詢的商品名字發生變化後，重置頁碼，清空原先的商品清單，按照新的名字查詢
$('#search').on('change', function(e) {
productName = e.target.value;
$('.list-div').empty();
pageNum = 1;
addItems(pageSize, pageNum);
});
//點選後打開右側欄
$('#me').click(function() {
$.openPanel('#panel-left-demo');
});
$.init();
});
shopdetail.css:
.detail-search {
height: 2.2rem;
padding-right: .5rem;
padding-left: .5rem;
background-color: #f7f7f8;
}
.infinite-scroll-preloader {
margin-top: -5px;
}
.shopdetail-button-div {
margin: 0 .3rem;
}
.shopdetail-button-div > .button {
width: 30%;
height: 1.5rem;
line-height: 1.5rem;
display: inline-block;
margin: 1%;
overflow: hidden;
}
9-10 商品詳情頁的開發
Controller層:
package com.doit.o2o.web.frontend;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.doit.o2o.entity.Product;
import com.doit.o2o.service.ProductService;
import com.doit.o2o.util.HttpServletRequestUtil;
@Controller
@RequestMapping("/frontend")
public class ProductDetailController {
@Autowired
private ProductService productService;
@RequestMapping(value = "/listproductdetailpageinfo", method = RequestMethod.GET)
@ResponseBody
private Map<String, Object> listProductDetailPageInfo(
HttpServletRequest request) {
Map<String, Object> modelMap = new HashMap<String, Object>();
long productId = HttpServletRequestUtil.getLong(request, "productId");
Product product = null;
if (productId != -1) {
product = productService.getProductById(productId);
modelMap.put("product", product);
modelMap.put("success", true);
} else {
modelMap.put("success", false);
modelMap.put("errMsg", "empty productId");
}
return modelMap;
}
}
productdetail.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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<link rel="stylesheet"
href="../resources/css/frontend/productdetail/productdetail.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="page-group">
<div class="page">
<header class="bar bar-nav">
<a class="button button-link button-nav pull-left" external href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"
onClick="javascript :history.back(-1);" data-transition='slide-out'>
<span class="icon icon-left"></span> 傳回
</a>
<h1 class="title">商品詳情</h1>
</header>
<nav class="bar bar-tab">
<a class="tab-item" href="/o2o/frontend/index" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" external> <span
class="icon icon-home"></span> <span class="tab-label">首頁</span>
</a> <a class="tab-item" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="me"> <span
class="icon icon-me"></span> <span class="tab-label">我</span>
</a>
</nav>
<div class="content infinite-scroll infinite-scroll-bottom"
data-distance="100">
<!-- 這裡是頁面内容區 -->
<div class="shop-detail-dev">
<div class="card">
<div valign="bottom"
class="card-header color-white no-border no-padding">
<img id="product-img" class='card-cover' src="" alt="">
</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">
<span id="product-time">2015/01/15</span>
</p>
<p id="product-name"></p>
<p id="product-desc"></p>
</div>
</div>
<div class="card-footer" id="imgList">
<!-- <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="link">贊</a> -->
<!-- <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="link">更多</a> -->
</div>
</div>
</div>
<div class="list-div"></div>
</div>
</div>
<div class="panel-overlay"></div>
<div class="panel panel-right panel-reveal" id="panel-left-demo">
<div class="content-block">
<p>
<a href="/o2o/frontend/myrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">消費記錄</a>
</p>
<p>
<a href="/o2o/frontend/mypoint" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">我的積分</a>
</p>
<p>
<a href="/o2o/frontend/pointrecord" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="close-panel">積分兌換記錄</a>
</p>
<!-- Click on link with "close-panel" class will close panel -->
</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/common/common.js' charset='utf-8'></script>
<script type='text/javascript'
src='../resources/js/frontend/productdetail.js' charset='utf-8'></script>
</body>
</html>
productdetail.js:
$(function() {
var productId = getQueryString('productId');
var productUrl = '/o2o/frontend/listproductdetailpageinfo?productId='
+ productId;
$
.getJSON(
productUrl,
function(data) {
if (data.success) {
var product = data.product;
$('#product-img').attr('src', product.imgAddr);
$('#product-time').text(
new Date(product.lastEditTime)
.Format("yyyy-MM-dd"));
$('#product-name').text(product.productName);
$('#product-desc').text(product.productDesc);
var imgListHtml = '';
product.productImgList.map(function(item, index) {
imgListHtml += '<div> <img src="'
+ item.imgAddr + '"/></div>';
});
// // 生成購買商品的二維碼供商家掃描
// imgListHtml += '<div> <img src="/o2o/frontend/generateqrcode4product?productId='
// + product.productId + '"/></div>';
// $('#imgList').html(imgListHtml);
}
});
$('#me').click(function() {
$.openPanel('#panel-left-demo');
});
$.init();
});
productdetail.css:
.shopdetail-button-div {
margin: 0 .3rem;
}
.shopdetail-button-div > .button {
width: 30%;
height: 1.5rem;
line-height: 1.5rem;
display: inline-block;
margin: 1%;
overflow: hidden;
}
9-11 前端展示系統bug修複
略
9-12 前端展示系統開發總結
略
![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)