技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-4.vue廣告輪播圖，并使用接口引入資料

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端類似方法進行封裝資料接口，同時優化自己的頁面，下一篇文章開始學習項目上線方法。