概述

实战SSM_O2O商铺_41【前端展示】店铺列表页面Dao+Service+Controller层的实现后端的功能实现后，来看下前端在展示层吧

代码结构

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/frontend/shoplist/shoplist.css">
</head>
<body><div class="page-group"><div class="page"><header class="bar bar-nav"><a class="button button-link button-nav pull-left" externalhref="index" data-transition='slide-out'> <spanclass="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> <inputtype="search" id='search' placeholder='输入关键字...' /></div></div></div><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="shoplist-button-div" id="shoplist-search-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="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" 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><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>

shoplist.js

$(function() {var loading = false;// 分页允许返回的最大条数，超过此数值，禁止访问后台var maxItems = 999;// 一页返回的最大条数var pageSize = 3;var listUrl = '/o2o/frontend/listshops';var searchDivUrl = '/o2o/frontend/listshopspageinfo';// 页码var pageNum = 1;var parentId = getQueryString('parentId');var areaId = '';var shopCategoryId = '';var shopName = '';// 加载店铺列表以及区域列表 getSearchDivData();// 预先加载pageSize *pageNum 条addItems(pageSize, pageNum);function getSearchDivData() {var url = searchDivUrl + '?' + 'parentId=' + parentId;$.getJSON(url,function(data) {if (data.success) {var shopCategoryList = data.shopCategoryList;var html = '';html += '<a href="#" class="button" data-category-id=""> 全部类别  </a>';shopCategoryList.map(function(item, index) {html += '<a href="#" class="button" data-category-id='+ item.shopCategoryId+ '>'+ item.shopCategoryName+ '</a>';});$('#shoplist-search-div').html(html);var selectOptions = '<option value="">全部街道</option>';var areaList = data.areaList;areaList.map(function(item, index) {selectOptions += '<option value="'+ item.areaId + '">'+ item.areaName + '</option>';});$('#area-search').html(selectOptions);}});}function addItems(pageSize, pageIndex) {// 生成新条目的HTMLvar 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>';});$('.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);});$('.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;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;
}

common.js添加解析日期的公共方法


Date.prototype.Format = function(fmt) {var o = {"M+" : this.getMonth() + 1, // 月份"d+" : this.getDate(), // 日"h+" : this.getHours(), // 小时"m+" : this.getMinutes(), // 分"s+" : this.getSeconds(), // 秒"q+" : Math.floor((this.getMonth() + 3) / 3), // 季度"S" : this.getMilliseconds()// 毫秒};if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for ( var k in o)if (new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]): (("00" + o[k]).substr(("" + o[k]).length)));return fmt;
}

FrontEndController添加路由

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

联调测试

效果图如下

Github地址

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

实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现相关推荐

实战SSM_O2O商铺_41【前端展示】店铺列表页面Dao+Service+Controller层的实现
文章目录概述 Dao层接口映射文件单元测试 Service层接口方法单元测试 Controller层增加 ShopListController 单元测试 Github地址概述在完成了 ...
实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现
文章目录概述 Dao层 Service层 Controller层 View层 shopdetail.html shopdetail.js shopdetail.css 联调商品详情待开发 Gith ...
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录概述 index.html index.js index.css Controller 调测修复问题头条图片展示修复一级类别商铺图片展示修复 Github地址概述在完成了后端实战 ...
实战SSM_O2O商铺_23【商铺列表】Controller层开发
文章目录概述 ShopController 单元测试 Github地址概述按照页面原型控制层有2个功能要开发获取商铺列表然后根据连接对某个单一的商铺进行操作(管理页面主要是对session ...
实战SSM_O2O商铺_37【商品】商品列表之View层的实现
文章目录概述 productmanagement.html productmanage.css productmanage.js 联调 Github地址概述在完成了后端的逻辑后,我们来实现商品列 ...
实战SSM_O2O商铺_26【商品类别】批量新增商品类别从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口 ProductCategoryDao SQL映射文件单元测试 Service层 ProductCategoryExecution ...
实战SSM_O2O商铺_13【商铺注册】View层之初始化页面数据
文章目录请求过程分析 DAO层的实现 AreaDao接口,Mapper映射文件及单元测试 ShopCategoryDao接口 ShopCategoryDao.xml Mapper映射文件单元测试 ...
实战SSM_O2O商铺_34【商品】商品编辑之Controller层的实现
文章目录概述 ProductController 单元测试 Github地址概述在完成了实战SSM_O2O商铺_33[商品]商品编辑之Service层的实现之后,我们继续来实现Controll ...
实战SSM_O2O商铺_28【商品】商品添加之Dao层的实现
文章目录概述重温实体类 Prouct ProductImg ProductDao接口 Mapper配置文件 ProductImgDao接口 Mapper配置文件单元测试 #ProductDaoT ...

实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现

文章目录

概述

代码结构

shoplist.html

shoplist.js

shoplist.css

common.js添加解析日期的公共方法

FrontEndController添加路由

联调测试

Github地址

实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现相关推荐

最新文章

热门文章