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

拼搏现实的明天。 2023-10-10 17:49 85阅读 0赞

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

![1edaa3d237ae4171aa5027ba08564a9e.png][] ![99568412c6db4d50aa5af396608be82a.png][] ![441c066f296c4b2e9a5b8e423e31f24a.png][] ![3f6794a831a94ea4b37525d8d9b70dd2.png][]

####  ####

*  一、小程序
 *   *  1.1 项目创建
     *  1.2 首页
     *   *  轮播图
         *  热门歌曲
         *  iconfont图标引入
     *  1.3 热门歌单
     *   *  歌单首页
         *   *  歌单详情
         *  歌曲详情
     *  1.4 个人中心页
 *  二、API
 *   *  2.1 SpringBoot框架搭建
     *  2.2 实体映射创建Mapper
     *  2.3 接口封装
     *  2.4 整合Swagger
     *   *  添加依赖
         *  配置Swagger
         *  接口测试
         *  接口组定义
         *  接口定义
     *  2.5 常用字段类型
 *  三、管理端
 *   *  3.1 项目创建
     *  3.2 页面设计
     *  3.3 接口调用

## 一、小程序 ##

### 1.1 项目创建 ###

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

![在这里插入图片描述][9946bac60048448f82d71fdb79866aef.png]

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

![在这里插入图片描述][502837bee0d24ab690f3531775b6b23d.png]  
![在这里插入图片描述][f082a24489b044fdacecacfdb8dd4340.png]

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

![在这里插入图片描述][aa33a652ea144a5a976b1efdb991a6bd.png]

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

![在这里插入图片描述][542198eb818341d38aa0a5b0c3125dd2.png]  
![在这里插入图片描述][87996fcf624545d489b5bcd5b463773c.png]

### 1.2 首页 ###

![在这里插入图片描述][67ba9478ef5b45919adee71d0132feb4.png]

#### 轮播图 ####

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

#### 热门歌曲 ####

> 使用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引入图标  
> [阿里巴巴矢量图标图点此跳转][Link 1]

![在这里插入图片描述][1e557c340a8340b6aac1bfc95b470f1e.png]

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

![在这里插入图片描述][6364ee5fe7984771b33e3cf06879773a.png]

### 1.3 热门歌单 ###

#### 歌单首页 ####

![在这里插入图片描述][874a9e78e78341e38b82cf7081175a42.png]

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

<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;
    
    }

##### 歌单详情 #####

![在这里插入图片描述][26656f4bb92248a090034cfb7410bae9.png]

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

<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>

#### 歌曲详情 ####

![在这里插入图片描述][241f9c2f956e4887a5cdb4c6389134f8.png]

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

<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 个人中心页 ###

![在这里插入图片描述][4d0b7dd554724a8392d6bdfd3d590862.png]

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

<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】

![在这里插入图片描述][42800a8d5c6d4780b47dc3321f2c2235.png]

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

![在这里插入图片描述][038daa8c25954647b08f1c2c5761940e.png]  
![在这里插入图片描述][62a0b5f9cb9148568376e8bd8bc06798.png]

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

![在这里插入图片描述][4ee8ad6935a24b1eafad9b896a247f08.png]

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

![在这里插入图片描述][9031afcdb9844d24a683c59df26ff36d.png]

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

![在这里插入图片描述][049648b03749454abd4d3a16e1e375a7.png]

### 2.2 实体映射创建Mapper ###

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

![这里是引用][988e3741600a422e8dac5d130e1db4de.png]

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

![在这里插入图片描述][60e9a58822ce40fcb5689dd1422bc17e.png]

> 创建控制器Controller

![在这里插入图片描述][28ae7eb85337456a9b6ff33bbfd7d6f4.png]

![在这里插入图片描述][4ad1c1da3e3f4500a7192feba611a22f.png]  
![在这里插入图片描述][46a5cf42f34145279ba2b2a1306cb36e.png]  
![在这里插入图片描述][5f21888bbfda47a5994215752059fb6c.png]

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

![在这里插入图片描述][04f2caf6f37548d8a89f27993ee56a70.png]

### 2.4 整合Swagger ###

#### 添加依赖 ####

> 先导入spring boot的web包

<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

![在这里插入图片描述][9290248b26354196a6eb4e91a3e08b9d.png]

#### 接口组定义 ####

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

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

