getfromcode

Vue 2.0 移动端音乐App【完整版】

后端开发
课程简介

这门课解决什么问题 这门课针对移动端音乐 App 的完整前端开发需求,从需求分析到页面实现、接口对接,涵盖轮播图、歌单列表、滚动加载等核心功能的实战开发。它解决的不是单一知识点,而是将 Vue 2.0 移动端开发与后端接口串联起来,让学习者能够独立完成一个可运行的音乐 App 前端项目,而非停留在概念层面。 适合什么基础 适合具备 HTML/CSS/Jav…

已有 20 人浏览 发布 2026-01-12 更新 2026-08-29

这门课解决什么问题

这门课针对移动端音乐 App 的完整前端开发需求,从需求分析到页面实现、接口对接,涵盖轮播图、歌单列表、滚动加载等核心功能的实战开发。它解决的不是单一知识点,而是将 Vue 2.0 移动端开发与后端接口串联起来,让学习者能够独立完成一个可运行的音乐 App 前端项目,而非停留在概念层面。

适合什么基础

适合具备 HTML/CSS/JavaScript 基础,了解 Vue 2.0 核心概念(响应式、组件、路由)的开发者。课程涉及 axios、jsonp、Promise 等异步与网络技术,建议有 Node.js 基础更佳,但非必需。零基础同学建议先补完 Vue 2.0 响应式和组件体系再跟课。

建议先看哪几块

  • 需求分析 + 脚手架安装:理解移动端项目结构,掌握 vue-cli 搭建项目,明确目录分工与公共资源准备
  • 页面入口 + 路由 + Tab 导航:建立移动端页面布局和导航体系,理解组件复用逻辑
  • 轮播图 + 歌单列表 + 滚动加载:掌握数据抓取、组件复用和性能优化,重点练习接口代理配置与 scroll 组件抽象

学完能独立做什么

学完课程后,开发者能够独立搭建移动端音乐 App 框架,实现轮播图展示、歌单列表展示、滚动懒加载等核心功能,并完成与后端接口的对接。项目结构清晰,可直接作为后续功能扩展或独立项目的起点,具备从需求到落地的完整能力。

资料怎么配合练习

课程提供完整源码和配套练习,建议边看边动手:每完成一个模块就独立运行项目,尝试修改数据接口、调整样式、添加新功能。重点练习接口代理配置、jsonp 数据抓取、scroll 组件抽象等易出错环节,通过实际调试加深理解,而非停留在演示层面。

课程目录

1-1 导学
1-2 课前必读(源码获取方式)

2-1 需求分析

2-2 VUE-c++li脚手架安装

2-3 项目目录介绍及图标字体、公共样式等资源准备

3-1 页面入口+header 组件的编写

3-2 路由配置+ tab 顶导组件开发

4-1 页面简介+轮播图数据分析

4-2 jsonp原理介绍+Promise封装

4-3 jsonp的应用+轮播图数据抓取

4-4 轮播图组件实现(上)

4-5 轮播图组件实现(中)

4-6 轮播图组件实现(下)

4-7 歌单数据接口分析

4-8 axios 介绍和后端接口代理

4-9 歌单列表组件开发和数据的应用

4-10 scroll 组件的抽象和应用(上)

4-11 scroll 组件的抽象和应用(下)

4-12 vue-lazyload 懒加载插件介绍和应用

4-13 loading 基础组件的开发和应用

5-1 歌手页面布局和设计讲解

5-2 歌手数据接口抓取

5-3 歌手数据处理和 Singer 类的封装

5-4 listview 基础组件的开发和应用-滚动列表实现

5-5 listview 基础组件的开发和应用-右侧快速入口实现(1)

5-6 listview 基础组件的开发和应用-右侧快速入口实现(2)

5-7 listview 基础组件的开发和应用-右侧快速入口实现(3)

5-8 listview 基础组件的开发和应用-右侧快速入口实现(4)

5-9 listview 基础组件的开发和应用-滚动固定标题实现(上)

5-10 listview 基础组件的开发和应用-滚动固定标题实现(下)

6-1 歌手详情页布局和设计详解

6-2 子路由配置以及转场动画实现

6-3 初识 Vuex

6-4 Vuex 初始化及歌手数据的配置

6-5 歌手详情数据抓取

6-6 歌手详情数据处理和Song类的封装(上)

6-7 歌手详情数据处理和Song类的封装(下)

6-8 music-list 组件开发(1)

6-9 music-list 组件开发(2)

6-10 music-list 组件开发(3)

6-11 music-list 组件开发(4)

6-12 music-list 组件开发(5)

