實戰SSM_O2O商鋪_40【前端展示】首頁輪播圖和一級商鋪View層的實現
阿新 • • 發佈：2019-01-24
概述
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" index.js
$(function() {
// 定義訪問後臺獲取頭條列表以及一級商鋪類別列表的URL
var 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,
// 使用者對輪播圖進行操作時，是否自動停止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>';
});
$('.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%;
}路由類
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";
}
}
調測
修復問題
頁面雛形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中增加如下資訊
<Context docBase="D:/o2o/image/upload" path="/upload"/>
重新部署工程，先remove，然後在釋出
頭條資訊展示正常。
一級類別商鋪圖片展示修復
同上，這裡省略步驟
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);