![在这里插入图片描述][7c11a171d8f3407da1dd07fd8fc9ccde.png]

#### 接口定义 ####

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

*  @ApiModel：用来标类
 *  常用配置项：value：实体类简称；description：实体类说明
 *  @ApiModelProperty：用来描述类的字段的含义。

### 2.5 常用字段类型 ###

<table> 
 <thead> 
  <tr> 
   <th>字段类型</th> 
   <th>所占字节</th> 
   <th>存储范围</th> 
   <th>最大存储值</th> 
   <th>使用场景</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>TINYINT</td> 
   <td>1</td> 
   <td>-128~127</td> 
   <td>127</td> 
   <td>存储小整数</td> 
  </tr> 
  <tr> 
   <td>INT</td> 
   <td>4</td> 
   <td>-2147483648~2147483647</td> 
   <td>2147483647</td> 
   <td>存储大整数</td> 
  </tr> 
  <tr> 
   <td>BIGINT</td> 
   <td>8</td> 
   <td>-9223372036854775808~9223372036854775807</td> 
   <td>9223372036854775807</td> 
   <td>存储极大整数</td> 
  </tr> 
  <tr> 
   <td>DECIMAL</td> 
   <td>可变长度</td> 
   <td></td> 
   <td></td> 
   <td>存储精度要求高的数值</td> 
  </tr> 
  <tr> 
   <td>CHAR</td> 
   <td>固定长度</td> 
   <td>最多255字节</td> 
   <td>255个字符</td> 
   <td>存储长度固定的字符串</td> 
  </tr> 
  <tr> 
   <td>VARCHAR</td> 
   <td>可变长度</td> 
   <td>最多65535字节</td> 
   <td>65535个字符</td> 
   <td>存储长度不固定的字符串</td> 
  </tr> 
  <tr> 
   <td>DATETIME</td> 
   <td>8</td> 
   <td>‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’</td> 
   <td>‘9999-12-31 23:59:59’</td> 
   <td>存储日期和时间</td> 
  </tr> 
 </tbody> 
</table>

## 三、管理端 ##

### 3.1 项目创建 ###

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

![在这里插入图片描述][93ebfc5bed5d46da87a7811868812be7.png]

### 3.2 页面设计 ###

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

![在这里插入图片描述][8287c3657ebd4046a5876a9e3a4c1d25.png]

// 滚动条
        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请求在控制器定义的接口

![在这里插入图片描述][103fe914bb0a4ab49e91db206d64f0d6.png]

![在这里插入图片描述][62d0009398344ed9b9d9f6bec73d9a11.png]

