* 概述 <https://blog.csdn.net/yangshangwei/article/details/81210315#概述>
* index.html
<https://blog.csdn.net/yangshangwei/article/details/81210315#indexhtml>
* index.js
<https://blog.csdn.net/yangshangwei/article/details/81210315#indexjs>
* index.css
<https://blog.csdn.net/yangshangwei/article/details/81210315#indexcss>
* 路由类 <https://blog.csdn.net/yangshangwei/article/details/81210315#路由类>
* 调测 <https://blog.csdn.net/yangshangwei/article/details/81210315#调测>
* 修复问题 <https://blog.csdn.net/yangshangwei/article/details/81210315#修复问题>
* 头条图片展示修复
<https://blog.csdn.net/yangshangwei/article/details/81210315#头条图片展示修复>
* 一级类别商铺图片展示修复
<https://blog.csdn.net/yangshangwei/article/details/81210315#一级类别商铺图片展示修复>
* Github地址
<https://blog.csdn.net/yangshangwei/article/details/81210315#github地址>


概述

在完成了后端 实战SSM_O2O商铺_39【前端展示】首页轮播图和一级商铺Dao+Service+Controller层的开发
<https://blog.csdn.net/yangshangwei/article/details/81125648>
的开发之后,我们来实现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"> <!--
<a class="button button-link button-nav pull-left" href="/demos/card"
data-transition='slide-out'> <span class="icon icon-left"></span> 返回 </a> --> <
h1 class="title">O2O</h1> </header> <nav class="bar bar-tab"> <a class=
"tab-item active" href="#"> <span class="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
class="swiper-slide img-wrap"> <img class="banner-img"
src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
alt=""> </div> <div class="swiper-slide img-wrap"> <img class="banner-img"
src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
alt=""> </div> <div class="swiper-slide img-wrap"> <img class="banner-img"
src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
alt=""> </div> --> </div> <div class="swiper-pagination"></div> </div> <div
class='total-shop-button'> <a href="/o2o/frontend/shoplist" external>全部商店</a> </
div> <div class="row"> <!-- <div class="col-50 shop-classify"> <div
class='word'> <p class='shop-title'>本期推荐</p> <p
class='shop-desc'>近期相关活动、新款上市、旅游资讯</p> </div> <div
class='shop-classify-img-warp'> <img class='shop-img'
src="static/index/display13.png"> </div> </div> --> </div> </div> </div>
<!--侧边栏 TODO --> <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/frontend/index.js' charset='utf-8'></script> </body> </html>
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.5
rem; background-color: #0894ec; } .shop-classify { height: 3.3rem; padding: 0.2
rem; 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"; } }
调测

启动tomcat,根据路由规则,访问 http://localhost:8080/o2o/frontend/index
<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中增加如下信息


<Context docBase="D:/o2o/image/upload" path="/upload"/>


重新部署工程,先remove,然后在发布


启动tomcat,重新访问 http://localhost:8080/o2o/frontend/index
<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 <https://github.com/yangshangwei/o2o>