幻燈片數據展示

一 後端

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<Ad> adList = adService.selectByAdTypeId(adTypeId);
        return R.ok().data("items", adList);
    }
}

2 service層

接口：

/**
* @className: AdService
* @description: 根據推薦位id顯示廣告推薦
* @date: 2020/12/20
* @author: cakin
*/
List<Ad> selectByAdTypeId(String adTypeId);

實現：

@Cacheable(value = "index", key = "'selectByAdTypeId'")
@Override
public List<Ad> selectByAdTypeId(String adTypeId) {
    QueryWrapper<Ad> 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
    }
},

頁面模板

    <!-- 幻燈片 開始 -->
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div
          v-for="topBannerAd in topBannerAdList"
          :key="topBannerAd.id"
          :style="'background:' + topBannerAd.color"
          class="swiper-slide">
          <a :href="topBannerAd.linkUrl" target="_blank">
            <img :src="topBannerAd.imageUrl" :alt="topBannerAd.title">
          </a>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-white"/>
      <div slot="button-prev" class="swiper-button-prev swiper-button-white"/>
      <div slot="button-next" class="swiper-button-next swiper-button-white"/>
    </div>
    <!-- 幻燈片 結束 -->

三 演示