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

 

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

数据库表的设计。

 

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="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.效果：额，到这里就变形了，总之，就是 图片之外的空白有颜色覆盖