模仿QQ音乐

开发:

Vue + Vuerouter + Vuex + JS + jquery + Node

功能介绍:

  • 查看推荐歌单
  • 歌单详情
  • 播放歌曲列表
  • 歌曲排行榜
  • 歌词详情
  • 歌曲进度条
  • 搜索播放歌曲

登录,退出功能

效果图

 

 

 

以上是获取热门歌曲到播放歌曲的效果图

接下来看看用到的核心代码吧

 上面是mian.js里面的内容

 

 通过调用接口获取用户点击的歌单id发送请求搜索进行获取歌曲的详情并返回界面进行页面的数据渲染

获取歌曲的歌词和用户播放的歌曲进行的歌词处理实现播放功能Vuex是我写这个代码的核心之一它里面有我所用的所有数据请求数据存放数据等内容

 

 vue的核心我页面所用到的所有路由跳转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/62971.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【电子学会】2020年09月图形化一级 -- 小鸡与鸭妈拥抱

小鸡与鸭妈拥抱 1. 准备工作 (1)背景:Farm; (2)角色:Chick、Duck。 2. 功能实现 (1)角色的初始位置、方向和造型如图所示。 (2)点击绿旗Chick向右走去,边走边切换造型; (3)点击绿旗Duck向左走去; (4)2个动物拥抱后停止移动,Duck播放声音“Duck”。 3…

米兰大学发布论文与猫咪叫声数据集,分类喵喵叫

来源:HyperAI超神经本文约1000字,建议阅读5分钟 米兰大学计算机系的研究团队,试图用隐式马尔科夫方法将猫咪在不同环境状态下的喵喵叫识别出来,他们还真的成功了。关键词:声音识别 动物AI 机器学习 深度学习 米兰大学的…

爬取股票信息(股票代码+价格)

用到的两个网站分别东方财富网和老虎社区 思路为先从东方财富网获取股票列表,列表包含所有的股票名称和代码。然后再根据股票代码从老虎社区获取到个股的价格信息。 直接上代码: import requests from bs4 import BeautifulSoup import re# 获得HTML页…

哪些日本人看来很普通的日文词汇,在我们眼里会很高大上?

