一.前言
微信小程序开发环境和开发者生态已成熟，各种小程序深受用户喜爱。为满足微信使用者对于音乐播放器操作简单，不占内容的需求，提出一款基于微信小程序的音乐播放器的完整开发思路和设计实现方法，为后续开发者提供基础。本音乐播放器实现了音乐播放，资源搜索，图文简介等功能。实际运行结果表明，音乐播放器运行稳定，界面美观，操作简单，占内存少。
💗博主介绍：✌全网粉丝10W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者。
👇🏻 精彩专栏 推荐订阅👇🏻
计算机毕业设计精品项目案例-200套
🌟文末获取源码+数据库+文档🌟
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以和学长沟通，希望帮助更多的人
二.技术环境
jdk版本：1.8 及以上
ide工具：Eclipse或者 IDEA，微信小程序开发工具
数据库: mysql5.7 （必须5.7）
编程语言: Java
java框架：SpringBoot
maven: 3.6.1
详细技术：HTML+CSS+JAVA+SpringBoot+MYSQL+VUE+MAVEN+微信开发工具
三.功能设计
本基于微信小程序的会议室预约管理系统，主要包括管理员与用户两个权限角色，对于用户角色不同，所使用的功能模块相应不同。
管理员服务端；首页、个人中心、用户管理、公告管理、通知管理、音乐管理、音乐收藏管理、音乐评论管理等。
用户微信端：首页、公告信息、通知、音乐、音乐评论、论坛信息、修改密码等相应操作；
系统后台管理员功能结构图如下所示：
小程序架构是当下全新的，认可度高的系统构造技术。系统结构设计图通过绘制，效果展示如下：
四.数据设计
开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合，存储在一起的这些数据也是按照一定的组织方式进行的。目前，数据库能够服务于多种应用程序，则是源于它存储方式最佳，具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务，但它与程序之间也可以保持较高的独立性。总而言之，数据库经历了很长一段时间的发展，从最初的不为人知，到现在的人尽皆知，其相关技术也越发成熟，同时也拥有着坚实的理论基础。本系统主要实体属性图如下所示：
五.部分效果展示
5.1小程序端实现效果
用户登录，在登录页面填写账号、密码进行登录如下图所示。
用户进入首页能够查看最新的公告以及音乐信息，如下图所示。
用户进入到音乐详情界面，能够查看音乐基本信息，并能够进行音乐在线播放、留言、点赞、收藏等操作，如下图所示。
用户进入我的界面，包括了修改密码、公告信息、通知、音乐、音乐评论、论坛信息等，如下图所示。
5.2后台管理端实现效果
六.论文截图
七.部分功能代码
export default {
data() {
return {
user:{},//当前登录表的所有参数
sessionTable : uni.getStorageSync("nowTable"),//登录账户所在表名
role : uni.getStorageSync("role"),//权限
userId:uni.getStorageSync("userid"),//当前登录人的id
/*其他 开始*/
autoplaySwiper: false ? true : false,
intervalSwiper: false ? $template2.front.base.swiper.autoplay.delay : 5000,
btnColor: ['#67c23a', '#909399', '#e6a23c', '#f56c6c', '#356c6c', '#3498db', '#f093a9',
'#a7c23a', '#104eff', '#90f794', '#a21233', '#8e44ad'
],
mescroll: null, //mescroll实例对象
downOption: {
auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
},
upOption: {
noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
textNoMore: '~ 没有更多了 ~',
},
hasNext: true,
/*其他 结束*/
yinyueId: '',
detail: {},//本页面数据对象
swiperList: [],//主图
collectionFlag: 0,//收藏
/*赞踩 开始*/
thumbsupFlag: 0,
crazilyFlag: 0,
/*赞踩 结束*/
/*留言评论评分相关 开始*/
totalScore: 0, //总评分
scoreData: 0, //评分
commentData: null, //留言
commentList: [], //留言数据集合
/*留言评论评分相关 结束*/
erweimaText: "",
}
},
computed: {
baseUrl() {
return this.$base.url;
},
},
async onLoad(options) {
this.yinyueId = options.id;
},
async onShow(options) {
// 渲染数据
this.init();
//获取收藏信息
this.getyinyueCollection()
let table = uni.getStorageSync("nowTable");
// 获取用户信息
let res = await this.$api.session(table);
this.user = res.data;
this.btnColor = this.btnColor.sort(() => {
return (0.5 - Math.random());
});
this.getThumbsup();
let cleanType = uni.getStorageSync('pingluenStateState')
if (cleanType) {
uni.removeStorageSync('pingluenStateState')
this.mescroll.num = 1
this.upCallback(this.mescroll)
}
},
destroyed: function() {
//window.clearInterval(this.inter);
},
methods: {
//打开评分留言窗口
async onScoreOrComment() {
this.commentData = null
this.scoreData = 0
this.$refs.deliver.open()
},
// 关闭评分留言窗口
closeScoreOrComment() {
this.$refs.deliver.close()
},
//提交数据
async submitData() {
if (1 == 2)
return this.$utils.msg('不会进入的地方，如果进来请联系管理员');
else if (this.commentData == null || this.commentData == '')
return this.$utils.msg('留言不能为空');
let data = {
yinyueId: this.yinyueId,
yonghuId: this.user.yonghuId,
yinyueLiuyanPingfenNumber: this.scoreData,
yinyueLiuyanText: this.commentData,
}
await this.$api.save(`yinyueLiuyan`, data);
this.$refs.deliver.close()
this.mescroll.num = 1
this.upCallback(this.mescroll)
},
//返回
async fanhui(){
this.$utils.tab("list")
},
//下载
download(url) {
let _this = this;
uni.downloadFile({
url: url,
success: (res) => {
if (res.statusCode === 200) {
_this.$utils.msg('下载成功');
// window.open(url);
}
}
});
},
// 获取详情
async init() {
let res = await this.$api.detail('yinyue', this.yinyueId);
this.detail = res.data
this.detail.yinyueContent = this.detail.yinyueContent.replace("<img","<img class=\"daxiao\"").replace("src=\"upload/","src=\""+this.$base.url+"upload/");
// 主图
this.swiperList = this.detail.yinyuePhoto ? this.detail.yinyuePhoto.split(",") : [];
},
/* && !nameList?seq_contains('zuowei_number')*/
// 收藏
async getyinyueCollection() {
let params = {
page: 1,
limit: 1,
yinyueId: this.yinyueId,
yinyueCollectionTypes:'1'
}
let res = await this.$api.page(`yinyueCollection`, params);
if(res.data.list.length > 0){
this.collectionFlag = res.data.list.length;
}else{
this.collectionFlag = 0
}
},
async shoucang() {
let _this = this;
let params = {
page: 1,
limit: 1,
yinyueId: _this.detail.id,
yonghuId: _this.user.id,
yinyueCollectionTypes:'1'
}
let res = await _this.$api.list(`yinyueCollection`, params);
if (res.data.list.length == 1) {
let yinyueCollectionId = res.data.list[0].id;
uni.showModal({
title: '提示',
content: '是否取消',
success: async function(res) {
if (res.confirm) {
await _this.$api.del('yinyueCollection', JSON.stringify([yinyueCollectionId]));
_this.$utils.msg('取消成功');
_this.getyinyueCollection();
}
}
});
return;
}
uni.showModal({
title: '提示',
content: '是否收藏',
success: async function(res) {
if (res.confirm) {
await _this.$api.add('yinyueCollection', {
yonghuId: _this.user.id,
yinyueId: _this.detail.id,
yinyueCollectionTypes:1
});
_this.$utils.msg('收藏成功');
_this.getyinyueCollection();
}
}
});
},
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
/*下拉刷新的回调 */
downCallback(mescroll) {
this.hasNext = true
mescroll.resetUpScroll()
},
/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
async upCallback(mescroll) {
let res = await this.$api.list('yinyueLiuyan', {
page: mescroll.num,
limit: mescroll.size,
yinyueId: this.yinyueId
});
// 如果是第一页数据置空
if (mescroll.num == 1) this.commentList = [];
this.commentList = this.commentList.concat(res.data.list);
if (res.data.list.length == 0) this.hasNext = false;
mescroll.endSuccess(mescroll.size, this.hasNext);
},
// 获取赞踩
async getThumbsup() {
let _this = this;
let params = {
page: 1,
limit: 1,
yinyueId: _this.detail.id,
yonghuId: _this.user.id,
}
let res = await _this.$api.list(`yinyueCollection`, params);
if (res.data.list.length > 0) {
if (res.data.list[0].yinyueCollectionTypes == '2') {
_this.thumbsupFlag = true;
}
if (res.data.list[0].yinyueCollectionTypes == '3') {
_this.crazilyFlag = true;
}
}
},
// 点赞
async zan() {
let _this = this;
let params = {
page: 1,
limit: 1,
yinyueId: _this.detail.id,
yonghuId: _this.user.id,
yinyueCollectionTypes: '2',
}
let res = await _this.$api.list(`yinyueCollection`, params);
if (res.data.list.length > 0) {
let yinyueCollectionId = res.data.list[0].id;
uni.showModal({
title: '提示',
content: '是否取消点赞',
success: async function(res) {
if (res.confirm) {
await _this.$api.del('yinyueCollection', JSON.stringify([yinyueCollectionId]));
_this.detail.zanNumber = parseInt(_this.detail.zanNumber) - 1;
await _this.$api.update('yinyue', _this.detail);
_this.$utils.msg('取消成功');
_this.thumbsupFlag = false;
}
}
});
return;
}
uni.showModal({
title: '提示',
content: '是否点赞',
success: async function(res) {
if (res.confirm) {
await _this.$api.add('yinyueCollection', {
yonghuId: _this.user.id,
yinyueId: _this.detail.id,
yinyueCollectionTypes: '2'
});
_this.detail.zanNumber = parseInt(_this.detail.zanNumber) + 1;
await _this.$api.update('yinyue', _this.detail);
_this.$utils.msg('点赞成功');
_this.thumbsupFlag = true;
}
}
});
},
// 踩
async cai() {
let _this = this;
let params = {
page: 1,
limit: 1,
yinyueId: _this.detail.id,
yonghuId: _this.user.id,
yinyueCollectionTypes: '3',
}
let res = await _this.$api.list(`yinyueCollection`, params);
if (res.data.list.length > 0) {
let yinyueCollectionId = res.data.list[0].id;
uni.showModal({
title: '提示',
content: '是否取消点踩',
success: async function(res) {
if (res.confirm) {
await _this.$api.del('yinyueCollection', JSON.stringify([yinyueCollectionId]));
_this.detail.caiNumber = parseInt(_this.detail.caiNumber) - 1;
await _this.$api.update('yinyue', _this.detail);
_this.$utils.msg('取消成功');
_this.crazilyFlag = false;
}
}
});
return;
}
uni.showModal({
title: '提示',
content: '是否点踩',
success: async function(res) {
if (res.confirm) {
await _this.$api.add('yinyueCollection', {
yonghuId: _this.user.id,
yinyueId: _this.detail.id,
yinyueCollectionTypes: '3'
});
_this.detail.caiNumber = parseInt(_this.detail.caiNumber) + 1;
await _this.$api.update('yinyue', _this.detail);
_this.$utils.msg('点踩成功');
_this.crazilyFlag = true;
}
}
});
},
async baoming() {
let _this = this;
uni.showModal({
title: '提示',
content: '确定要报名么',
success: async function(res) {
if (res.confirm) {
await _this.$api.add('yinyueYuyue', {
yonghuId: _this.user.id,
yinyueId: _this.detail.id,
});
_this.$utils.msg('报名成功');
_this.$utils.jump('/pages/yinyueYuyue/list');
}
}
});
},
async onErweima() {//打开模态框
// this.erweimaText = "画师名称:["+this.detail.huashiName+"]所属画院:["+this.detail.huayuanName+"]画师称号:["+this.detail.huashiChenghao+"]画师性别:["+this.detail.sexValue+"]"
this.erweimaText = "二维码内容";
this.$refs.erweimaModal.open()
},
async closeErweima() {//关闭模态框
this.$refs.erweimaModal.close()
},
async saveErweima() {//保存二维码
uni.showLoading({title: '保存中',mask: true});
const ref = this.$refs['qr'];
ref.save({
success: res => {
uni.hideLoading();
uni.showToast({icon: 'success',title: '保存成功'});
},
fail: err => {
uni.showToast({icon: 'none',title: JSON.stringify(err)});
}
});
},
}
}
扫一扫
5438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
