音乐后台管理系统

本文介绍了使用Vue.js和ElementUI构建的音乐后台管理系统,涵盖系统首页的可视化图表(ve-pie和ve-histogram)、歌手管理的增删改查、模糊查询、分页和文件上传功能。主要技术栈包括ElementUI、v-charts、SpringBoot和Mybatis。文中详细解析了v-charts的饼图和柱状图配置,以及前台分页的计算方法和LIKE查询的使用。
摘要由CSDN通过智能技术生成

此项目为本人学习Java之路所做的第二个小项目。

、项目描述:作为一个后台管理系统,共有系统首页、用户管理、歌手管理和歌单管理四大模块。

1.系统首页模块功能需要显示出用户数、歌手数、歌曲数,歌单数,需要通过可视化的形式显示出用户性别比例、歌曲类型分布、歌手性别比例、歌手国际分布。具体功能实现为(1)通过Axios向后台发送请求,分别获取到用户、歌手、歌曲,歌单的信息,将后台返回的数据分别保存到这些对象的数组中,通过.length获取到这些数组的长度以此来获取到用户数,歌曲数等。(2)页面中的可视化显示则是用Charts组件在对应的ElementUI的布局中使用ve-pie和ve-histogram元素来实现饼图和柱状图的。2.歌手管理模块功能为对歌手数据基本的增删改操作、根据歌手姓名模糊查询、批量删除歌手信息、头像上传,分页。具体功能实现为(1)根据name模糊查询,因为动态sql条件为前台传参过来的,所以需要用concat函数拼接后再查询。本项目主要用的分页方式为前台分页,即将数据库中的数据全部取出,然后通过计算进行分页。(2)通过el-pagination标签在其中绑定current-page、page-size等属性,在computed中进行计算。(3)批量删除:组件自带的方法@selection-change可以获取到我们选择的行的值,定义一个数组multipleSelection[]保存选择的行的值,遍历该数组,调用删除窗口弹出的方法,将遍历出的对象的id传给该方法,在该方法中将id复制给idx属性;调用删除的方法,向后台发送axios请求,参数传idx。(4)文件上传:

其主

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值