电商首页轮播图实现(后端)

1.轮播图为什么要设计background_color和item_id呢？
设计background_color为了防止轮播图片长度不够，两边出现白色边缘。
设计item_id当用户点击轮播图片可以把相应的item_id的传入处理跳转到详情页面。
2.CarouselService

public interface CarouselService {
    /**
     * 查询所有轮播图
     * @param isShow
     * @return
     */
    public List<Carousel> queryAll(Integer isShow);
}

3.CarouselServiceImpl

@Service
public class CarouselServiceImpl implements  CarouselService{
    @Autowired
    private CarouselMapper carouselMapper;
    @Override
    public List<Carousel> queryAll(Integer isShow) {
        Example example = new Example(Carousel.class);
        example.orderBy("sort").desc();
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("isShow",isShow);
        List<Carousel> result = carouselMapper.selectByExample(example);
        return result;
    }
}

4.IndexController

@Api(value = "首页",tags = "首页展示的相关接口")
@RestController
@RequestMapping("index")
public class IndexController {
    @Autowired
    private CarouselService carouselService;
    @ApiOperation(value = "获取首页轮播图",notes = "获取首页轮播图",httpMethod = "GET")
    @GetMapping("/carousel")
    public JSONResult carousel(){
        List<Carousel> list = carouselService.queryAll(YesOrNo.Yes.type);
        return JSONResult.ok(list);
    }
}

4.前段展示(部分关键代码)

<div class="banner" style="top: 213px;">
	<!--轮播 -->
	<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
		<ul class="am-slides">
			<li class="banner1"><a></a></li>
		</ul>
	</div>
	<div class="clear"></div>
</div>

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);
							}
						});
				},
				// 渲染轮播图
				this.renderCarousel();