用Vue高仿qq音樂官網-pc端

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

一直想做一個vue專案 然後呢 我就做了

效果預覽

部分地方不全部根據原版,也有自由發揮的,目前功能模組比較簡陋,如果載入太慢,可以下載下來再本地執行

 網易雲音樂API

專案地址:github

預覽地址:demo

Build Setup

# install dependencies
cnpm i
(可以用cnpm或yarn,更方便快捷,你值得擁有)
# serve with hot reload at localhost:8564
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# 網易雲API部署 listen localhost:3000
npm run start 

技術棧

vue(資料繫結)

vue-router

vuex(管理元件狀態,實現元件通訊)

webpack(打包工具)

scss(原來想用stylus,回頭看看我都快寫完了…)

axios(我等下要重點講這**)

元件庫: element-UI(本來想用muse-UI,感覺那個更cool,下次吧..)

API: 網易雲音樂API(仿qq音樂我用網易雲音樂的東西,你怕不怕…)

核心功能元件的實現

搜尋功能

播放功能


   (播放頁面正在完善中,樣式只是大概,待細化…)

跳轉功能

(目前子目錄只開通歌手列表)

自己挖的坑,自己埋

vuex的模組應用

 一開始我並沒有使用vuex,因為我覺得目前這個專案比較小,並不需要它來管理資料,畢竟vuex針對大專案來說確實很好用,但是後來考慮到如果後期該專案我還要 維護,資料量一大,還是要重新分類資料,所以中途某些地方插入了vuex的使用,這就很大一部分影響了專案進行的進度。(目前只用到action和state)

qq音樂的輪播圖

不用說,qq音樂這個網站的頁面我是真的挺喜歡,不光是他的設計,頁面的佈局也很美觀,在控制檯除錯的時候可以看看它的結構,非常有層次而富有美感,即使加上 一層margin,padding也不會有違和感。這就造就了它的輪播圖結構比較麻煩,不是說做不出來,因為這是第一次上傳的專案,我想先將大概的結構完善一下,後期再 維護,所以我就選用了element-UI裡面的跑馬燈式輪播圖元件,大體來說,除了部分瑕疵以外,還是高度還原了原版輪播圖的。

axios後端資料獲取時產生的跨域問題

 重點來了,這個是我在該專案中花了最多時間的地方,相信很多同學使用axios都碰到過我這個問題,目前我這裡使用了三種方法處理該問題,請大家針對自己的專案問題對號入座
   

跨域訪問,簡單來說就是 A 網站的 javascript 程式碼試圖訪問 B 網站,包括提交內容和獲取內容。由於安全原因,跨域訪問是被各大瀏覽器所預設禁止的。
   

①. 針對本地相同埠伺服器之間的跨域

這是我剛開始碰到問題時使用的第一種,這個時候你只需要找到build檔案中的dev-server,找到引用express的位置,給它加上一個標頭檔案:

app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Credentials", true)
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "X-Requested-With")
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8")
next()
})

然後它就會報錯~,具體原因是你同一個埠申請相同埠的東西,不好意思,那不叫跨域…

②. 針對本地不同埠的伺服器之間的跨域

就是將上面的標頭檔案放在當前專案申請的伺服器的那個api中。

③. 針對本地伺服器對域名伺服器訪問的跨域問題

找到當前專案congfig資料夾下index.js檔案,然後在檔案中將proxyTable內容改為:

proxyTable: {
'/api': {
target: '[1]',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}

就是你當前想訪問的api地址,專案中訪問的時候就只要用/api做反向代理即可

終於

 這是我第一個用vue擼的專案,可能功能有點簡陋,很多地方有待提高,不過這次實踐讓我對元件化的理解有了一定的提升,後期會繼續加入其它功能模組的,文中有用詞不對的地方,歡迎大家指出,專案有什麼bug,也希望大家多多提issue

如果對你有幫助,給個star吧

找工作中

相關文章

前端開發 最新文章