基于小程序+SpringBoot制作一个音乐播放器

已于 2023-08-02 15:44:09 修改
阅读量2k 收藏 26
点赞数 13
分类专栏： Java 文章标签： 小程序 spring boot 后端
于 2023-07-07 16:48:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wml_JavaKill/article/details/130705206
版权

此文主要实现在小程序内音乐播放功能，使用Java作为后端语言进行支持，界面友好，开发简单。

一、小程序

1.1 项目创建

  1. 访问[微信公众平台]，点击账号注册。

在这里插入图片描述

  1. 选择小程序，并在表单填写所需的各项信息进行注册。

在这里插入图片描述
在这里插入图片描述

  1. 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。

在这里插入图片描述

  1. 下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。

在这里插入图片描述
在这里插入图片描述

1.2 首页

在这里插入图片描述

轮播图

轮播图使用swiper组件对JS中的数据进行渲染

<swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
    <swiper-item wx:for="{{swiperList}}" wx:key>
        <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
        <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
    </swiper-item>
</swiper>

热门歌曲

使用wx-for进行渲染

<!-- 热门歌曲 -->
<view class="cu-bar bg-white solid-bottom">
  <view class='action'>
    <text class='cuIcon-titles text-red '></text> 热门歌曲
  </view>
</view>
<view class="cu-card article no-card solid-bottom margin-top" wx:for="{{hotMusci}}"  wx:key="index" bindtap="musicDetail" data-index="{{item.id}}">
  <view class="cu-item shadow">
    <view class="content">
      <image src="{{item.image}}" mode="aspectFill" style="width:150rpx;"></image>
      <view class="desc">
        <view class="text-cut">{{item.title}}</view>
        <view class="text-content" style="height:100rpx;">{{item.summary}}</view>
        <view>
          <view class="cu-tag bg-red light sm round">{{item.typeName}}</view>
          <view class="cu-tag bg-green light sm round">{{item.songer}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

iconfont图标引入

快捷入口图片配置可使用iconfont引入图标
阿里巴巴矢量图标图点此跳转

在这里插入图片描述

将图片添加至购物车、添加至项目，并下载项目进行解压，添加iconfont.css的引用即可

在这里插入图片描述

1.3 热门歌单

歌单首页

在这里插入图片描述

歌单首页展示歌单名称、图片信息

<view class="bg-white">
  <view class="bookList">
  <view class="margin-top" wx:for="{{playlist}}" wx:key="index" bindtap="goMusicList" data-index="{{item.id}}">
    <image src="{{item.image}}" class="bookImg" mode="aspectFill"></image>
    <view class="bookName">{{item.title}}</view>
  </view>
  </view>
</view>


 /* pages/bookcase/index.wxss */
page {
  background: white;
}

.bookList {
  display: flex;
  color: black;
  font-size: 28rpx;
  width: 750rpx;
  flex-wrap: wrap;
}

.bookImg {
  height: 210rpx;
  width: 210rpx;
  margin-left: 30rpx;
  border-radius: 25rpx;
}

.bookName {
  width:210rpx;
  margin-left: 30rpx;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  word-break: break-all; 
  -webkit-box-orient: vertical;

}
歌单详情

在这里插入图片描述

详情展示歌单里的音乐，歌曲的图片、标签、名称等信息


<!-- 歌单详情 -->
<view class="cu-bar bg-white solid-bottom">
  <view class='action'>
    <text class='cuIcon-titles text-red '></text> 歌单列表
  </view>
</view>
<view class="cu-card article no-card solid-bottom margin-top" wx:for="{{musicList}}"  wx:key="index" bindtap="musicDetail" data-index="{{item.id}}">
  <view class="cu-item shadow">
    <view class="content">
      <image src="{{item.image}}" mode="aspectFill" style="width:150rpx;"></image>
      <view class="desc">
        <view class="text-cut">{{item.name}}</view>
        <view class="text-content" style="height:100rpx;">{{item.summary}}</view>
        <view>
          <view class="cu-tag bg-red light sm round">{{item.typeName}}</view>
          <view class="cu-tag bg-green light sm round">{{item.songer}}</view>
        </view>
      </view>
    </view>
  </view>
</view>

歌曲详情

在这里插入图片描述

歌曲详情是必不可少的一部分，可以对歌曲进行播放、收藏、评论、点赞等操作。

<!--pages/musicDetail/index.wxml-->
<view class="musicName">
  {{musicInfo.title}}-{{musicInfo.typeName}}
</view>
<view class="authorName">
  {{musicInfo.songer}}
</view>

<!-- 音乐图片 -->
<view class="musicImgBox">
  <view class="musicBlackBox">
    <image class="musicImg {{isPlay?'imgs':''}}" src="{{musicInfo.image}}"></image>
  </view>
</view>
<!-- 评论区 -->
<view wx:for="{{musicInfo.replyList}}" wx:key="index">
  <view class="replyHeadBox">
    <image src="{{item.userHead}}" class="replyHead"></image>
    <view class="replyUserBox">
      <view class="replyUser">{{item.replyUser}}</view>
      <view class="replyTime">{{item.replyTime}}</view>
    </view>
  </view>
  <view class="replyContent">
    {{item.replyText}}
  </view>
</view>
<view style="height:150rpx;"></view>


<audio src="{{musicInfo.fileUrl}}" id="myAudio" controls loop style="display: none;"></audio>
<view class="bottomBtnBox">
  <view class="btnImgBox">
    <image wx:if="{{musicInfo.isGood==0}}"  src="../../images/dz0.png"  class="btnImg" bindtap="changeLike"></image>
    <image wx:if="{{musicInfo.isGood>0}}"  src="../../images/dz1.png"  class="btnImg" bindtap="changeLike"></image>
  </view>
  <view class="btnImgBox">
    <image wx:if="{{isPlay}}" src="../../images/bf1.png" class="btnImg" bindtap="audioPause"></image>
    <image wx:if="{{!isPlay}}" src="../../images/bf0.png" class="btnImg" bindtap="audioPlay"></image>
  </view>
  <view class="btnImgBox">
    <image wx:if="{{musicInfo.isStar==0}}"  src="../../images/sc0.png"  class="btnImg" bindtap="changeCollec"></image>
    <image wx:if="{{musicInfo.isStar>0}}"  src="../../images/sc1.png"  class="btnImg" bindtap="changeCollec"></image>
  </view>
  <view class="btnImgBox">
    <image src="../../images/reply.png" class="btnImg" bindtap="showModal" data-target="DialogModal1"></image>
  </view>
</view>

<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-end">
      <view class="content">发布评论</view>
      <view class="action" bindtap="hideModal">
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view class="padding-lg">
        <textarea bindinput="BindReplyContent" value="{{replyContent}}" style="text-align: left; width:600rpx;height:200rpx;" placeholder="请输入评论内容"></textarea>
    </view>
    <view class="cu-bar bg-white justify-end">
      <view class="action">
        <view class="cu-btn line-green text-green" bindtap="hideModal">取消</view>
        <view class="cu-btn bg-green margin-left" bindtap="confirmModel">确定</view>

      </view>
    </view>
  </view>
</view>

1.4 个人中心页

在这里插入图片描述

个人中心页通过微信组件获取微信用户信息进行展示，同时提供修改密码以及退出登录的入口。

   <!-- 头像 -->
      <view class="headBox">
        <open-data type="userAvatarUrl"  class="user-img"></open-data>
      </view>
      <!-- 昵称  -->
      <view class="teamIcon">
        <open-data type="userNickName"  class="user-nickname"></open-data>
        <view class="uIcon">
          <image src="../../images/head.png" class="uIconImg">
          </image>
          <view class="teamTitle">小程序用户</view>
        </view>
      </view>

二、API

2.1 SpringBoot框架搭建

1.创建maven project，先创建一个名为SpringBootDemo的项目，选择【New Project】

在这里插入图片描述

然后在弹出的下图窗口中，选择左侧菜单的【New Project】

在这里插入图片描述
在这里插入图片描述

在project下创建module，点击右键选择【new】—【Module…】

在这里插入图片描述

左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具进行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】

在这里插入图片描述

Developer Tools模块勾选【Spring Boot DevTools】，web模块勾选【Spring Web】，此时，一个Springboot项目已经搭建完成，可开发后续功能

在这里插入图片描述

2.2 实体映射创建Mapper

创建一个entity实体类文件夹，并在该文件夹下创建项目用到的实体类

这里是引用

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;

@Data
public class User {
    @TableId(type = IdType.AUTO)
    private Long id;

    private String account;

    private String pwd;

    private String userDesc;

    private String userHead;

    private LocalDateTime createTime;

    private Long role;

    private String nickname;

    private String email;

    private String tags;
}

2.3 接口封装

由于我们使用mybatis-plus，所以简单的增删改查不用自己写，框架自带了，只需要实现或者继承他的Mapper、Service

在这里插入图片描述

创建控制器Controller

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

数据库连接、mybatis-plus的分页插件、以及跨域配置

在这里插入图片描述

2.4 整合Swagger

添加依赖

先导入spring boot的web包

<!--swagger依赖-->
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>
<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>

配置Swagger

创建一个swagger的配置类，命名为SwaggerConfig.java

/*
     *用于定义API主界面的信息，比如可以声明所有的API的总标题、描述、版本
     */
    private ApiInfo apiDemo() {
        return new ApiInfoBuilder()
                //用来自定义API的标题
                .title("SpringBoot项目SwaggerAPIAPI标题测试")
                //用来描述整体的API
                .description("SpringBoot项目SwaggerAPI描述测试")
                //创建人信息
                .contact(new Contact("测试员张三","http://localhost:8080/springboot/swagger-ui.html","xxxxxxxx@163.com"))
                //用于定义服务的域名
                //.termsOfServiceUrl("")
                .version("1.0") //可以用来定义版本
                .build();
    }

接口测试

运行Spring Boot项目，默认端口8080，通过地址栏访问url

在这里插入图片描述

接口组定义

根据不同的业务区分不同的接口组，使用@API来划分

@Api(tags = "用户管理") //  tags：组名称
@RestController
public class RoleController {
}

在这里插入图片描述

接口定义

使用@ApiModel来标注实体类，同时在接口中定义入参为实体类作为参数。

  • @ApiModel：用来标类

  • 常用配置项：value：实体类简称；description：实体类说明

  • @ApiModelProperty：用来描述类的字段的含义。

2.5 常用字段类型

字段类型所占字节存储范围最大存储值使用场景
TINYINT1-128~127127存储小整数
INT4-2147483648~21474836472147483647存储大整数
BIGINT8-9223372036854775808~92233720368547758079223372036854775807存储极大整数
DECIMAL可变长度存储精度要求高的数值
CHAR固定长度最多255字节255个字符存储长度固定的字符串
VARCHAR可变长度最多65535字节65535个字符存储长度不固定的字符串
DATETIME8‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’‘9999-12-31 23:59:59’存储日期和时间

三、管理端

3.1 项目创建

可通过vsCode / Hbulider等开发工具进行项目创建，根据个人的开发习惯选择项目类型

在这里插入图片描述

3.2 页面设计

页面主要分为左侧菜单导航及右侧内容，通过iframe实现点击展示的效果

在这里插入图片描述

   // 滚动条
    const ps = new PerfectScrollbar('.lyear-layout-sidebar-scroll', {
		swipeEasing: false,
		suppressScrollX: true
	});
    
    // 侧边栏
    $(document).on('click', '.lyear-aside-toggler', function() {
        $('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
        $("body").toggleClass('lyear-layout-sidebar-close');
        
        if ($('.lyear-mask-modal').length == 0) {
            $('<div class="lyear-mask-modal"></div>').prependTo('body');
        } else {
            $( '.lyear-mask-modal' ).remove();
        }
    });
  
    // 遮罩层
    $(document).on('click', '.lyear-mask-modal', function() {
        $( this ).remove();
    	$('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
        $('body').toggleClass('lyear-layout-sidebar-close');
    });

3.3 接口调用

前端框架使用layui渲染数据，通过url请求在控制器定义的接口

在这里插入图片描述

在这里插入图片描述

基于Java+SpringBoot制作一个宿舍报修小程序
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
04-17 1万+
制作一个宿舍报修小程序，让学生实现快速报修，将流程进行精简， 便于管理部门有效响应。
基于Java+SpringBoot制作一个智能用电小程序
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
08-08 2万+
在当今快节奏的生活中，高效利用能源变得越来越重要。制作一个智能用电小程序，旨在帮助您更智能地管理家庭电器的用电，从而提升能源利用效率，助您掌握用电情况，降低能耗成本，实现绿色低碳生活。
springboot基于微信小程序音乐播放器系统
weixin-80213251的博客
03-14 819
本系统就是采用随听随放的理念进行开发，用户可以在系统上浏览不同歌曲，找到符合要求的歌曲就可以在线播放，也可以在线评论；本系统的实现可以帮助用户听音乐，非常符合现代人的音乐需求。微信小程序也可以理解为利用小程序来解决需求，这种方式可以打破时间和地点的限制，可以为用户提供随时听歌的平台，用户可以在平台上随时找喜欢的歌曲进行播放。微信小程序的音乐播放器将用户与音乐更加紧密的结合在一起，减少时间与地点的问题。一般对系统的模块总体设计采用层次图来设计，层次图属于一种树形图，也就是利用一层一层的图形来表达不同的关系。
基于SpringBoot的在线音乐播放系统，前后端分离，优秀毕业设计系统！
05-26
该项目是基于SpringBoot和Vue的前后端分离系统，前端分为前台用户和后台管理员界面，可以说系统功能非常全面，界面也做的十分优秀，具体的演示效果可以参照我的博客。和在线考试系统、人事管理系统或者二手车交易平台这些课题相比，经管这些课题做出来的系统也很不错，但是界面千篇一律，没有实际的功效。而本课题可以展示实际应用，而且无论功能和界面都非常新颖。所以该项目绝对是让老师眼前一亮的优秀毕业设计！ 博客介绍地址：https://blog.youkuaiyun.com/qq_42257666/article/details/117195304
Spring Boot音乐播放器
最新发布
qq_2865738453m的博客
03-19 553
【代码】Spring Boot音乐播放器。
基于 SpringBoot + MyBatis 的在线音乐播放器
wwzzzzzzzzzzzzz的博客
07-30 2万+
这个类是用来存储不变的常量的.例如设置了session对象,是一个字符串.不变的字符串.将来在其他地方获取对应的session需要通过这个字符串获取.删除音乐,主要是两个删除,一个是删除单个,根据单个musicId删除.另一个是删除多个,根据多个musicId删除.上传音乐,要上传音乐名,音乐歌手,音乐地址,上传作者Id.(音乐上传时间,已经默认设置了.不需要传也可以)这里注册,需要查看当前用户是否存在,存在就不能注册,通过用户查找,这里已经实现....
Spring Boot入门（13)自制音乐平台
山阴少年
07-08 3339
  经过笔者这几天的辛勤劳作（其实就是苦逼地码代码），一个新的网站已经上线啦！该网站是用Spring Boot工具写的，主要实现的功能如下： 根据歌曲名称和音乐平台搜索歌曲，并实现歌曲的在线播放； 歌曲的下载功能； 网页统计量功能； 开发历史介绍。 该网站的首页网址为： http://musicdownload.cfapps.io/index ，页面如下： 在输入框中输入“2...
微信小程序-微信小程序：音乐播放器
08-05
微信小程序： 音乐播放器 歌曲资源来源于 baidu音乐 截图 TODO 收藏列表 切换上一曲/下一曲
Java项目--网页版音乐播放器(Spring Boot 后端逻辑)
m0_56620669的博客
08-30 3254
本篇博客带大家做一个网页版的音乐播放器项目技术栈主要是SSM框架, 基本的创建项目就不写了, 直接上正题.
基于Java+SpringBoot制作一个校园圈子小程序
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
06-07 9506
制作一个校园圈子小程序，有效连接信息供需双方，用户可获取和发布需求信息、参与互动交流，适用于同校、同城、社区交流、客户互动、同学/老师注册发布信息等场景。
基于Java+SpringBoot制作一个论坛小程序
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
05-17 1万+
制作一个论坛互动平台，让兴趣志同道合者用户聚集在这里交流话题、展示自我、结交朋友。
基于 SpringBoot 开发的超简洁音乐播放器
01-08
基于 SpringBoot 开发的超简洁音乐播放器
微信小程序版音乐播放器源码分享.rar
07-10
界面简洁漂亮的微信小程序版音乐播放器源码，这款播放器支持音乐搜索、音乐列表、音乐播放控制等功能，界面比较精简，如示例图所示，不过测试发现，服务器失效了，大家可通过源码学习研究在微信环境下如何开发编写一款在线音乐播放APP，以及界面UI方面的布局设计等。
微信小程序｜基于Java+SpringBoot制作一个小说阅读器
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
11-30 5319
书籍是人类进步的阶梯，制作一个电子书阅读器，跳过市面上各类阅读器层出不穷的广告及其不友好的用户体验。
微信小程序——音乐播放器
weixin_66547608的博客
09-30 8835
了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习，读者能够掌握小程序的基本交互逻辑的开发，能够运用API来实现项目中的特定功能，学会解决开发过程中常见的问题。
springboot音乐播放器系统（源码+文档+PPT+运行视频+讲解视频）
weixin_mrw479640的博客
05-17 294
项目技术： springboot + Maven + Vue 等等组成，B/S模式 + Maven管理等等。 环境需要 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.硬件环境：windows 7/8/10 1G内存以上；或者 Mac OS； 5.是否Maven项目: 否；查看源码目录中是否包含pom.xml
安卓项目（2）Twinkle
m0_50654102的博客
05-11 302
Twinkle 整体架构 软件系统架构: ​ Android+okhttp连接+Spring boot服务器+oracle数据库+腾讯云端 实体类： ​ Song ​ Songlist ​ News ​ NewsComment ​ User ​ Album ​ Singer 细节实现： ​ ViewPage+fragment实现顶部导航栏 ​ PullToRefresh库实现下拉刷新页面 推荐音乐部分 界面展示: 主要涉及类： ​ FgFindmusicFragment ​ RecommendSongA
springboot在线音乐播放器-计算机毕业设计源码39689
vx2_Biye_Design的博客
08-26 579
摘要 本项目旨在基于 Spring Boot 开发一款高效、稳定的在线音乐播放器，旨在为用户提供便捷的音乐播放体验。通过整合 Spring Boot 框架的强大后端支持和现代化的前端交互设计，该系统将实现查看音乐咨讯、MV商城、用户播放记录、歌手介绍、排行榜、音乐中心和演唱会等功能，为用户提供一体化、个性化的在线音乐服务。 该系统将注重用户体验、安全性和性能，以确保用户可以安全、便捷地浏览和播放各类音乐。通过系统的信息化管理和智能化调度，旨在提升音乐播放的便捷性和个性化，为用户提供更加愉快的音乐播放体验。
基于SpringBoot的在线音乐播放系统
热门推荐
振华OPPO的博客世界
05-23 3万+
本项目是一个前后端分离的音乐播放系统项目，前端使用的Vue，后端使用的SpringBoot。前端分为前台用户界面和后台管理员界面。 用户界面的功能除了最基本的播放暂停、上一首下一首、下载歌曲，还有搜索、收藏、同步歌词、评分和评论功能。
基于java+springboot制作一个招聘小程序
12-24
基于Java Spring Boot制作一个招聘小程序，首先我们可以利用Spring Boot快速搭建项目框架，使用Spring框架进行项目的配置和管理，利用Spring的依赖注入和面向接口编程等特性进行开发。其次，可以使用Spring的MVC模式来设计前后端的数据交互和页面展示，结合Thymeleaf模板引擎来构建页面。同时，可以利用Spring的Security模块来实现用户认证和授权功能，确保招聘信息的安全和可靠性。 在小程序的功能设计上，我们可以实现用户注册登录、发布招聘信息、浏览招聘信息、投递简历等基本功能。可以使用MyBatis等持久层框架与数据库进行交互，实现招聘信息的持久化存储和管理。同时，结合Spring的AOP（面向切面编程）特性进行日志记录、异常处理等功能，提高程序的健壮性和可维护性。 另外，为了提升用户体验，我们可以利用前端技术如Vue.js、React等与Spring Boot进行整合，实现页面的动态交互和响应式设计。通过前后端分离的架构，可以提高小程序的性能和用户体验，同时降低开发和维护成本。 总之，基于Java Spring Boot制作一个招聘小程序可以充分利用Spring Boot的快速开发特性和丰富的生态系统，实现一个稳定、高效且易于维护的招聘平台，满足用户的招聘需求。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无语小咪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值