java后端介绍ppt_幻灯片数据展示

一 后端

1 web层

@CrossOrigin // 解决跨域问题

@Api(description = "广告推荐")

@RestController

@RequestMapping("/api/cms/ad")

@Slf4j

public class ApiAdController {

@Autowired

private AdService adService;

@Autowired

private RedisTemplate redisTemplate;

@ApiOperation("根据推荐位id显示广告推荐")

@GetMapping("list/{adTypeId}")

public R listByAdTypeId(@ApiParam(value = "推荐位id", required = true) @PathVariable String adTypeId) {

List adList = adService.selectByAdTypeId(adTypeId);

return R.ok().data("items", adList);

}

}

2 service层

接口：

/**

* @className: AdService

* @description: 根据推荐位id显示广告推荐

* @date: 2020/12/20

* @author: cakin

*/

List selectByAdTypeId(String adTypeId);

实现：

@Cacheable(value = "index", key = "'selectByAdTypeId'")

@Override

public List selectByAdTypeId(String adTypeId) {

QueryWrapper queryWrapper = new QueryWrapper<>();

queryWrapper.orderByAsc("sort", "id");

queryWrapper.eq("type_id", adTypeId);

return baseMapper.selectList(queryWrapper);

}

二 前端

1 api

import request from '~/utils/request'

export default {

getTopBannerAdList() {

return request({

baseURL: 'http://localhost:8140',

url: '/api/cms/ad/list/1',

method: 'get'

})

}

}

2 主页banner

引入api

import indexApi from '~/api/index'

服务端渲染

async asyncData() {

// 获取首页banner数据

const topBannerAdListResponse = await indexApi.getTopBannerAdList()

const topBannerAdList = topBannerAdListResponse.data.items

return {

topBannerAdList

}

},

页面模板

v-for="topBannerAd in topBannerAdList"

:key="topBannerAd.id"

:style="'background:' + topBannerAd.color"

class="swiper-slide">

三 演示