开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：首页数据显示-banner 显示（前端）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11432
首页数据显示-banner 显示（前端）
内容简介
一、前端页面准备工作
二、首页 banner 数据显示
一、前端页面准备工作
1、使用命令，下载 axios 依赖
Npm install axios
下载之后才可以使用组件
//创建 axios 实例
const service=axios, create({
baseURL:process. env.BASE_API,//api的base _ url
timeout:5000//请求起时时间
}
//request 拦截器
service, interceptors , request, use(
config=>{
if(store, getters, token){config，headers[°X-Token']=getToken()
//让每个请求携带自定义 token 请根据实际情况自言}
return config
2、封装 axios
Import axios form axios 引入 axios 组件
//创建 axios 实例
const service=axios, create({
baseURL:process. env.BASE_API //api的base _ url
timeout:2000//请求超时时间
}
Export default service 为了接下来操作更加方便
二、首页 banner 数据显示
1. 创建 api 文件夹，在 api 文件夹创建 js 文件，定义调用接口路径
建一个文件叫 banner。
Banner.js
import request from‘@/utils/request'
export default{
//查询前两条 banner 数据
getListbanner(){
return request({
url:ˈ/edu. cns/banner/ getAllBanner `j
method;'get’
})
}
}
2. 在页面调用接口得到数据进行显示
在 default 页面中是布局页面，在 index 显示调用，现在显示 banner 是在首页面中
//banner 数组
bannerList :[]
}
},
created(){
},
methods:{
//查询 banner 数据
getBannerList (){
banner. getListBanner ()
. then(response=>{
This banner list =Response.data.data.list
}
}
}
}
在 index.vue 页面中进行调用，首先引进 banner.js
先把数据定义一个初始值，定义时候注意不要写错位置，
//查询 banner 数据
getBannerList (){
banner. getListBanner ()
then(response=){
This .banner List=response, data, data, list
}
//调用查询 banner 的方法
this, getBannerList ()
<template)_
<div>
<1--幻灯片开始-->
<div v-swiper;mySwiper=" swiper0ption ">
<div class="swiper-wrapper">
<div v-for-"banner in bannertist ":key="banner, id"class="swpper-slide"style="background :#04B1B"
<a target-"_ blank"href-"/">I
<img src="~/assets/photo/banner/ 1525939573202 .
jpg"alt="首页banner">
</a>
</div>
</div>
<div>
class="swiper- pagination swiper- pagination -white"></div>
<divclass="swiper-button-prev swiper-button-white"slot="button-prev"></div>
<divclass="swiper-button-next swiper-button-white"slot="button-next"></div>
</div>
（）灯片结束－－
Alt 两种不同的作用：
一种是在网页上移动光标到某个地方，就会显示内容，另一种是当图片地址错了，做一个提示的信息。
