用Vue高仿qq音乐官网-pc端
用Vue高仿qq音乐官网-pc端
一直想做一个vue项目 然后呢 我就做了http://www.tuicool.com/articles/eymeiiN
效果预览
部分地方不全部根据原版,也有自由发挥的,目前功能模块比较简陋,要完整显示效果必须接入后端数据,请下载以下api文件并打开
网易云音乐API
项目地址: github
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吧
用Vue高仿qq音乐官网-pc端相关推荐
- 仿qq音乐官网部分静态页面
简介: 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面, 一共有五个静态页面,如下图 首页部分: 歌手部分: 新碟部分: 排行榜部分(可播放音乐): 分类歌单部分:
- html实训QQ音乐官网首页制作
QQ音乐官网首页 html <!DOCTYPE html> <html lang="en"> <head><link rel=" ...
- C#\WPF高仿QQ音乐V12.8界面篇《2》
动态效果图 获取源码 通过关注个人公众号:BigBearIT,如下 通过后台回复关键词:WPF高仿QQ音乐源码 即可获得源码下载地址. 后续版本更新后会在公众号通知 /**************** ...
- Vue.js仿QQ音乐(移动端)
项目地址 用电脑在线预览记得切换成手机端哟 在线预览( ̄3 ̄) 源码地址 项目描述 主要技术 使用Vue.js实现单页应用 使用Vue Router处理路由请求 使用Vuex实现数据存储,管理组件间的 ...
- vue实现仿阿里云官网的ace-view-fullColumn模块
ace-view-fullColumn 案例:阿里云官网(https://www.aliyun.com)下方的"全面.专业.智能的解决方案"模块 自己实现出来的效果: 2021.1 ...
- NSIS 制作漂亮的安装界面(仿QQ音乐,网易云音乐)
废话少说,先上图: 注:下面的录制的安装过程使用的安装包,均为制作的安装包,而非官方源包. QQ音乐的安装过程: 网易云音乐的安装过程: 安装包下载: QQ音乐安装包 下载链接:https://pan ...
- Android自定义View,高仿QQ音乐歌词滚动控件!
最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出.今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果.OK,废话不多说,先来看看效果图: ...
- 高仿QQ音乐之旋转专辑图片的实现—仿留声机效果
前言:应个人毕业设计的需求,要做一款音乐播放器,其中一个页面效果就是仿照QQ音乐的播放界面做一个可旋转的圆形专辑图片,效果如下: 通过最终设计与实现,我们的效果如下: 这里要实现旋转的圆形图,我们首先 ...
- 大学官网 Pc端和移动端的差异
(作者:王旭东 撰写时间2019年7月14日) 操作方式 PC端的操作方式与移动端已经有了明显的差别,PC端使用鼠标操作,操作包含滑动.左击.右击.双击操作,操作相对来说单一,交互效果相对较少,而对于 ...
最新文章
- ci持续集成工程师前景_持续集成CI---失败原因
- PHP编译过程中常见错误信息的解决方法
- 4 款 MySQL Binlog 日志处理工具对比,谁才是王者?
- BugkuCTF-MISC题1和0的故事
- python堆栈与队列_python语言的堆栈与队列类的实现
- HTML5网络科技企业网页模板
- 称对方攀附使用近似商标 “汽车之家”起诉索赔500万
- 计算方法c语言上机作业,考研复试-----C语言上机操作(三)
- wpf 加载page后启动_App启动之Dyld在做什么
- STORM之ITridentSpout、FirstN(取Top N)实现、流合并和join
- 计算机组成原理 蒋本珊pdf,计算机组成原理 蒋本珊 习题解答.pdf
- 环洋调研报告-2021年全球MEMS射频开关行业调研及趋势分析报告
- Linux环境下搭建Java Web测试环境的具体步骤
- 88.合并两个有序数组
- 中国移动 招聘 php,中国移动开启社招,这真的是机会?移动员工:携网转号累死你...
- 小技巧 - 如何在线下载 Google Play 里面的应用?
- android 自动剪裁图片,android使用系统裁剪图片
- 狂欢 724,致敬运维侠
- [unity]使用Unity粒子系统制作跑尘
- 如何查看wsdl文档
热门文章
- 【项目管理/PMP/PMBOK第六版/新考纲】计算题30道带答案解析!
- spring security filter获取请求的urlpattern
- DHCP:实现基于UDP的主机动态配置协议
- flash develop vs flex builder
- 2021年计算机一级表格函数,2021年计算机一级电子表格.doc
- Python爬虫入门(二)数据提取(lxml)
- HTML5+CSS3超全笔记,收藏起来方便随时查看
- 苹果手机如何清除微信记录?专业操作助你从此操作告别“假删除”!
- modbus 客户端获取服务器信息,客户端modbus访问服务器过程
- 屏幕 POV事件,制作树形结构搜索帮助