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

news/2024/12/13 16:00:15/

整体查询到的页面

 <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";
}


http://www.ppmy.cn/news/1554796.html

相关文章

Linux 高级命令大全

Linux 高级命令大全 系统管理 查看所有已加载的服务 systemctl list-units --typeservice 禁用服务的开机自启 systemctl disable service_name 动态启用 IP 转发 sysctl -w net.ipv4.ip_forward1 立即关闭系统 shutdown -h now 重启系统 reboot 查看系统运行时间和负载 …

LightRAG测试BUG

错误一&#xff1a; LightRAG无法回答错误&#xff1a; INFO:lightrag:kw_prompt result:{{"high_level_keywords": ["xxx", "xxx"],"low_level_keywords": ["xxx", "xxx", "xxx"] }} JSON parsing e…

24.DDD与敏捷开发

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 DDD与敏捷开发的关系敏捷宣言DDD与敏捷开发相互助力1. 都强调人与人的协作2. 都强调迭代 DDD与敏捷开发的关系 DDD与敏捷开发不…

访问者模式的理解和实践

在软件开发过程中&#xff0c;设计模式为我们提供了解决常见问题的最佳实践。访问者模式&#xff08;Visitor Pattern&#xff09;是行为设计模式之一&#xff0c;它将数据操作与数据结构分离&#xff0c;使得在不修改数据结构的前提下&#xff0c;能够定义作用于这些元素的新的…

MySQL生产环境备份脚本

全量备份脚本&#xff0c;其中BakDir&#xff0c;ZlbakDir&#xff0c;LogFile需要自己创建 #!/bin/bash export LANGen_US.UTF-8# 指定备份目录 BakDir/root/beifen/data/mysqlbak/data/allbak # 指定增量备份目录 ZlbakDir/root/beifen/data/mysqlbak/data/zlbak # 备份日志…

外卖开发(八)—— SpringTask(定时任务) 和 WebSocket网络协议

外卖开发&#xff08;八&#xff09;—— SpringTask 和 WebSocket 一、利用SpringTask完成定时任务1、cron表达式2、springtask实现 二、使用webSocket实现接单、催单提醒1、代码分析2、催单提醒 一、利用SpringTask完成定时任务 Spring Task是Spring框架提供的任务调度工具&…

Python中的 `string.Template`:用法和使用场景

Python中的 `string.Template`:用法和使用场景 什么是 `string.Template`?`Template` 的基本用法代码解析使用 `safe_substitute`实用场景1. 动态生成消息2. 生成文件内容如何处理复杂场景?总结在Python中,字符串处理是非常常见的任务,其中string.Template提供了一种简单、…

虚拟机网络部署固化IP

有时我们发现在重启虚拟机后&#xff0c;Linux连接不上了&#xff0c;查看原来是IP变了&#xff0c;这是由于IP没有固化导致&#xff0c;所以要先固化ip。 配置网络环境&#xff1a; 1. 关闭防火墙 &#xff08; 重要 &#xff09; 1:查看防火状态 systemctl status firewa…