[1edaa3d237ae4171aa5027ba08564a9e.png]: https://img-blog.csdnimg.cn/1edaa3d237ae4171aa5027ba08564a9e.png
[99568412c6db4d50aa5af396608be82a.png]: https://img-blog.csdnimg.cn/99568412c6db4d50aa5af396608be82a.png
[441c066f296c4b2e9a5b8e423e31f24a.png]: https://img-blog.csdnimg.cn/441c066f296c4b2e9a5b8e423e31f24a.png
[3f6794a831a94ea4b37525d8d9b70dd2.png]: https://img-blog.csdnimg.cn/3f6794a831a94ea4b37525d8d9b70dd2.png
[9946bac60048448f82d71fdb79866aef.png]: https://img-blog.csdnimg.cn/9946bac60048448f82d71fdb79866aef.png
[502837bee0d24ab690f3531775b6b23d.png]: https://img-blog.csdnimg.cn/502837bee0d24ab690f3531775b6b23d.png
[f082a24489b044fdacecacfdb8dd4340.png]: https://img-blog.csdnimg.cn/f082a24489b044fdacecacfdb8dd4340.png
[aa33a652ea144a5a976b1efdb991a6bd.png]: https://img-blog.csdnimg.cn/aa33a652ea144a5a976b1efdb991a6bd.png
[542198eb818341d38aa0a5b0c3125dd2.png]: https://img-blog.csdnimg.cn/542198eb818341d38aa0a5b0c3125dd2.png
[87996fcf624545d489b5bcd5b463773c.png]: https://img-blog.csdnimg.cn/87996fcf624545d489b5bcd5b463773c.png
[67ba9478ef5b45919adee71d0132feb4.png]: https://img-blog.csdnimg.cn/67ba9478ef5b45919adee71d0132feb4.png
[Link 1]: https://www.iconfont.cn/
[1e557c340a8340b6aac1bfc95b470f1e.png]: https://img-blog.csdnimg.cn/1e557c340a8340b6aac1bfc95b470f1e.png
[6364ee5fe7984771b33e3cf06879773a.png]: https://img-blog.csdnimg.cn/6364ee5fe7984771b33e3cf06879773a.png
[874a9e78e78341e38b82cf7081175a42.png]: https://img-blog.csdnimg.cn/874a9e78e78341e38b82cf7081175a42.png
[26656f4bb92248a090034cfb7410bae9.png]: https://img-blog.csdnimg.cn/26656f4bb92248a090034cfb7410bae9.png
[241f9c2f956e4887a5cdb4c6389134f8.png]: https://img-blog.csdnimg.cn/241f9c2f956e4887a5cdb4c6389134f8.png
[4d0b7dd554724a8392d6bdfd3d590862.png]: https://img-blog.csdnimg.cn/4d0b7dd554724a8392d6bdfd3d590862.png
[42800a8d5c6d4780b47dc3321f2c2235.png]: https://img-blog.csdnimg.cn/42800a8d5c6d4780b47dc3321f2c2235.png
[038daa8c25954647b08f1c2c5761940e.png]: https://img-blog.csdnimg.cn/038daa8c25954647b08f1c2c5761940e.png
[62a0b5f9cb9148568376e8bd8bc06798.png]: https://img-blog.csdnimg.cn/62a0b5f9cb9148568376e8bd8bc06798.png
[4ee8ad6935a24b1eafad9b896a247f08.png]: https://img-blog.csdnimg.cn/4ee8ad6935a24b1eafad9b896a247f08.png
[9031afcdb9844d24a683c59df26ff36d.png]: https://img-blog.csdnimg.cn/9031afcdb9844d24a683c59df26ff36d.png
[049648b03749454abd4d3a16e1e375a7.png]: https://img-blog.csdnimg.cn/049648b03749454abd4d3a16e1e375a7.png
[988e3741600a422e8dac5d130e1db4de.png]: https://img-blog.csdnimg.cn/988e3741600a422e8dac5d130e1db4de.png
[60e9a58822ce40fcb5689dd1422bc17e.png]: https://img-blog.csdnimg.cn/60e9a58822ce40fcb5689dd1422bc17e.png
[28ae7eb85337456a9b6ff33bbfd7d6f4.png]: https://img-blog.csdnimg.cn/28ae7eb85337456a9b6ff33bbfd7d6f4.png
[4ad1c1da3e3f4500a7192feba611a22f.png]: https://img-blog.csdnimg.cn/4ad1c1da3e3f4500a7192feba611a22f.png
[46a5cf42f34145279ba2b2a1306cb36e.png]: https://img-blog.csdnimg.cn/46a5cf42f34145279ba2b2a1306cb36e.png
[5f21888bbfda47a5994215752059fb6c.png]: https://img-blog.csdnimg.cn/5f21888bbfda47a5994215752059fb6c.png
[04f2caf6f37548d8a89f27993ee56a70.png]: https://img-blog.csdnimg.cn/04f2caf6f37548d8a89f27993ee56a70.png
[9290248b26354196a6eb4e91a3e08b9d.png]: https://img-blog.csdnimg.cn/9290248b26354196a6eb4e91a3e08b9d.png
[7c11a171d8f3407da1dd07fd8fc9ccde.png]: https://img-blog.csdnimg.cn/7c11a171d8f3407da1dd07fd8fc9ccde.png
[93ebfc5bed5d46da87a7811868812be7.png]: https://img-blog.csdnimg.cn/93ebfc5bed5d46da87a7811868812be7.png
[8287c3657ebd4046a5876a9e3a4c1d25.png]: https://img-blog.csdnimg.cn/8287c3657ebd4046a5876a9e3a4c1d25.png
[103fe914bb0a4ab49e91db206d64f0d6.png]: https://img-blog.csdnimg.cn/103fe914bb0a4ab49e91db206d64f0d6.png
[62d0009398344ed9b9d9f6bec73d9a11.png]: https://img-blog.csdnimg.cn/62d0009398344ed9b9d9f6bec73d9a11.png