幻灯片数据展示

最新推荐文章于 2022-05-16 17:13:11 发布

chengqiuming

最新推荐文章于 2022-05-16 17:13:11 发布

阅读量225

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/chengqiuming/article/details/111462924

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一后端

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>
    <!-- 幻灯片 结束 -->