基于Java,SpringBoot,Vue和UniApp音乐APP安卓软件毕业设计，附源码

摘要

本项目通过结合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>

演示视频连接

源码展示连接