當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/21 HTML 47 豆豆

生活随笔收集整理的這篇文章主要介紹了实战SSM_O2O商铺_42【前端展示】店铺列表页面View层的实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

概述
代碼結構
shoplist.html
shoplist.js
shoplist.css
common.js添加解析日期的公共方法
FrontEndController添加路由
聯調測試
Github地址

概述

實戰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"></div><div class="select-wrap"><select class="select" id="area-search"></select></div><div class="list-div shop-list"></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></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层的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： JVM-12虚拟机性能监控与故障处理工具
下一篇：实战SSM_O2O商铺_43【前端展示】