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

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

数据库表的设计。

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

迷路人~

发布了55 篇原创文章 · 获赞 5 · 访问量 6067

私信关注

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

猜你喜欢