概述

店铺列表页面完成后，接下来完成点击某个店铺进入店铺详情页面

展示店铺信息
展示商品目录信息
展示商品信息

Dao层

复用之前的代码即可

Service层

复用之前的代码即可

Controller层

package com.artisan.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.artisan.o2o.dto.ProductExecution;
import com.artisan.o2o.entity.Product;
import com.artisan.o2o.entity.ProductCategory;
import com.artisan.o2o.entity.Shop;
import com.artisan.o2o.service.ProductCategoryService;
import com.artisan.o2o.service.ProductService;
import com.artisan.o2o.service.ShopService;
import com.artisan.o2o.util.HttpServletRequestUtil;@Controller
@RequestMapping("/frontend")
public class ShopDetailController {@Autowiredprivate ShopService shopService;@Autowiredprivate ProductService productService;@Autowiredprivate ProductCategoryService productCategoryService;@RequestMapping(value = "/listshopdetailpageinfo", method = RequestMethod.GET)@ResponseBodyprivate 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) {shop = shopService.getShopById(shopId);productCategoryList = productCategoryService.queryProductCategoryList(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;}@RequestMapping(value = "/listproductsbyshop", method = RequestMethod.GET)@ResponseBodyprivate 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");long shopId = HttpServletRequestUtil.getLong(request, "shopId");if ((pageIndex > -1) && (pageSize > -1) && (shopId > -1)) {long productCategoryId = HttpServletRequestUtil.getLong(request,"productCategoryId");String productName = HttpServletRequestUtil.getString(request,"productName");Product productCondition = compactProductCondition4Search(shopId,productCategoryId, productName);ProductExecution pe = productService.queryProductionList(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;}
}

View层

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="/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/frontend/shopdetail/shopdetail.css">
</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="#"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" external> <spanclass="icon icon-home"></span> <span class="tab-label">首页</span></a> <a class="tab-item" href="#" id="me"> <spanclass="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="#" class="link">赞</a> --><!-- <a href="#" class="link">更多</a> --><span id="shop-addr"></span><span id="shop-phone"></span></div></div></div><div class="shopdetail-button-div" id="shopdetail-button-div"><!-- <a href="#" class="button">所有货物</a><a href="#" class="button">吃的</a><a href="#" class="button">喝的</a><a href="#" class="button">Usual Button 1</a><a href="#" class="button">Usual Button 1</a><a href="#" 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> <inputtype="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" class="close-panel">消费记录</a></p><p><a href="/o2o/frontend/mypoint" class="close-panel">我的积分</a></p><p><a href="/o2o/frontend/pointrecord" 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;var listUrl = '/o2o/frontend/listproductsbyshop';var pageNum = 1;var shopId = getQueryString('shopId');var productCategoryId = '';var productName = '';var searchDivUrl = '/o2o/frontend/listshopdetailpageinfo?shopId=' + shopId;getSearchDivData();addItems(pageSize, pageNum);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 = '';productCategoryList.map(function(item, index) {html += '<a href="#" class="button" data-product-search-id='+ item.productCategoryId+ '>'+ item.productCategoryName+ '</a>';});$('#shopdetail-button-div').html(html);}});}function addItems(pageSize, pageIndex) {// 生成新条目的HTMLvar 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>';});$('.list-div').append(html);var total = $('.list-div .card').length;if (total >= maxItems) {// 隐藏加载提示符$('.infinite-scroll-preloader').hide();}else{$('.infinite-scroll-preloader').show();}pageNum += 1;loading = false;$.refreshScroller();}});}$(document).on('infinite', '.infinite-scroll-bottom', function() {if (loading)return;addItems(pageSize, pageNum);});$('#shopdetail-button-div').on('click','.button',function(e) {productCategoryId = e.target.dataset.productSearchId;if (productCategoryId) {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;
}

#FrontEndController添加路由

@RequestMapping(value = "/shopdetail", method = RequestMethod.GET)public String shopDetail() {return "frontend/shopdetail";}

联调

商品详情待开发

TODO

Github地址

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

实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现相关推荐

实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现
文章目录概述代码结构 shoplist.html shoplist.js shoplist.css common.js添加解析日期的公共方法 FrontEndController添加路由联调测试 ...
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录概述 index.html index.js index.css Controller 调测修复问题头条图片展示修复一级类别商铺图片展示修复 Github地址概述在完成了后端实战 ...
实战SSM_O2O商铺_34【商品】商品编辑之Controller层的实现
文章目录概述 ProductController 单元测试 Github地址概述在完成了实战SSM_O2O商铺_33[商品]商品编辑之Service层的实现之后,我们继续来实现Controll ...
实战SSM_O2O商铺_28【商品】商品添加之Dao层的实现
文章目录概述重温实体类 Prouct ProductImg ProductDao接口 Mapper配置文件 ProductImgDao接口 Mapper配置文件单元测试 #ProductDaoT ...
实战SSM_O2O商铺_26【商品类别】批量新增商品类别从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口 ProductCategoryDao SQL映射文件单元测试 Service层 ProductCategoryExecution ...
实战SSM_O2O商铺_13【商铺注册】View层之初始化页面数据
文章目录请求过程分析 DAO层的实现 AreaDao接口,Mapper映射文件及单元测试 ShopCategoryDao接口 ShopCategoryDao.xml Mapper映射文件单元测试 ...
实战SSM_O2O商铺_32【商品】商品编辑之Dao层的实现
文章目录概述 Dao层接口 ProductDao#selectProductById ProductDao#updateProduct ProductImgDao#deleteProductImgB ...
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
文章目录概述 productoperation.html productoperation.js 联调检查结果库表数据: 磁盘上的图片 Github地址概述在完成了实战SSM_O2O商铺_ ...
实战SSM_O2O商铺_15【商铺注册】View层+Controller层之图片上传
文章目录概述 Maven依赖文件上传解析器bean的配置页面 shopoperation.html增加上传组件 shopoperation.js Controller层 Github地址概述 ...

实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现

文章目录

概述

Dao层

Service层

Controller层

View层

shopdetail.html

shopdetail.js

shopdetail.css

联调

商品详情待开发

Github地址

实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现相关推荐

最新文章

热门文章