文章目录
实现电商首页轮播图serviceserviceImplcontroller前端核心代码
实现电商首页轮播图
service
package com
.beyond
.service
;
import com
.beyond
.pojo
.Carousel
;
import java
.util
.List
;
public interface CarouselService {
public List
<Carousel> queryAll(Integer isShow
);
}
serviceImpl
package com
.beyond
.service
.impl
;
import com
.beyond
.mapper
.CarouselMapper
;
import com
.beyond
.pojo
.Carousel
;
import com
.beyond
.service
.CarouselService
;
import org
.springframework
.beans
.factory
.annotation
.Autowired
;
import org
.springframework
.stereotype
.Service
;
import tk
.mybatis
.mapper
.entity
.Example
;
import java
.util
.List
;
@SuppressWarnings("ALL")
@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
;
}
}
controller
package com
.beyond
.controller
;
import com
.beyond
.enums
.YesOrNo
;
import com
.beyond
.pojo
.Carousel
;
import com
.beyond
.service
.CarouselService
;
import com
.beyond
.utils
.BEYONDJSONResult
;
import io
.swagger
.annotations
.Api
;
import io
.swagger
.annotations
.ApiOperation
;
import org
.slf4j
.Logger
;
import org
.slf4j
.LoggerFactory
;
import org
.springframework
.beans
.factory
.annotation
.Autowired
;
import org
.springframework
.web
.bind
.annotation
.GetMapping
;
import org
.springframework
.web
.bind
.annotation
.RequestMapping
;
import org
.springframework
.web
.bind
.annotation
.RestController
;
import springfox
.documentation
.annotations
.ApiIgnore
;
import java
.util
.List
;
@Api(value
= "首页",tags
= {"首页展示的相关接口"})
@RestController
@RequestMapping("index")
public class IndexController {
@Autowired
private CarouselService carouselService
;
@ApiOperation(value
= "获取首页轮播图列表",notes
= "获取首页轮播图列表",httpMethod
= "GET")
@GetMapping("/carousel")
public BEYONDJSONResult
carousel(){
List
<Carousel> list
= carouselService
.queryAll(YesOrNo
.YES
.type
);
return BEYONDJSONResult
.ok(list
);
}
}
前端核心代码
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);
}
});
},
