2022首次更文挑战第5天 | 基于SSM的音乐系统教程04歌曲列表功能模块

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

这一篇，主要介绍音乐系统的歌曲的功能模块，歌曲列表显示，增加歌曲，删除歌曲，修改歌曲等，另外还会播放音乐，显示歌词，背景图等。 歌曲列表是显示所有的歌曲，歌曲含有歌曲名称，歌曲时间，歌手等等。

一、歌曲列表功能

1、简单的歌曲列表功能，主要是查询歌曲功能

PageHelper.startPage(page, rows);
list = mlistMapper.selectByExample(ex);
result.put("rows", list);
PageInfo<Mlist> pageInfo = new PageInfo<Mlist>(list);
result.put("total", pageInfo.getTotal());

2、歌曲列表删除功能

Mlist mlist = new Mlist();
mlist.setIsdelete("1");
mlist.setId(Integer.parseInt(idArr[i]));
mlistMapper.updateByPrimaryKeySelective(mlist);

简单的逻辑删除功能

3、修改和保存功能

判断id存不存在，如果存在，就进行修改，如果不存在，就新增

if(StringUtils.isNotEmpty(mlist.getId())){
	mlistMapper.updateByPrimaryKeySelective(mlist);
}else{
	mlist.setIsdelete("0");
	mlist.setCreatedate(new Date());
	mlistMapper.insert(mlist);
}

二、前端代码如下

实现歌曲列表功能

function searchList(){
	$('#dg').datagrid('load',{
		name:$("#s_name").val(),
	});
}

添加音乐列表功能

function openAddDialog(){
	$("#dlg").dialog("open").dialog("setTitle","添加信息");
	url="mlist2/save.do";
}

修改歌曲功能

function openModifyDialog(){
	var selectedRows=$("#dg").datagrid('getSelections');
	if(selectedRows.length!=1){
		$.messager.alert('系统提示','请选择一条要编辑的数据！');
		return;
	}
	var row=selectedRows[0];
	$("#dlg").dialog("open").dialog("setTitle","修改信息");
	$("#fm").form("load",row);
	url="mlist2/save.do?id="+row.id;
}

保存歌曲功能

function saveBean(){
	$("#fm").form("submit",{
		url:url,
		onSubmit:function(){
			return $(this).form("validate");
		},
		success:function(result){
			console.log(result);
			result = eval("("+result+")");
			if(result.code != "0"){
				$.messager.alert('系统提示',"<font color=red>"+result.errMsg+"</font>");
				return;
			}else{
				$.messager.alert('系统提示','保存成功');
				closeAddDialog();
				$("#dg").datagrid("reload");
			}
		}
	});
}

三、播放音乐功能

实现下面图片的功能，背景图，音乐播放

1、添加音乐播放功能

<audio style='' controls src='${basePath}/" + data.url + "' autoplay loop></audio>

音乐播放功能，添加个音乐标签，自带音乐播放功能。 <audio> 标签定义声音，比如音乐或其他音频流。 简单又快捷。

2、插入背景图

<img src='${basePath}/" + data.cover + "' style='width:360px;height:300px;'>

<img>标签定义图片，可以在音乐播放台正中间插入图片，作为背景图，而width和height定义图片的宽和高。

3、示例

我们插入一条新歌曲，插入背景图，实现效果如下 以上是歌曲列表的显示，删除，修改和保存功能模块，另外，认识音乐的标签模块，比如播放音乐，插入背景图等等。