幻灯片数据展示

痛定思痛。 2021-07-24 14:54 505阅读 0赞

# 一 后端 #

## 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>

# 三 演示 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/8b21b6f0b146422bbacc961871519a5d.png