資訊專欄INFORMATION COLUMN
摘要：目前只用到和音樂的輪播圖不用說，音樂這個網(wǎng)站的頁面我是真的挺喜歡，不光是他的設(shè)計，頁面的布局也很美觀，在控制臺調(diào)試的時候可以看看它的結(jié)構(gòu)，非常有層次而富有美感，即使加上一層也不會有違和感。由于安全原因，跨域訪問是被各大瀏覽器所默認禁止的。
一直想做一個vue項目 然后呢 我就做了
效果預(yù)覽部分地方不全部根據(jù)原版，也有自由發(fā)揮的，目前功能模塊比較簡陋，如果加載太慢，可以下載下來再本地運行
Build Setup?網(wǎng)易云音樂API
項目地址：github
預(yù)覽地址：demo
# 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 # 網(wǎng)易云API部署 listen localhost:3000 npm run start技術(shù)棧
vue(數(shù)據(jù)綁定)
vue-router
vuex(管理組件狀態(tài)，實現(xiàn)組件通信）
webpack(打包工具)
scss（原來想用stylus,回頭看看我都快寫完了...）
axios（我等下要重點講這**）
組件庫: element-UI(本來想用muse-UI,感覺那個更cool，下次吧..)
API: 網(wǎng)易云音樂API(仿qq音樂我用網(wǎng)易云音樂的東西，你怕不怕...)
核心功能組件的實現(xiàn) 搜索功能 播放功能
? ?(播放頁面正在完善中，樣式只是大概，待細化...)
(目前子目錄只開通歌手列表)自己挖的坑，自己埋 vuex的模塊應(yīng)用
?一開始我并沒有使用vuex，因為我覺得目前這個項目比較小，并不需要它來管理數(shù)據(jù)，畢竟vuex針對大項目來說確實很好用，但是后來考慮到如果后期該項目我還要 維護，數(shù)據(jù)量一大，還是要重新分類數(shù)據(jù)，所以中途某些地方插入了vuex的使用，這就很大一部分影響了項目進行的進度。（目前只用到action和state）
qq音樂的輪播圖不用說，qq音樂這個網(wǎng)站的頁面我是真的挺喜歡，不光是他的設(shè)計，頁面的布局也很美觀，在控制臺調(diào)試的時候可以看看它的結(jié)構(gòu)，非常有層次而富有美感，即使加上 一層margin,padding也不會有違和感。這就造就了它的輪播圖結(jié)構(gòu)比較麻煩，不是說做不出來，因為這是第一次上傳的項目，我想先將大概的結(jié)構(gòu)完善一下，后期再 維護，所以我就選用了element-UI里面的跑馬燈式輪播圖組件，大體來說，除了部分瑕疵以外，還是高度還原了原版輪播圖的。
axios后端數(shù)據(jù)獲取時產(chǎn)生的跨域問題?重點來了，這個是我在該項目中花了最多時間的地方，相信很多同學(xué)使用axios都碰到過我這個問題，目前我這里使用了三種方法處理該問題，請大家針對自己的項目問題對號入座
? ?
跨域訪問，簡單來說就是 A 網(wǎng)站的 javascript 代碼試圖訪問 B 網(wǎng)站，包括提交內(nèi)容和獲取內(nèi)容。由于安全原因，跨域訪問是被各大瀏覽器所默認禁止的。
? ?
①. 針對本地相同端口服務(wù)器之間的跨域
這是我剛開始碰到問題時使用的第一種，這個時候你只需要找到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()
})
然后它就會報錯~，具體原因是你同一個端口申請相同端口的東西,不好意思，那不叫跨域...
②. 針對本地不同端口的服務(wù)器之間的跨域
就是將上面的頭文件放在當(dāng)前項目申請的服務(wù)器的那個api中。
③. 針對本地服務(wù)器對域名服務(wù)器訪問的跨域問題
找到當(dāng)前項目congfig文件夾下index.js文件，然后在文件中將proxyTable內(nèi)容改為：
proxyTable: {
"/api": {
target: "[1]",
changeOrigin: true,
pathRewrite: {
"^/api": "/"
}
}
}
終于就是你當(dāng)前想訪問的api地址，項目中訪問的時候就只要用/api做反向代理即可
?這是我第一個用vue擼的項目，可能功能有點簡陋，很多地方有待提高，不過這次實踐讓我對組件化的理解有了一定的提升，后期會繼續(xù)加入其它功能模塊的，文中有用詞不對的地方，歡迎大家指出，項目有什么bug，也希望大家多多提issue
如果對你有幫助，給個star吧
找工作中
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83456.html
摘要：庫用了魔改樣式的歌詞滾動部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標(biāo)準(zhǔn)預(yù)處理器安裝與使用前端項目后端項目 音樂播放器雖然爛大街了，但是作為前端沒自己擼一個一直是個遺憾，而且偶然間發(fā)現(xiàn)pc端web版的網(wǎng)易云音樂做的實在是太簡陋了，社區(qū)仿pc客戶端的網(wǎng)易云也不多見，為了彌補這個遺憾，就用vue全家桶模仿mac客戶端的ui實現(xiàn)了一個，歡迎提出意見和star~ 預(yù)覽地址 源碼地址...
摘要：首先是這個地球，得看看它是真還是假因為很多效果是拿雪碧圖做的，比如這里的旋轉(zhuǎn)的飛機，結(jié)果找到了并且在網(wǎng)站文件中搜到了，那就是沒跑了。 上個月底，在朋友圈看到一個號稱這可能是地球上最美的h5的分享，點進入后發(fā)現(xiàn)這個h5還很別致，思考了一會，決定要不高仿一個? 到今天為止，高仿基本完成， 線上地址 github地址 除了手機端的media控制沒有去兼容，其他的基本都給仿了。 那為了讓你...
摘要：高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器前言沒有使用任何框架，只是想用最簡單純的代碼實現(xiàn)下前臺后臺是參考網(wǎng)上的例子寫的，代碼是在的基礎(chǔ)上重新寫的還有她的姊妹篇網(wǎng)易云音樂移動端，請查看這里寫在前頭的話鄙人野生前端一只，專業(yè)，自學(xué)前端已經(jīng)一年多了 HTML+CSS+JAVASCRIPT 高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器 showImg(https://segmentfault.com/img/remo...
摘要：高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器前言沒有使用任何框架，只是想用最簡單純的代碼實現(xiàn)下前臺后臺是參考網(wǎng)上的例子寫的，代碼是在的基礎(chǔ)上重新寫的還有她的姊妹篇網(wǎng)易云音樂移動端，請查看這里寫在前頭的話鄙人野生前端一只，專業(yè)，自學(xué)前端已經(jīng)一年多了 HTML+CSS+JAVASCRIPT 高仿低配網(wǎng)頁版網(wǎng)易云音樂播放器 showImg(https://segmentfault.com/img/remo...
閱讀 2032·2021-11-16 11:45
閱讀 3778·2021-09-06 15:02
閱讀 2092·2019-08-30 15:44
閱讀 2352·2019-08-30 11:21
閱讀 1942·2019-08-29 16:31
閱讀 3484·2019-08-29 13:55
閱讀 1956·2019-08-29 12:15
閱讀 3300·2019-08-28 18:05
