精华内容
下载资源
问答
  • 使用Vue+Bootstrap开发在线音乐网站

    千次阅读 2020-03-24 21:26:10
    因为我并不是主营前端,对于前端我只能说是浅薄了解,所以网站的界面设计大多借鉴了QQ音乐的设计,故在此声明。 牟云音乐首页歌单详情播放页面歌手广场歌单广场歌手详情专辑详情热搜建议搜索建议搜索结果 首页 歌单...

    牟云音乐1.0版本落地成功(nb)

    链接请进 牟云音乐

    因为我并不是主营前端,对于前端我只能说是浅薄了解,所以网站的界面设计大多借鉴了QQ音乐的设计,故在此声明。

    首页

    首页-音乐馆

    歌单推荐和排行榜满满的都是诚意啊(这套配色刚开始也是模仿后来借助Chrome上的插件Color by Fardos出奇的完成了配色设计,也要感谢朋友在这里的建议)。

    歌单详情

    歌单详情
    (ps:现在已加入"学习"模块)
    右边那长长的滚动条暗示着它是一个尊贵的收录了200首单曲的歌单,每首歌曲都有独立的详情页播放,或者点击全部播放。

    播放页面

    正在播放

    点击左下角的封面图或者键盘按空格开始播放,页面上可以看到当前歌曲的热评,这个UI说实在的真的有些丑我自己都看出来了没办法 ,不是美工的我暂时就这吧。

    歌手广场

    歌手

    找歌手没啥说的 按条件筛选就好了。

    歌单广场

    歌单广场

    各种标签各种类型尽管找。

    歌手详情

    歌手详情

    应该找我嵩的,算了。

    专辑详情

    专辑详情

    薛之谦的<<意外>>好像出来有几年了可是听起来并没有过时的感觉,和我嵩一样是个有才华的Boy。

    热搜建议

    热搜建议

    实时更新热搜指数。

    搜索建议

    搜索建议

    总觉得做的还是太粗糙了…

    搜索结果

    搜索结果

    可以搜索单曲 专辑 歌单 歌手 ,然后就可以进去听了, 嗯这些好像很多平台都可以提供, 而牟云界面简陋功能单一根本没有任何可比性, 所以后期的优化中我觉得还是要把体验感做上来,至少不会让人点开后就, 就关掉了,生态也是很重要的一个点。

    现在再来记录一下开发这个页面所用到的前端技术栈

    • Bootstrap
    • Jquery
    • Vue

    基本上都是面向Google编程 面向Stack Overflow编程哈哈,反正耗时耗精力但确实解决了很多问题。

    然后在服务器端的部署,因为是静态页面所以我用的Nginx代理,在这之前我去了腾讯云也就是我服务器和域名备案的云服务商,域名解析在我的顶级域名里加了一条二级域名 music.superboyjack.cn 然后在nginx.conf文件中添加了这么一段配置:

    server {
            listen       80;
            server_name  music.superboyjack.cn;#监听牟云音乐
            root c:/MouYun;#牟云音乐站点
    
            location / {   
                index  index.html index.htm;
            }
            error_page   500 502 503 504  50x.html;
            location = /50x.html {
                root   html;
            }
    }
    

    简单的一段配置就花费了我大把时间才搞好,所以说经验真的很重要,纵使你知识体系掌握的再熟悉,没有经验也是凉凉。不码了今天就这吧。

    展开全文
  • 欢迎使用牟Q音乐,作品仅为作者学习测试而编写,请勿借助该作品非法牟利,请大家到多多支持QQ音乐官方正版音乐 牟Q音乐提供QQ音乐歌单的解析,只需要粘贴进正确格式的歌单链接就可以进行解析,然后进行试听及下载...

    欢迎使用牟Q音乐,作品仅为作者学习测试而编写,请勿借助该作品非法牟利,请大家到多多支持QQ音乐官方正版音乐


    牟Q音乐提供QQ音乐歌单的解析,只需要粘贴进正确格式的歌单链接就可以进行解析,然后进行试听及下载操作。

    一、歌单链接获取方式:

    1.电脑网页,打开歌单详情页面

    https://y.qq.com/n/yqq/playlist/3805603854.html

    歌单id为 ”/playlist/“ 和 “.html” 之间的数字

    在这里插入图片描述

    2.手机网页,打开歌单详情页面

    https://i.y.qq.com/n2/m/share/details/taoge.html?ADTAG=newyqq.taoge&id=3805603854

    链接为页面顶部的框框里,歌单id为 ”&id=“ 后面的数字

    在这里插入图片描述

    3.手机QQ音乐APP获取链接

    步骤:分享到QQ,选择我的电脑,就可以获得链接

    https://i.y.qq.com/n2/m/share/details/taoge.html?platform=11&appshare=android_qq&appversion=9090508&hosteuin=owCk7w-FNe-i7v**&id=3805603854&ADTAG=qfshare

    歌单id为 ”&id=“ 后面的数字

    在这里插入图片描述
    在这里插入图片描述
    G1FPhV.jpg

    G1FEX4.jpg

    G1FMh6.jpg

    4.直接输入歌单ID

    或者可以直接输入id也可以解析比如:3805603854

    二、试听歌曲

    1.电脑端

    双击歌曲,或者点击对应歌曲的试听按钮

    G1eyuT.png

    点击后即可出现这样的页面

    G1mpKf.png

    2.手机端

    选中歌曲,点击试听按钮即可

    三、下载歌曲

    注意:因为采用Blob下载方式,下载工作会在后台进行,所以点击下载后,需要几秒时间在后台,下载完成后才会提醒,请不要着急,也不要刷新页面

    1.单首歌曲下载

    直接点击对于歌曲的下载按钮即可,并且歌曲支持文件大小预览,默认优先下载无损音质,如果没有无损,则下载高清音质,以此类推,注意自己流量哦,建议Wifi网络环境下下载。

    G1KbQI.png

    G1MCSs.png

    2.多选下载

    注意:手机端可能无法使用多选下载功能

    只需要勾选对应歌曲的选择框,再点击下载选中按钮即可

    在这里插入图片描述
    在这里插入图片描述
    G1Q6Dx.png

    展开全文
  • 看界面效果可以在百度搜素“springboot结合mybatis多套druid数据源入门级音乐网站后台”那篇博客,里边有后台实现的代码,还有几张前台的照片。
  • vue-music 音乐网站

    2018-03-26 13:29:07
    在学习完vueJS,一直想做个项目来锻炼一下,选来选去,还是做个网易云音乐,其间遇到了很多坑,也逐渐接受了vue这种组件化的思想以及从Dom操作转换为用数据去驱动视图。并且在某部分基础组件上借鉴(搬运)了elementUI的...

    在学习完vueJS,一直想做个项目来锻炼一下,选来选去,还是做个网易云音乐,其间遇到了很多坑,也逐渐接受了vue这种组件化的思想以及从Dom操作转换为用数据去驱动视图。并且在某部分基础组件上借鉴(搬运)了elementUI的源码(不过elementUI写的是真好)

    技术栈

    • Vue.js
    • Vuex
    • Vue-router
    • axios
    • Binaryify提供的API 在其中也知道了组件之间在不同场景之间的数据传输方式(父子prop, 兄弟EventBus,多个组件共享vuex)

    已完成功能

    • 首页
    • 播放器功能 -- 上一曲, 下一曲, 暂停等功能
    • 歌单展示/详情页
    • 专辑展示/详情页
    • 歌手展示/详情页
    • 歌词列表
    • 单曲详情页
    • 评论

    项目运行

    npm istall 
    
    npm run dev
    
    // 在163Api文件路径下启动
    
    node app.js
    复制代码

    遇到的问题

    1. 繁琐的API的调用,由于使用的Api的接口很多,如果要一个一个写的话,太冗余,在看了掘金上一边文章之后,果断的用了Proxy代理方式
    import axios from 'axios';
    
    axios.defaults.baseURL = `http://localhost:3000`
    
    export const api = new Proxy({}, {
      get(target, prop){
        let method = /^[a-z]+/g.exec(prop)[0];
        let path = prop
                  .substring(method.length)
                  .replace(/([A-Z])/g, '/$1')
                  .replace(/(\$)([a-z]+)/g, '?$2=')
                  .toLowerCase();
        return function(data = "", options = {}, and=false){
          let url = `${path}${data}`;
          if(and){
            for(let [key, value] of Object.entries(options)){
              url += `&${key}=${value}`;        
            }
          } 
          return axios({ method, url })
        }
      } 
    })
    
    复制代码
    1. 整体项目的设计,奉劝大家一句,在项目的构建中,最好提前提前规划好数据的流通以及各个组件的交互,否则会出现大量冗余的代码,后面修改的话会很麻烦
    2. 组件共享状态,在vue中目前常用的数据传递方式有props,EventBus,vuex根据应用场景的不同来使用它们
    3. 性能问题,再用chrome的lighthouse测试下才37的评分,无疑是不合格的,后续会学习性能优化的相关知识,在以后更新会考虑到性能问题

    项目地址

    源代码,希望大家指出我代码的不足之处,多交流,也欢迎大家来follow和star

    预览图

    转载于:https://juejin.im/post/5ab8f45c5188257bf5511047

    展开全文
  • 一个个人仅供学习使用开发的高仿网易云音乐的完整项目~! 仅供个人学习~! 请务必将文档看完, 很多问题都可以在文档中找到解决, 也可以加入群一起交流, 群号: 970804317 下面也会有二维码 图片预览在楼下 最新版本更新...
  • 基于SpringBoot+Vue音乐网站实习报告 源码及资源在中有网盘链接,1个G左右
  • vue网站-源码

    2021-02-07 22:54:20
    Vue制作的基本网站调用现在离线的音乐API 托管在 代码需要一些清理; 重复CSS选择器如果API仍在线,则相册页面的外观如下: 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn ...
  • 基于vue的仿网易云音乐webapp
  • 目前在自己的Vue音乐项目msimusic内遇到的问题总结 Vue-Router间传递对象 错误用法导致结果:浏览器地址栏显示不正确,致使页面渲染不出来 原因:在vue路由间使用query和动态路由传值,最终都在url上体现出来,所以...

    目前在自己的Vue音乐项目msimusic内遇到的问题总结

    Vue-Router间传递对象

    错误用法导致结果:浏览器地址栏显示不正确,致使页面渲染不出来

    在这里插入图片描述

    原因:在vue路由间使用query动态路由传值,最终都在url上体现出来,所以只能是字符串。

    解决方法

    • 发送端
    const info=encodeURIComponent(JSON.stringify(this.songListInfo));
    //JSON.stringify()将参数转换转换为JSON 字符串
    //encodeURIComponent()函数字符串作为 URI 组件进行编码
    
    • 接收端
    const sheetInfo=JSON.parse(decodeURIComponent(this.$route.query.sheetInfo))//decodeURIComponent() 方法用于解码由 encodeURIComponent 方法编码的部分统一资源标识符(URI)
    //JSON.parse() 将JSON 字符串转换转换为原来的对象
    

    插件 lyric-parser 解析出来的歌词排序混乱,时间不匹配

    原因网易云音乐接口拿到的歌词微秒位有三种情况(:100,:010,:10), npm 安装的默认time对应的是注释掉的情况。

    解决方法:找到对应的包,修改如下

    在这里插入图片描述

    Vue3.x下创建Vue-Router

    因为之前在学习Vue基础知识时,接触的时Vue2.x,在项目中来学习的Vue3.x。在项目开始时通过Vue-CLI仅创建了基本的东西,Vue-router,vuex等是要用是在安装。

    问题:在创建router时,代码和直接用脚手架创建项目安装routerde代码一模一样,但就是运行不起来。

    控制台显示错误:未捕获的TypeError:Object(…)不是函数

    原因:Vue路由器3与Vue3一起安装时,会导致此问题,应该卸载当前版本。

    解决:

    //卸载当前版本
    npm uninstall vue-router --save
    //安装新的版本
    npm i vue-router@next --save
    

    或在package.json手动改成 4 以上。

    展开全文
  • springboot2整合vue开发音乐在线系统 1、安装node.js 2、验证Node.js是否安装好,命令node -v 3、输入以下命令npm -g install npm,更新npm至最新版本。 4、执行命令 npm install -g cnpm --registry=...
  • 基于SpringBoot+MyBatis+Vue实现的音乐网站 这是我部署上线的第一个项目,项目结构简单、通俗易懂、很适合作为毕业设计。 项目名称:Ccmusic音乐网站 开发模式:前后端分离开发模式 说明文档: Ccmusic服务端:...
  • 学习自是Play音乐音乐 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • wdw-music-一个基于vue的高仿网易云音乐网站 () (线上演示地址,由于太菜了跨域什么的没有做好,线上地址可能会有一些数据请求不到,后面我会完善的!!) 前言 本人大三前端菜鸡一只,想自己做一个拿得出手的项目,...
  • springboot+mtbatis前后端分离开发音乐网站,资源包括后台代码、前台网页、sql文件
  • 音乐网站的客户端和管理端使用 VUE 框架来实现,服务端使用 Spring Boot + MyBatis 来实现,数据库使用了 MySQL。 项目功能 音乐播放 用户登录注册 用户信息编辑、头像修改 歌曲、歌单搜索 歌单打分 歌单、歌曲...
  • 项目编号:BS-PT-049 运行环境: ...本系统基于Springboot和Vue实现的前后端分离的一个在线音乐网站系统,系统功能完整,页面简洁大方,是一个非常优秀的JAVA系统,比较适合做毕业设计使用。 系统的主要功.
  • 该系统基于springboot+vue整合,数据层MyBatis,mysql数据库,前后端分离,具有完整的业务逻辑。适合做音乐、播放器、或者前后端分离类的选题,适用于毕业设计、课程设计、数据库大作业等,详细功能请看演示视频。 ...
  • 为了方便html,css,js(vue)全部写在下面的代码中 可直接复制使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta ...
  • 基于Vue (2.x) 全家桶制作的移动端音乐 WebApp ,所有数据均来自于qq音乐线上数据。
  • 整个开发过程首先对系统进行需求分析,得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等;详细设计主要包括系统数据库...
  • 音乐网站的客户端和管理端使用 VUE 框架来实现,服务端使用 Spring Boot + MyBatis 来实现,数据库使用了 MySQL。 技术栈 后端 SpringBoot + MyBatis 前端 Vue + Vue-Router + Vuex + Axios + ElementUI git 开发...
  • 效果如图: 完整代码: &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &...
  • 本系统基于Springboot和Vue实现的前后端分离的一个在线音乐网站系统,系统功能完整,页面简洁大方,是一个非常优秀的JAVA系统,比较适合做毕业设计使用。
  • 今天推荐一个音乐网站项目,前端技术栈基于 Vue.js 开发前台后台,后端基于Spring Boot + MyBatis ,数据库使用的是 MySQL。该系统包含音乐网站基本功能:音乐播...
  • vue实现音乐平台项目

    千次阅读 多人点赞 2020-09-18 13:20:25
    其他的就是一些代码逻辑性的问题 例如 歌词的解释,滚动,轮盘的转动,音乐的播放和切换等。 6.还有就是关于element-ui的问题,建议不会就百度,我也是慢慢啃过来的,而要修改样式的话可以直接检查,复制类名再改,...
  • ,该网站使用前后端分离,运用vue-cli3本项目配置 安装依赖 cnpm install 开发模式 npm run dev 打包测试环境 npm run test 测试和生产一起打包 npm run publish 打包生产环境 npm run build 项目配置功能 配置全局...
  • 音乐网站与分享平台的主要使用者分为管理员和用户,实现功能包括管理员:首页、个人中心、用户管理、音乐资讯管理、音乐翻唱管理、在线听歌管理、留言板管理、系统管理,用户:首页、个人中心、音乐翻唱管理、我的...
  • 今天推荐一个奈斯的音乐网站项目,前端技术栈基于 Vue.js 开发前台页面和后台管理,后端基于SSM(Spring Boot + MyBatis),数据存储层使用的是 MySQL。该系...
  • 下载网站依赖的歌曲及图片,将 data 夹里的文件直接放到 music-server 文件夹下。 b.修改 1)数据库:将sql文件夹中的 tp_music.sql 文件导入数据库。 2)music-server:启动后端服务之前,有一些地方需要修改,先去...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,560
精华内容 1,024
关键字:

vue开发音乐网站

vue 订阅