用Vue高仿qq音乐官网-pc端

用Vue高仿qq音乐官网-pc端

大家好,又见面了,我是全栈君。

一直想做一个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音乐我用网易云音乐的东西,你怕不怕…)

核心功能组件的实现

搜索功能

用Vue高仿qq音乐官网-pc端

播放功能

用Vue高仿qq音乐官网-pc端
   (播放页面正在完善中,样式只是大概,待细化…)

跳转功能

用Vue高仿qq音乐官网-pc端

(目前子目录只开通歌手列表)

自己挖的坑,自己埋

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()
    })

用Vue高仿qq音乐官网-pc端

  • 然后它就会报错~,具体原因是你同一个端口申请相同端口的东西,不好意思,那不叫跨域…

②. 针对本地不同端口的服务器之间的跨域

  • 就是将上面的头文件放在当前项目申请的服务器的那个api中。

③. 针对本地服务器对域名服务器访问的跨域问题

  • 找到当前项目congfig文件夹下index.js文件,然后在文件中将proxyTable内容改为:

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

就是你当前想访问的api地址,项目中访问的时候就只要用/api做反向代理即可

终于

  •  这是我第一个用vue撸的项目,可能功能有点简陋,很多地方有待提高,不过这次实践让我对组件化的理解有了一定的提升,后期会继续加入其它功能模块的,文中有用词不对的地方,欢迎大家指出,项目有什么bug,也希望大家多多提issue

  • 如果对你有帮助,给个star吧

  • 找工作中

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108413.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • .net 开源框架「建议收藏」

    .net 开源框架「建议收藏」开源框架:CastleCastle是由HamiltonVerissimo撰写的,从2003年就开始开发,并在2006年11月发布了1.0RC2。2007年09发布了1.0RC3版本。Castle是个轻量级(Lightweight)容器(Container)、实现IoC(InversionofControl)概念,是一个全方位的应用程序(Application)框

  • Java 安全之Java Agent

    Java安全之JavaAgent0x00前言在前面发现很多技术都会去采用JavaAgent该技术去做实现,比分说RASP和内存马(其中一种方式)、包括IDEA的这些破解都是基于JavaA

    2021年12月12日
  • java scanner输入数组_java基础- scanner/方法/数组

    java scanner输入数组_java基础- scanner/方法/数组1.用户交互scannerNext()publicclassdemo1{publicstaticvoidmain(String[]args){//创建一个scanner对象Scannerscanner=newScanner(System.in);System.out.println(“请使用next方式进行接收:”);//判断有无输入字符if(scanner.hasNext…

  • RTX3060安装pytorch

    RTX3060安装pytorchRTX3060安装pytorch1安装anaconda2查看本机显卡支持的cuda最高版本(2)根据pytorch版本选择要安装的CUDA(3)下载安装CUDA(4)下载cudNN(5)下载安装刚刚选择的pytorch版本前不久刚刚入手了一台新电脑,显卡为RTX3060,在安装环境的时候,踩了不少坑,现在将经验总结如下:1安装anaconda这个可以看这个教程:https://blog.csdn.net/in546/article/details/117400839需要注意的是,要记得添加到环

  • 理解maven命令package、install、deploy的联系与区别

    理解maven命令package、install、deploy的联系与区别  我们在用maven构建java项目时,最常用的打包命令有mvnpackage、mvninstall、deploy,这三个命令都可完成打jar包或war(当然也可以是其它形式的包)的功能,但这三个命令还是有区别的。下面通过分别执行这三个命令的输出结果,来分析各自所执行的maven的生命周期。mvncleanpackagemvncleaninstallm…

  • Modelsim 10.2c 百度网盘下载「建议收藏」

    Modelsim 10.2c 百度网盘下载「建议收藏」百度网盘链接:链接:https://pan.baidu.com/s/1CGNg1Dy_S37P-obHoCncFg提取码:2eml

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号