后台实现电商首页轮播图功能

这后端实现轮播图要做的功能：将能够展示的轮播图从数据库中查询出来，返回给前端，就就这么一点功能，但是主要是

数据库表的设计。

1.；轮播图的表结构：

1.1 ：关于背景色：也可以不用，主要看你的轮播图占多大空间，如果是下图那样占全部空间，因为图片不可能将其全部占据，如果不用背景色，那么，轮播图片的两旁就是白色，会很难看。所以看自己

1.2 商品id：有时候，需要客户点击轮播图，直接跳转到商品详情页面，所以商品id 是线索

1.3 商品分类id：有时，点击后，会跳转到某一分类下，不是具体的商品详情页面

1.4 轮播图类型（type）：用于判断，可以根据商品id或者分类进行页面跳转，1：商品 2：分类

数据结构分析就到这。

==========================================================================================

2. 代码：

@Transactional(propagation = Propagation.SUPPORTS)
@Override
public List<Carousel> queryAll(Integer isShow) {Example example=new Example(Carousel.class);//根据 sort的大小 进行 倒序example.orderBy("sort").desc();Example.Criteria criteria=example.createCriteria();criteria.andEqualTo("isShow",isShow);List<Carousel> result =carouselMapper.selectByExample(example);return result;
}

=============================================================

3.看看前端代码：（仅供参考）

renderCarousel() {
                   var serverUrl = app.serverUrl;
                   // 获得轮播图
                   axios.get(
                           serverUrl + '/index/carousel', {})
                       .then(res => {
                           if (res.data.status == 200) {
                               var carouselList = res.data.data
                               this.carouselList = carouselList;

// 循环渲染轮播图
var $slider = $('#demo-slider-0');
for (var i = 0; i < carouselList.length; i++) {

var type = carouselList[i].type;
                                   var catId = carouselList[i].catId;
                                   var itemId = carouselList[i].itemId;
                                   var catOrItemId = "";

if (type == 1) {
                                       catOrItemId = itemId;
                                   }
                                   if (type == 2) {
                                       catOrItemId = catId;
                                   }

                                   catOrItemId = encodeURI(catOrItemId);

var cal = '<li class="" style="background: ' + carouselList[i].backgroundColor +
                                       ';">' +
                                       '<a href=javascript:showPage(' + type + ',\"'+catOrItemId+'\");><img src="' + carouselList[i].imageUrl + '" /></a>' +
                                       +'</li>';
                                   $slider.flexslider('addSlide', cal);
                               }
                               // <li class="banner4"><a><img src="data:images/ad4.jpg" /></a></li>

// console.log($slider.flexslider('count'));
$slider.flexslider('removeSlide', 0);

// var img1 = '<li><img src="http://122.152.205.72:88/group1/M00/00/02/CpoxxFvJanCAMgx0AAU6szwbghI657.png" />';
                               // $slider.flexslider('addSlide', img1);
                           }
                       });
               },

==================================================================

4.效果：额，到这里就变形了，总之，就是图片之外的空白有颜色覆盖

后台实现电商首页轮播图功能相关推荐

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

后台实现电商首页轮播图功能

后台实现电商首页轮播图功能相关推荐

最新文章

热门文章