1.下载组件包Vue-Awesome-Swiper并引入
cd web
npm i vue-awesome-swiper
2.使用vue-swiper
在首页组件Home.vue中使用该组件，使用方法为外层 < swiper > 内部 < swiper-slide > 。
此时已经可以拖动轮播了：
3.引入广告数据
（1）在server端创建路由
与admin端相同，在server端找到最初创建的web端接口文件index.js，编写web端路由:
同时，在server端index.js文件中引入该web路由：
测试，输入server端链接和路由地址：
localhost:3000/web/api/ads
查询到数据，没问题。这里我用到的是jsonview插件，大家自行下载。
（2）在web端安装并使用axios：
cd web
npm i axiosweb端的main.js中引入axios并编写接口：
（3）调用接口获取数据：
到首页页面Home.vue，在js中调用接口：
成功获取数据：
在页面中显示数据：
此时图片完成上传，可轮播：
4.为轮播广告添加样式，进行修饰
（1）首先，广告是有链接的，我们给图片加链接使其可以跳转。
我们在后台修改链接信息：
第一个广告链接到百度，第二个到我的csdn主页。
点击跳转，没问题。
（2）固定图片大小和位置，每次设置广告时需要固定尺寸的话就太烦了，我们把它设置成占满宽高并居中。
style.scss:
Home.vue使用sass样式：
效果：
（3）补全轮播样式
效果出现：
但如果这个页面出现多个swiper轮播样式的话，就无法区分几个样式了，所以我们给这个轮播图起一个独立类名，将其挂载到此类名：
最后，修改轮播点的位置和颜色。
当我们为轮播点span标签加text-right类名后，发现并没有效果：
是因为这个组件中有更高级的css指令，设置的是text-align: center。
所以将我们设置的类名样式设置为强制执行即可（!important）:
修改颜色：
原组件的颜色与我设置的辅助色比较相近，普通点为灰色，被选点为辅助蓝色，然后我还加了个辅助色边框：
其它广告轮播样式大家参考包链接介绍。
（4）精准查询轮播图广告数据
之前想一次查询所有广告，并按需进行广告位置放置，但发现查询到的json数据是按数据库查询排序，如果按索引查找会有变化。
所以在server后台接口位置做出整改，以广告位名字查找单个广告位数据：
web端展示数据也做一些改变：
大家可参照admin端类似方法进行封装数据接口，同时优化自己的页面，下一篇文章开始学习项目上线方法。
