Vue專案開發——網易雲專案筆記(1)

本週實現效果附圖

移動端頁面 響應式頁面 建議使用 rem 相對單位

所以本次專案中所有的字型,圖片等單位均使用rem進行調整

Part1

首先使用Vue cli在命令列建立一個vue專案起名music001,具體選擇如下圖:

我們還需要下載一些別的控制元件:axios,swiper,vue-awesome-swiper

都是用npm i在專案命令列進行建立,完成後的package.json:

另外我們需要一個node檔案

Part2

在路由檔案router下的index.js中進行一些配置:

引入HomeView,這個HomeView.vue即是整個專案的主介面

我們需要四個模組:

我們在components中新建這四個模組的vue檔案並在HomeView.vue中進行引入+註冊,接下來就可以只在單個元件檔案中進行專案的搭建

Part3

首先是頂部導航欄topNav.vue的搭建,這個元件比較簡單,僅僅是css樣式進行排版,在阿里的向量圖示庫中鏈入一些小的圖示檔案

Part4

再就是導航欄下面的輪播圖swiperCom.vue部分,這個部分需要從網易雲API中獲取實時的圖片,我們需要在當前vue專案中新建一個api資料夾,在api中新建index.js,這裡就需要用到Ajax技術了,而我們之前下載好的axios就是一個封裝好的Ajax庫,直接import引入axios即可.

繼續在api中的index中進行操作,let一個值為我們node的那個地址比如我的node地址為http://localhost:3000,

Let baseUrl=’ http://localhost:3000’即可

接下來我們獲取輪播圖的api:

export function getBanner(type=0){//加預設值0
    //模板字串,${}變成變數,``解析變數
    return axios.get(`${baseUrl}/banner?type=${type}`)
}

/banner?type=是網易雲api庫中可以獲取到輪播圖的路徑

使用${}將一個值變成變數,再通過``解析變數

回到swiperCom.vue,import swiper檔案和剛剛在index中新建的getBanner函式

在這裡我們先用data(){return{imgs:[]}}定義返回一個imgs

在使用mounted時,由於是非同步函式要加上async,來呼叫輪播圖圖片,通過這個函式來拿到輪播圖資料

這裡又新加了一個分頁器的函式.

這裡是將res獲取到的資料中的data中的banner中的前三個資料賦值給imgs

在template中使用v-for迴圈資料即可:

這樣輪播圖模組就做好了

Part5

下面是一個簡單的靜態頁面iconList,簡單設定一下css樣式即可

Part6

最後一個元件musicList,這個元件和前面swiper的資料引用方式相似,但我們選擇了組合api的方法再次實現一下這個資料的傳輸

這是組合api的程式碼

使用了onMounted的生命週期函式

現將getMusic獲取的資料儲存到res中.再將res的資料傳給musics,最後return這個musics

這是渲染到頁面上的程式碼.這裡的picUrl,name,playCount都是通過getMusics獲取到的資料的名稱,所以在這裡直接鏈入即可

Part7

至此,這個網易雲專案的雛形已經有了,接下來還是不斷優化UI介面和優化資料互動了