摘要

本项目通过结合Java、SpringBoot、Vue和UniApp多种技术栈，设计并实现了一个跨平台的音乐APP。后端服务基于SpringBoot框架构建，利用其快速开发和简便部署的特性，实现了包括用户认证、歌曲管理、播放列表和音乐推荐等核心功能。RESTful API的设计使得服务能够灵活地与前端交互。前端界面采用Vue.js框架开发，它提供了响应式的数据绑定和组件化开发模式，确保了用户界面的流畅性和可维护性。同时，借助UniApp框架，将网页端的应用转换为可以部署Android平台上的原生应用，实现了真正的跨平台体验。整体而言，该音乐APP不仅满足了基本的音乐播放需求，而且提供了高性能、高可用性和良好的用户体验，展示了多技术整合在现代Web应用开发中的强大潜力。

实现的功能

本系统的功能应该包括：用户注册登录、首页、视频、社区、我的、后台管理等六个模块。

注册登录：未注册用户可以填写相关信息后注册，有了账号后可以登录APP；

首页模块：主要实现对歌曲和歌手进行搜索、音乐播放和暂停、音乐收藏等功能；

视频模块：主要实现MV的播放和暂停、对MV进行评论和收藏等功能；

社区模块：主要实现一个社交功能，用户可以发表图文，并且可以对图文进行评论等功能；

我的模块：主要实现更改个人信息、查看收藏的歌曲、查看关注列表等功能。

后台管理模块：主要实现对歌曲、歌手、用户、评论、轮播图、社区动态等内容进行管理，实现数据的可操作化。

用到的技术

后端：Java语言的SpringBoot框架、MySql数据库、Maven依赖管理等；

前端：Vue.js语法的UniApp框架，可编译成安卓APP。

部分代码展示

<template>
	<view>
		<view class="warp">
			<u-form labelPosition="top" label-width="150" :model="form" ref="uForm">
				<u-form-item label-position="top" prop="title" borderBottom label="动态标题">
					<u-input v-model="form.title" placeholder="请输入动态标题"/>
				</u-form-item>
				<u-form-item label-position="top" prop="content" borderBottom label="动态内容">
					<u-input type="textarea" v-model="form.content" placeholder="请输入动态内容"/>
				</u-form-item>
				
				<view class="u-flex u-m-t-25 u-p-b-25 u-border-bottom" style="display: flex;">
					<view class="item">
						<ygy-upload-img title="图片1" :size="200" :num="1" :iconCloseStyle="info.iconCloseStyle"
							@saveImg="getImgList($event,'pic')"></ygy-upload-img>
					</view>
					<view class="item">
						<ygy-upload-img title="图片2" :size="200" :num="1" :iconCloseStyle="info.iconCloseStyle"
							@saveImg="getImgList($event,'pic2')"></ygy-upload-img>
					</view>
					<view class="item">
						<ygy-upload-img title="图片3" :size="200" :num="1" :iconCloseStyle="info.iconCloseStyle"
							@saveImg="getImgList($event,'pic3')"></ygy-upload-img>
					</view>
				</view>

			</u-form>
			<view class="buttonBox">
				<u-button type="primary" text="提交" @tap="sub()">提交</u-button>
				<view style="margin-top: 40rpx;"></view>
				<u-button @tap="back()" :plain="true"  type="primary" text="返回">返回</u-button>
			</view>
		</view>
		
		<!-- <picker @change="radioGroupChange" :value="index" :range="array">
			<view class="uni-input">{{parkInfo[index].name}}({{parkInfo[index].orgName}})</view>
		</picker> -->
		
	</view>
</template>

<script>
	import ygyUploadImg from '@/components/ygy-upload-img/ygy-upload-img.vue'
	import appRequest from "@/common/appRequestUrl.js"
	import base64 from "@/common/base64.js"
	export default {
		components: {
			ygyUploadImg
		},
		data() {
			return {
				array: [],
				index:0,
				parkInfo:[],
				selItem:{},
				form:{
					title:"",
					content:"",
					pic:"",
					pic2:"",
					pic3:""
				},
				show:true,
				info: {
					iconCloseStyle: { //关闭图标样式
						fontSize: '60rpx',
						color: "#f40"
					}
				}
			};
		},
		onLoad(){
			
		},
		methods:{
			back(){
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},
			getImgList(arr, name) {
				this.form[name] = arr[0];
			},
			radioGroupChange(e){
				this.form.sex = e;
			},
			sub(){
				let _this = this;
				
				if(_this.form.title =="" || _this.form.content ==""){
					uni.showToast({
						title:"请填写完整",
						icon:"none"
					})
					
					return;
				}
				
				appRequest.request({
					method: "POST",
					data: _this.form,
					url: appRequest.urlMap.addNmArticle,
					success: function(res) {
						if(res.data.code == 200){
							uni.showModal({
								title:"信息",
								content:"发布成功！",
								showCancel:false,
								success:function(){
									uni.reLaunch({
										url:"/pages/index/index"
									})
								}
							})
						}else{
							uni.showModal({
								title:"信息",
								content:res.data.msg,
								showCancel:false,
								success:function(){
									
								}
							})
						}
						
					},
					fail: function(res) {
						console.log(res)
						_this.$api.msg("请求异常");
						// _this.logining = false;
						// _this.data.pass = "";
					}
				})
				
			},
			
		},onReady() {
			
		}
	}
</script>

演示视频