首页面banner页面数据显示

1、安装axios插件

（1）使用 npm install axios

2、封装axios

（1）在项目中创建文件夹utils，request.js文件

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:9001', // nginx地址
  timeout: 20000 // 请求超时时间
})
export default service

3、在项目中创建文件夹api，创建banner.js

import request from '@/utils/request'

export default {

  //查询所有banner信息
  getAllBanner(){
    return request({
      url: `/cmsservice/bannerapi/getAllBanner`,
      method: 'get'
    })
  }

}

4、nginx配置

5、页面调用

（1）在pages/index.vue页面引入banner.js

import banner from "@/api/banner"

(2)在data()定义对象

bannerList:[],

（3）调用接口进行复制

created () {
    this.getBannerList()
  },
  methods: {
    //查询banner
    getBannerList(){
      banner.getAllBanner()
      .then(response=>{
        console.log(response)
        this.bannerList = response.data.data.list
      })

    }
  }

（4）修改页面元素

<!-- 幻灯片 开始 -->
    <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">

        <div v-for="banner in bannerList" :key="banner.id"
        class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img :src="banner.imageUrl" :alt="banner.title">
          </a>
        </div>
        
      </div>
      <div class="swiper-pagination swiper-pagination-white"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
    </div>
    <!-- 幻灯片 结束 -->

6、测试