1.下载组件包Vue-Awesome-Swiper并引入

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 axios

web端的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端类似方法进行封装数据接口，同时优化自己的页面，下一篇文章开始学习项目上线方法。