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

HTML

实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现

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

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

文章目錄

概述
index.html
index.js
index.css
Controller
調測
修復問題
- 頭條圖片展示修復
- 一級類別商鋪圖片展示修復
Github地址

概述

在完成了后端實戰SSM_O2O商鋪_39【前端展示】首頁輪播圖和一級商鋪Dao+Service+Controller層的開發的開發之后，我們來實現View層的部分

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="/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/index/index.css"> </head> <body><div class="page-group"><div class="page"><header class="bar bar-nav"><h1 class="title">O2O</h1></header><nav class="bar bar-tab"><a class="tab-item active" href="#"> <spanclass="icon icon-home"></span> <span class="tab-label">首頁</span></a> <a class="tab-item" href="#" 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><div class="swiper-pagination"></div></div><div class='total-shop-button'><a href="/o2o/frontend/shoplist" external>全部商店</a></div><div class="row"></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></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() {// 定義訪問后臺獲取頭條列表以及一級商鋪類別列表的URLvar url = '/o2o/frontend/listmainpage';// 訪問后臺獲取頭條列表以及一級商鋪類別$.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">'+ '<img class="banner-img" src="'+ item.lineImg +'" alt="'+ item.lineName +'">'+ '</div>';});// 將輪播圖組賦值給前端HTML空間$('.swiper-wrapper').html(swiperHtml);// 設置輪播圖輪換時間為1秒$(".swiper-container").swiper({autoplay: 1000,// 用戶對輪播圖進行操作時，是否自動停止autoplayautoplayDisableOnInteraction: 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>';});$('.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%; }

Controller

package com.artisan.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)public String index(){return "frontend/index";} }

調測

啟動tomcat，根據路由規則，訪問 http://localhost:8080/o2o/frontend/index

修復問題

頁面雛形OK，從后臺獲取的數據也基本沒有問題，但是圖片沒有顯示，原因有2個

圖片地址不對
前端解析映射的圖片有問題

逐條來分析原因

我們先看下庫表中的數據，涉及到的表

頭條信息 tb_head_line，
商鋪類別 tb_shop_category

select * from tb_shop_category a where a.parent_id is null ;

select * from tb_head_line a where a.enable_status = 1;

模擬數據，我們先將數據修復為正確的數據。因為我們還沒有做頭條信息和商鋪類別的管理頁面，我們這里先按照設計插入符合預期的數據信息。

頭條圖片展示修復

更新后的數據如下

確保在本地磁盤上有這些對應名稱的頭條信息

腳本如下

INSERT INTO `tb_head_line` VALUES (6, '購物', 'xxx', '\\upload\\item\\headtitle\\2018072520315746624.jpg', 99, 1, NULL, NULL); INSERT INTO `tb_head_line` VALUES (2, '家具', 'x', '\\upload\\item\\headtitle\\2018072520371786788.jpg', 98, 1, NULL, NULL); INSERT INTO `tb_head_line` VALUES (3, '健身', 'xx', '\\upload\\item\\headtitle\\2018072520393452772.jpg', 97, 1, NULL, NULL); INSERT INTO `tb_head_line` VALUES (4, '美容', 'aa', '\\upload\\item\\headtitle\\2018072520400198256.jpg', 96, 1, NULL, NULL); commit;

配置映射路徑

tomcat的server.xml中增加如下信息

重新部署工程，先remove，然后在發布

啟動tomcat，重新訪問 http://localhost:8080/o2o/frontend/index

頭條信息展示正常。

一級類別商鋪圖片展示修復

同上，這里省略步驟

INSERT INTO `tb_shop_category` VALUES (1, '二手市場', '二手市場專區', '\\upload\\item\\shopcategory\\2018071523272255687.png', 9, '2018-7-27 16:32:50', '2018-7-27 16:32:50', NULL); INSERT INTO `tb_shop_category` VALUES (2, '美容美發', '美容美發專區', '\\upload\\item\\shopcategory\\2018071523273314635.png', 8, '2018-7-27 16:32:50', '2018-7-27 16:32:50', NULL); INSERT INTO `tb_shop_category` VALUES (3, '美食飲品', '美食飲品專區', '\\upload\\item\\shopcategory\\2018071523274213433.png', 7, '2018-7-27 16:32:50', '2018-7-27 16:32:50', NULL); INSERT INTO `tb_shop_category` VALUES (4, '休閑娛樂', '休閑娛樂專區', '\\upload\\item\\shopcategory\\2018071523275121460.png', 6, '2018-7-27 16:32:50', '2018-7-27 16:32:50', NULL); INSERT INTO `tb_shop_category` VALUES (5, '培訓教育', '培訓教育專區', '\\upload\\item\\shopcategory\\2018071523280082147.png', 5, '2018-7-27 16:32:50', '2018-7-27 16:32:50', NULL); INSERT INTO `tb_shop_category` VALUES (6, '租賃市場', '租賃市場專區', '\\upload\\item\\shopcategory\\2018071523281361578.png', 4, '2018-7-27 16:32:50', '2018-7-27 16:32:50', NULL);

Github地址

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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：实战SSM_O2O商铺_39【前端展示】
下一篇：实战SSM_O2O商铺_41【前端展示】