赞
踩
本项目通过结合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>
基于Java,Vue和UniApp安卓音乐APP管理系统软件
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。