文章目录

概述
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"><!-- <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="#"> <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 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() {// 定义访问后台获取头条列表以及一级商铺类别列表的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中增加如下信息

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

重新部署工程，先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

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

实战SSM_O2O商铺_39【前端展示】首页轮播图和一级商铺Dao+Service+Controller层的实现
文章目录概述 HeadLine Dao层接口映射文件单元测试 HeadLine Service层接口实现类单元测试 ShopCategory Dao层完善映射文件完善单元测试 Con ...
微服务项目实战技术点汇总：“尚硅谷的谷粒在线教育”七、redis数据库缓存页面数据、使用NUXT框架搭建前台系统环境、前台系统页面、首页轮播图（banner数据显示）、首页热门课程，名师推荐
文章目录一.NUXT前台环境搭建 1.如何学习NUXT 2.下载安装使用NUXT入门模板starter-template 3.机制二.编写静态页面 1.设置布局(首尾固定,中间用nuxt引用组件) ...
（转）淘淘商城系列——首页轮播图展示
http://blog.csdn.net/yerenyuan_pku/article/details/72848306 上文我们一起学习了内容管理,由于时间太紧了,好多功能都没实现,在此对读者说声抱歉 ...
六十六、实现Vue项目首页轮播图（vue-awesome-swiper）
2020/10/23. 周五.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/22 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
基于Redis优化首页轮播图查询
@ApiOperation(value = "获取首页轮播图列表", notes = "获取首页轮播图列表", httpMethod = "GET&q ...
UI-网站首页轮播图、易拉宝、发布在微信公众号的宣传海报的图片设计信息
UI交互设计一."新建" 常见的颜色模式: 颜色模式,是将某种颜色表现为数字形式的模型,或者说是一种记录图像颜色的方式.分为:RGB模式.CMYK模式.HSB模式.Lab颜色模式 ...
后台实现电商首页轮播图功能
这后端实现轮播图要做的功能:将能够展示的轮播图从数据库中查询出来,返回给前端,就就这么一点功能,但是主要是数据库表的设计. 1.:轮播图的表结构: 1.1 :关于背景色:也可以不用,主要看你的轮播 ...
2.学城项目头部底部组件首页轮播图
1. 下载框架/组件/库 * 1. 下载项目中需要使用的框架个组件. 1. axion 网络请求的第三方框架 (之前测试前后端通信已经安装过了) cnpm install axios -S 2. vu ...

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