小幽香 ,よろしく~ AhCrazyWomenHere、赫尔曼.哈里、Mikkeli Matlock 等人赞同 心象風景(しんしょうふうけい) 指非写实的,却在人脑海中浮现,被描述或被记忆的风景。(红A:Unlimited blade wor…

用AI处理Excel,提升工作效率(建议收藏)

准备 开始课程之前我们需要准备一些数据,用于后面的操作案例。在这儿,我们就借助New Bing生成一些数据。生成数据时候,我是用的Prompt为: 我给你一个标题,请给我20组数据"姓名 基本工资 满勤奖励 绩效奖金 总工…

第77篇一对多之稳定性研究(二)之学生发消息报错及array_unshift

关键词:一对多稳定性研究, 学生发消息报错,array_unshift 一、一对多稳定性研究 1.1 测试平台--本地服务器运行平台 老师端:带老师名字 https://localhost:9101/demos/index.html?roomid888&t600&&teaNameMobile莫言 学生一&#xff1…

chatgpt赋能python:Python网络摄像头:使用Python编写网络摄像头应用程序的最佳实践

Python网络摄像头:使用Python编写网络摄像头应用程序的最佳实践 Python是一种高级编程语言,被广泛应用于各种领域,包括网络摄像头。Python的简单易用和强大的功能使其成为网络摄像头应用程序的最佳选择。在本文中,我们将介绍Pyth…

避坑14_此浏览器或应用可能不安全。了解详情请尝试使用其他浏览器。

一、问题 登录谷歌浏览器同步数据时,显示如下错误: 此浏览器或应用可能不安全。请尝试使用其他浏览器。如果您使用的是受支持的浏览器,可以重新尝试登录。 二、解决方法 关闭chrome(最好重启电脑) 打开chrome文件所…

从知识直播和创新活动中,看搜狐的内容“新”路

5月17日,2023搜狐科技峰会顺利闭幕。 本次峰会讨论的内容前瞻且丰满。分享内容涵盖前沿科学突破,宇宙文明、天文卫星、人类永生,到展望人类未来,核聚变、6G通信、脑机接口,再到通用人工智能时代启幕下的行业变革&…

QQ 用 Electron 重构后,终实现 Linux、macOS、Windows 三端架构统一!

整理 | 苏宓 出品 | CSDN(ID:CSDNnews) 经过 24 年的更迭,国民应用 QQ 已成为 80/90 后的回忆,00 后的主战场。而今,因为 QQ 一个最新版本的发布,吸引了不分年龄层次的技术人的目光。 7 月 3 日…

蓝鸟没了?马斯克官宣推特蓝鸟改为上帝X

#AI情报 定了!今晚马斯克会将推特会改名为X,X logo将于今晚发布! X.com已经指向了twitter.com。7月24日早,马斯克在社交媒体推特上发布帖子称,用户现在登录X.com就能指向推特网站,也依然保留twitter.com域…

亚马逊云科技推出大语言模型和生成式AI新服务

采用机器学习新范式赋能业务的不断探索已经播种了几十年。但随着充足可伸缩算力的就位、海量数据的爆炸、以及机器学习技术的快速进步,各行各业的客户开始对业务进行重塑。最近,像ChatGPT这样的生成式AI应用引起了广泛的关注,引发了诸多想象。…

亚马逊云科技为客户的创新开辟出全新的途径

2022年12月,AI创业公司OpenAI推出了聊天机器人ChatGPT。作为生成式AI在文本领域的实际应用之一,ChatGPT的问世距今不过百天而已,却已经火爆了全球。 一时间,大量的企业投入到生成式AI领域,大有“任彼桑田变沧海&#x…

通过FinalShell连接AWS的EC2服务器

今天通过AWS的EC2服务器,搭建了一下ChatGPT的服务,体验了一把,通过FinalShell连接AWS的EC2服务器遇到了一个问题,记录一下。 小插曲:(ChatGPT的服务后续将集成到“韭盾”公众号合“安前码后”公众号&#…

九龙证券|多巨头竞相布局这个热门赛道,机构一致看好的概念股

华为高阶智能驾驭体系ADS 2.0版本发布。 早前,华为在2023华为智能轿车解决方案发布会上,发布了高阶智能驾驭体系 ADS 2.0。新体系将由 AITO 问界 M5 高阶智能驾驭版首发,并已适配阿维塔 11 全系列以及极狐阿尔法 S 全新 Hi 版等车型。 最近&…

学习效率翻倍,用ChatGPT来学习SQL数据分析

本文将介绍使用ChatGPT来学习SQL,以及如何使用这个神奇的工具来提高我们的SQL技能。 微信搜索关注《Python学研大本营》,加入读者群,分享更多精彩 图片来自微软设计器标题 ChatGPT可以做很多很酷的事情。其中之一就是写代码。用户只需要给出正…

短视频剪辑怎么做?4步教你快速入门

最近看到很多小伙伴在问,做短视频自媒体需要具备哪些技能?要准备什么工具?今天就给大家盘点一下,短视频剪辑怎么做,怎样才能快速入门: 01 剪辑软件 入门级别:入门级别的软件首推爱剪辑&#xf…

短视频剪辑自学小技巧,掌握并运用,让你的短视频火起来

短视频剪辑自学小技巧,掌握并运用,让你的短视频火起来 短视频的火爆大家都是有目共睹的,虽然有很多人对于短视频持有怀疑态度,认为短视频很容易浪费光阴,但是不得不承认的是,短视频仍旧是很多人在闲暇时间…

短视频剪辑,超简单的教程

视频如何剪辑,有没有好用的一些技巧呢?今天小编给大家分享一个新的剪辑技巧,它支持多段视频的同时剪辑,下面一起来试试吧。 准备素材 将需要剪辑的多段短视频、音频、图片等等都保存在同一个文件夹之中 选择剪辑方案 运行【媒体梦…

博士申请 | 英国格拉斯哥大学赵德宗教授课题组招收无人驾驶方向全奖博士生...

合适的工作难找?最新的招聘信息也不知道? AI 求职为大家精选人工智能领域最新鲜的招聘信息,助你先人一步投递,快人一步入职! 格拉斯哥大学 格拉斯哥大学肇建于 1451 年,英国顶尖学府,位于苏格兰…