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

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

一、小程序

1.1 项目创建

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

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

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

4. 下载安装微信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","[email protected]"))
                //用于定义服务的域名
                //.termsOfServiceUrl("")
                .version("1.0") //可以用来定义版本
                .build();
    }

接口测试

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

接口组定义

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

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

接口定义

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

• @ApiModel：用来标类

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

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

2.5 常用字段类型

字段类型	所占字节	存储范围	最大存储值	使用场景
TINYINT	1	-128~127	127	存储小整数
INT	4	-2147483648~2147483647	2147483647	存储大整数
BIGINT	8	-9223372036854775808~9223372036854775807	9223372036854775807	存储极大整数
DECIMAL	可变长度			存储精度要求高的数值
CHAR	固定长度	最多255字节	255个字符	存储长度固定的字符串
VARCHAR	可变长度	最多65535字节	65535个字符	存储长度不固定的字符串
DATETIME	8	‘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请求在控制器定义的接口