sqaiyan / neteasemusic Goto Github PK

View Code? Open in Web Editor NEW

405.0 21.0 85.0 2.76 MB

Vue版仿网易云音乐ios端web spa

License: MIT License

JavaScript 19.52% HTML 0.62% Vue 64.56% CSS 15.29%

vue netease netease-music vuex webapp

neteasemusic's Introduction

Vue全家桶高仿网易云音乐

功能最多，按照ios客户端高仿，还有小程序版嘞

网易忠粉，去年小程序刚出来时候开始用小程序写过一版高仿ios版网易云音乐。一直在踩坑，基本完成后开始考虑用vue实现(其实是懒，想脱坑)。vue之前仅限于活动页使用，全家桶没用过，所以这次也是边学边做，很多东西来回重写了好多次。

技术栈

Vue全家桶(vue,vue-router,vuex)
axios(http)
mint-ui+移植原来小程序版的css
node(接口服务)，地址在这里
图片资源来自ios端解压缩文件

项目地址, 欢迎 star，issue

vps ip已经被封无法在线预览

部署

后端项目

# 克隆node后端代码到本地
git clone [email protected]:sqaiyan/netmusic-node.git

cd netmusic-node 

# install dependencies
npm install 

# serve at localhost:3000
node app.js

前台项目

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

已完成功能

首页（个性推荐，分类歌单，电台推荐，热门排行
搜索（hot ,history ,suggest ,multimatch; 单曲，歌单，歌手，mv等。。。
详情单页类（歌单，歌手，电台，专辑，评论，用户，相似推荐，每日推荐
播放页（单曲，FM，节目：上下一曲，播放模式[单曲，随机，顺序]，单曲喜欢，单曲收藏到歌单，fm trash，快进快退，歌词，播放列表
我的（登录，云盘，收藏

待完成功能（根据api破解情况

评论（操作类
动态
音质切换
歌词翻译 ....

存在的问题或bug

单曲播放进入评论等前进页面，单曲播放完自动播放下一曲后页面回退回播放页面路由自动切换不了，会播放上一曲，逻辑这块没理顺
目前的api基本都是根据官网版扒下来的，git上发布的一些也基本都是这样，客户端接口用的是最新版的没有能力扒出来。存在问题是banner接口请求到的是老接口数据，已经不维护了的数据

如果本例对您学习Vue有帮助，欢迎赏杯奶茶喝

neteasemusic's People

Contributors

Stargazers

Watchers

Forkers

ioriwellings magicknight singledog11 wufan2304 jay763190097 andy521 wumingwei hcy1120 wanghq11 devxiao8 summerjie007 931743010 diy1969 jackhuclan marcopai hadryan craigmcmeechan ch3n-h2 hhhcommon zhouyuping12 yuangui kaisar420 xiaohudie chloeshan smallcoders raintreechan linxiaobing1005032863 jxs-xx laikee99 wtopull iamsmiling jiangyao120 blue-skycat yuruyigit anny-fu canlan527 juancherry littlesogo messixing xxgw1997 dyanfee open-javascripts lunhui1994 cnopens mybow qhx1993 nowanys front-black zzlve feiman lijm1206 djjty hkduan2004 ccf19881030 melodyjerry qiuqiu2945 josonjiang ws123ws123 yatoku lovepli szwlxj sh9533 frankiegu asiabuyi chenxiuyi alexasahis colajj dxsbiocc li-2019220129 iclouddeveloper dong-minghui-hyron taurues tobeffffffffff poohsen13 qq1209856033 ewsq bingogo888 z1174185292w alto-martin amyyo lg-yyds zenglin007 withoutmelv adaireer lengcha7940

neteasemusic's Issues

为什么打不开了

这个项目的原本接口是不是挂掉了，还有就是我修改了本地端口号还是开起不来项目，数据能够获取，但是就是渲染不上去

前后端部署成功后，会发现前端页面获取后端数据时，会出现跨域问题。翻阅服务端的代码，是可以看到是有处理跨域的（header.set('Access-Control-Allow-Origin', '*')），但是并没有生效。
解决跨域问题的几种常规方式：后端header加跨域设置（没生效），前端使用代理（开发环境有效，生产环境无效），使用nginx代理（生产、开发环境都可以）。
出于仅仅研究项目的目的，此处采用前端代理的方式，如下：
打开前端neteasemusic/src/main.js文件，做出以下修改
//axios.defaults.baseURL = 'http://localhost:3000/v1/';
axios.defaults.baseURL = '/api';
打开前端neteasemusic/config/index.js文件，做出以下修改
proxyTable: {
"/api": {
target: "http://localhost:3000/v1/", //设置你调用的接口域名和端口号
changeOrigin: true, //跨域
pathRewrite: {
"^/api": "/"
}
}
}

最后，重启前端项目就行了，跨域问题解决了。

vue-router后端路由问题

看到你写的路由router中有这样一段代码

{
path: '/simi/:id',
name: 'simi',
component: resolve => require(['@/pages/simi'], resolve)
}

这里component用函数的写法和先require相应的组件再component: 组件名 ，这两者有什么区别吗？
新手，求解答！

import '@/assets/icon.css'

对应目录内没有相关文件