6-13 music-list 组件开发(6)

6-14 music-list 组件开发(7)

7-1 播放器页面设计详解

7-2 播放器Vuex数据设计

7-3 播放器Vuex的相关应用

7-4 播放器基础样式及歌曲数据的应用

7-5 播放器展开收起动画(上)

7-6 播放器展开收起动画(中)

7-7 播放器展开收起动画(下)

7-8 播放器歌曲播放功能实现

7-9 播放器歌曲前进后退功能实现(上)

7-10 播放器歌曲前进后退功能实现(下)

7-11 播放器播放时间获取和更新

7-12 播放器progress-bar进度条组件实现(上)

7-13 播放器progress-bar进度条组件实现(中)

7-14 播放器progress-bar进度条组件实现(下)

7-15 播放器progress-circle 圆形进度条组件实现

7-16 播放器模式切换功能实现(上)

7-17 播放器模式切换功能实现(中)

7-18 播放器模式切换功能实现(下)

7-19 播放器歌词数据抓取

7-20 播放器歌词数据解析

7-21 播放器歌词滚动列表实现

7-22 播放器歌词左右滑动实现(上)

7-23 播放器歌词左右滑动实现(下)

7-24 播放器歌词剩余功能实现

7-25 播放器底部播放器适配+mixin的应用

8-1 歌单详情页布局介绍及Vuex实现路由数据通讯

8-2 歌单详情页数据抓取

8-3 歌单详情页数据的处理和应用

9-1 排行页面布局介绍及排行榜数据抓取

9-2 排行页排行榜数据应用

9-3 榜单详情页布局介绍及Vuex实现路由数据通讯

9-4 榜单详情页数据抓取和应用

9-5 带排行的song-list组件扩展和应用

10-1 搜索页面页面布局和功能介绍

10-2 搜索页面search-box组件开发

10-3 搜索页面热门搜索数据抓取和应用

10-4 搜索页面suggest组件开发(1)

10-5 搜索页面suggest组件开发(2)

10-6 搜索页面suggest组件开发(3)

10-7 搜索页面suggest组件开发(4)

10-8 搜索页面suggest组件开发(5)

10-9 搜索页面suggest组件开发(6)

10-10 搜索页面suggest组件开发(7)

10-11 搜索页面搜索结果保存功能实现(1)

10-12 搜索页面搜索结果保存功能实现(2)

10-13 搜索页面搜索结果保存功能实现(3)

10-14 搜索页面search-list 组件功能实现(上)

10-15 搜索页面search-list 组件功能实现(下)

10-16 搜索页面confirm 组件功能实现

10-17 搜索页面剩余功能实现(上)

10-18 搜索页面剩余功能实现(下)

11-1 歌曲列表组件布局和功能介绍

11-2 歌曲列表组件显示和隐藏的控制

11-3 歌曲列表组件播放列表的实现(1)

11-4 歌曲列表组件播放列表的实现(2)

11-5 歌曲列表组件播放列表的实现(3)

11-6 歌曲列表组件播放列表的实现(4)

11-7 歌曲列表组件播放列表的实现(5)

11-8 歌曲列表组件 playerMixin的抽象(上)

11-9 歌曲列表组件 playerMixin的抽象(下)

11-10 歌曲列表组件add-song组件实现(1)

11-11 歌曲列表组件add-song组件实现(2)

11-12 歌曲列表组件add-song组件实现(3)

11-13 歌曲列表组件add-song组件实现(4)

11-14 歌曲列表组件add-song组件实现(5)

11-15 歌曲列表组件add-song组件实现(6)

11-16 歌曲列表组件top-list组件实现

11-17 歌曲列表组件scroll组件能力的扩展

12-1 用户中心页面布局和功能介绍

12-2 用户中心页面收藏列表的Vuex数据设计和实现

12-3 用户中心页面收藏歌曲功能实现(上)

12-4 用户中心页面收藏歌曲功能实现(下)

12-5 用户中心页面剩余功能实现(上)

12-6 用户中心页面剩余功能实现(下)

13-1 编译打包-播放内核小bug修复

13-2 编译打包-项目编译打包及node服务测试

13-3 编译打包-路由组件实现懒加载

13-4 编译打包-Vue.js升级到最新版

14-1 移动端调试工具和抓包工具介绍(上)

14-2 移动端调试工具和抓包工具介绍(下)

14-3 课程总结

15-1 课程资料汇总

课程购买
课程价格
金币29
290金币限时优惠会员免费
销量:0
💎 开通会员每日免费下载,比单买更划算 →
支付成功后会自动显示下载资源云盘的链接!点击链接即可下载到本地。