欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > SSM虾米音乐项目3-后台流派模块的增删改

SSM虾米音乐项目3-后台流派模块的增删改

2025/10/26 7:44:53 来源:https://blog.csdn.net/2301_81453175/article/details/144338234  浏览:    关键词:SSM虾米音乐项目3-后台流派模块的增删改

整体查询到的页面

 <div class="widget-header"><i class="icon-list-ol"></i><h3>搜索条件</h3></div><div class="widget-content"><fieldset id="find"><div class="control-group"><label for="tname" class="control-label">流派</label><div class="controls form-group"><div class="input-group"><span class="input-group-addon"><iclass="icon-music"></i></span><input type="text" placeholder="如:摇滚" name="tname" value="${mq.tname}"id="tname" class="form-control"/></div></div></div></fieldset><div class="form-actions text-right"><div><button class="btn btn-primary" id="search">搜索</button><button id="addSong" class="btn btn-primary" data-target="#myModal2"type="button">添加流派</button><button id="toggleSearch" flag="2" class="btn btn-default" type="button">收缩↑</button></div></div></div><div class="widget-content"><div class="body"><table class="table table-striped table-images"style="color: white;font-size: 14px"><thead><tr><th class="hidden-xs-portrait">序号</th><th class="hidden-xs">流派</th><th class="hidden-xs">描述</th><th></th></tr></thead><tbody><c:forEach items="${page.list}" var="mtype" varStatus="status"><tr><td class="hidden-xs-portrait">${mtype.tid}</td><td class="hidden-xs-portrait">${mtype.tname}</td><td class="hidden-xs"> ${mtype.tdesc} </td><td><button  class="btn btn-sm btn-primary" type="button" modify tid="${mtype.tid}" > 修改</button><button data-toggle="button" class="btn btn-sm btn-warning" tid="${mtype.tid}"> 删除</button></td></tr></c:forEach></tbody></table><jsp:include page="pagination.jsp"></jsp:include></div>
</div>

 1.添加操作

<button id="addSong" class="btn btn-primary" data-target="#myModal2"type="button">添加流派</button>

 添加我们使用layui的弹出层,预先定义好对应的div

var pop;
$("#addSong").click(function () {//创建一个弹出框pop = layer.open({//指定内容是一个 DOM 元素type: 1,//设置弹窗的大小area: [600, 350],//指定弹出框中的内容为 ID 为 mtypePop 的元素content: $('#mtypePop')});})

对应的弹窗

<div id="mtypePop" style="margin-right: 50px;margin-top: 50px; display: none"><form id="addMtypeForm" class="layui-form" method="post" action="/mtype/addMtype" lay-filter="example"><div class="layui-form-item"><label class="layui-form-label">流派</label><div class="layui-input-block"><input type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="请输入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">描述</label><div class="layui-input-block"><textarea style="color: black;" placeholder="请输入流派描述" class="layui-textarea" name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">添加流派</button></div></div></form>
</div>

 点击添加流派的按钮,触发AJAX请求

//使用 Layui 的表单模块
layui.use('form', function () {var form = layui.form;//监听 ID 为 demo1 的表单提交事件,并将提交的数据传递给回调函数 dataform.on('submit(demo1)', function (data) {//layer.msg(JSON.stringify(data.field));$.ajax({url: "/mtype/addMtype",type: "post",//传递表单数据data: data.field,dataType: "text",success: function (text) {if (text == "success") {layer.msg("添加成功");layer.close(pop);}}})//阻止页面跳转  防止同步提交  使用ajax异步提交表单return false;});
});

将要添加的数据传递给后端

后端的Controller

//添加流派
@ResponseBody
@PostMapping("/addMtype")
public String addMtype(Mtype mt){mtypeService.insert(mt);return "success";
}

如果返回的字符串匹配,会显示“添加成功”的信息,并且进行页面刷新

Mapper映射文件进行相应的SQL操作

2.修改操作

<button  class="btn btn-sm btn-primary" type="button" modify tid="${mtype.tid}" > 修改</button>

点击修改按钮,跳出弹窗

跳出弹窗的JS逻辑

var pop1;
$("[modify]").click(function () {var tid = $(this).attr("tid");$.ajax({//通过ID获取对应的流派信息url: "/mtype/getMtype",type: "post",data: {tid:tid},dataType: "json",success: function (jsonObj) {$("#tid").val(jsonObj.tid);$("#ptname").val(jsonObj.tname);$("#ptdesc").val(jsonObj.tdesc);}})pop1 = layer.open({//打开弹窗type: 1,area: [600, 350],content: $('#mtypePop1')});})

 弹出层的div,修改的弹窗,通过提交表单的方式传递给前台

<div id="mtypePop1" style="margin-right: 50px;margin-top: 50px; display: none"><form id="updateMtypeForm" class="layui-form" method="post" action="/mtype/updateMtype" lay-filter="example"><input type="hidden" name="tid" id="tid"><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input id="ptname" type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="请输入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea id="ptdesc" style="color: black;" placeholder="请输入流派描述" class="layui-textarea"name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo2">修改流派</button></div></div></form>
</div>

修改的弹出层 js逻辑

var pop1;
$("[modify]").click(function () {var tid = $(this).attr("tid");$.ajax({url: "/mtype/getMtype",type: "post",data: {tid:tid},dataType: "json",success: function (jsonObj) {$("#tid").val(jsonObj.tid);$("#ptname").val(jsonObj.tname);$("#ptdesc").val(jsonObj.tdesc);}})pop1 = layer.open({type: 1,area: [600, 350],content: $('#mtypePop1')});})

根据ID信息查询对应的流派信息,返回到修改的页面上

@ResponseBody
@PostMapping("/getMtype")
public Mtype getMtype(int tid){Mtype mtype=mtypeService.selectByPrimaryKey(tid);return mtype;
}

对应的弹出层

<div id="mtypePop1" style="margin-right: 50px;margin-top: 50px; display: none"><form id="updateMtypeForm" class="layui-form" method="post" action="/mtype/updateMtype" lay-filter="example"><input type="hidden" name="tid" id="tid"><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input id="ptname" type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="请输入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea id="ptdesc" style="color: black;" placeholder="请输入流派描述" class="layui-textarea"name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo2">修改流派</button></div></div></form>
</div>

进行修改逻辑的js

layui.use('form', function () {var form = layui.form;//监听提交form.on('submit(demo2)', function (data) {//layer.msg(JSON.stringify(data.field));$.ajax({url: "/mtype/updateMtype",type: "post",data: data.field,dataType: "text",success: function (text) {if (text == "success") {layer.msg("修改成功");layer.close(pop1);$("#txForm").submit();}}})return false;});
})

后台Controller

@ResponseBody
@PostMapping("/updateMtype")
public String updateMtype(Mtype mt){mtypeService.updateByPrimaryKeySelective(mt);return "success";
}

3.删除操作

点击删除按钮触发事件

删除的js

$(".btn-warning").click(function () {var tid = $(this).attr("tid");layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){$.ajax({url: "/mtype/delMtype",type: "post",data: {tid:tid},dataType: "text",success: function (text) {if (text == "success") {layer.msg("删除成功");layer.close(index);$("#txForm").submit();}}})});
})

删除后台Controller

@ResponseBody
@PostMapping("/delMtype")
public String delMtype(Integer tid){mtypeService.deleteByPrimaryKey(tid);//根据传过来的ID进行删除return "success";
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词