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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/486914.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实验3-实时数据流处理-Flink

1.前期准备 &#xff08;1&#xff09;Flink基础环境安装 参考文章&#xff1a; 利用docker-compose来搭建flink集群-CSDN博客 显示为这样就成功了 &#xff08;2&#xff09;把docker&#xff0c;docker-compose&#xff0c;kafka集群安装配置好 参考文章&#xff1a; …

【Java】—— 图书管理系统

基于往期学习的类和对象、继承、多态、抽象类和接口来完成一个控制台版本的 “图书管理系统” 在控制台界面中实现用户与程序交互 任务目标&#xff1a; 1、系统中能够表示多本图书的信息 2、提供两种用户&#xff08;普通用户&#xff0c;管理员&#xff09; 3、普通用户…

Google BERT入门(3)Transformer的自注意力机制的理解(下)

文章目录 4.自注意力机制的理解步骤 4 4.自注意力机制的理解 步骤 4 我们计算了查询矩阵和键矩阵之间的点积&#xff0c;得到了分数&#xff0c;然后使用softmax函数对分数进行了归一化。现在&#xff0c;自注意力机制的最后一步是计算注意力矩阵Z。 注意力矩阵包含句子中每…

大舍传媒-关于海外媒体宣发的探讨

关于海外媒体宣发的探讨 一、海外媒体宣发的重要性 在当今全球化的时代&#xff0c;海外媒体宣发对于企业、组织和个人来说具有至关重要的意义。通过有效的海外媒体宣发&#xff0c;可以提升品牌知名度&#xff0c;拓展国际市场&#xff0c;增强影响力&#xff0c;吸引更多的潜…

城市基础设施数字化管理:打造安全、智能的城市生命线

随着数字化转型的深入&#xff0c;城市基础设施生命线的安全管理正面临前所未有的机遇与挑战。城市基础设施&#xff0c;包括交通、能源、供水、排水、通信等&#xff0c;是城市运行的“生命线”&#xff0c;其安全治理直接关系到城市的稳定与人民生活的安全。 数字化转型对城…

241207-通过Docker部署Wiki.JS并设置ElasticSearch进行中文搜索

A. 最终效果 B. 配置文件 version: "3" services:wiki:image: ghcr.io/requarks/wiki:2container_name: wikijsports:- "3000:3000"volumes:- /home/lgk/Projects/WikiJS/config:/configenvironment:- DB_TYPEpostgres- DB_HOSTdatabase- DB_PORT5432- DB…

ConcurrentLinkedQueue<>实现生产者-消费者问题理解和简易demo

1.ConcurrentLinkedQueue<> ConcurrentLinkedQueue 是 Java 中的一个线程安全的无界队列实现。它基于无锁&#xff08;lock-free&#xff09;的算法&#xff0c;采用了一个高效的、非阻塞的、可伸缩并发控制机制。这使得在高并发场景下能够实现较高的吞吐量。 无界性质…

LDR6500:音频双C支持,数字与模拟的完美结合

在当今数字化快速发展的时代&#xff0c;音频设备的兼容性和性能成为了用户关注的重点。LDR6500&#xff0c;作为乐得瑞科技精心研发的USB Power Delivery&#xff08;PD&#xff09;协议芯片&#xff0c;凭借其卓越的性能和广泛的应用兼容性&#xff0c;为音频设备领域带来了新…

面试技术点之安卓篇

一、基础 二、高级 三、组件 Android中SurfaceView和TextureView有什么区别&#xff1f; 参考 Android中SurfaceView和TextureView有什么区别&#xff1f; 四、三方框架 五、系统源码 六、性能优化

Mock神器:Easy-Mock 私有化部署及使用介绍

在现代前后端分离的开发模式中&#xff0c;后端接口的数据模拟是一个常见且必要的需求。尤其是在后端接口尚未开发完成时&#xff0c;前端开发需要依赖模拟数据进行开发与测试。Easy-Mock 是一个非常流行的开源工具&#xff08;虽然它已经停止更新好长时间了&#xff09;&#…

React v19稳定版发布12.5

&#x1f916; 作者简介&#xff1a;水煮白菜王 &#xff0c;一位资深前端劝退师 &#x1f47b; &#x1f440; 文章专栏&#xff1a; 前端专栏 &#xff0c;记录一下平时在博客写作中&#xff0c;总结出的一些开发技巧✍。 感谢支持&#x1f495;&#x1f495;&#x1f495; 目…

如何在Ubuntu中利用repo和git地址下载获取imx6ull的BSP

01-设置git的用户名和邮箱 git config --global user.name "suwenhao" git config --global user.email "2487872782qq.com"这里不设置的话后面在第5步的repo配置中还是会要求输入&#xff0c;而且以后进行相关操作都要输入&#xff0c;不妨现在就进行配置…

高德地图3D地图SDK造成ANR问题记录

问题描述&#xff1a; 在新接手的项目中使用到了高德地图的3D的SDK,其依赖导入如下 api com.amap.api:3dmap:latest.integrationapi com.amap.api:search:9.7.0在使用过程中&#xff0c;用到了TileOverlay图层&#xff0c;使用过程中有一下两个问题&#xff1a; 1.在特定的AMAP…

【AI实战项目】基于OpenCV的“颜色识别项目”完整操作过程

OpenCV是一个广受欢迎且极为流行的计算机视觉库&#xff0c;它因其强大的功能、灵活性和开源特性而在开发者和研究者中备受青睐。 学习OpenCV主要就是学习里面的计算机视觉算法。要学习这些算法的原理&#xff0c;知道它们适用于哪些场景&#xff0c;然后通过Python编写代码来…

浅谈网络 | 应用层之云网络隔离GRE/VXLAN

目录 前言GRE 隧道技术VXLANGRE/VXLAN接入云平台 前言 之前提到&#xff0c;为云平台中的租户实现隔离时&#xff0c;常用的策略是基于 VLAN。然而&#xff0c;VLAN 只有 12 位&#xff0c;共支持 4096 个 ID&#xff0c;这在最初设计时看似足够&#xff0c;但随着云计算的快速…

Spark on Yarn安装配置,大数据技能竞赛(容器环境)

Spark on Yarn模式&#xff0c;即把Spark作为一个客户端&#xff0c;将作业提交给Yarn服务&#xff0c;由于在生产环境中&#xff0c;很多时候都要与Hadoop使用同一个集群&#xff0c;因此采用Yarn来管理资源调度&#xff0c;可以有效提高资源利用率。 环境说明&#xff1a; 服…

java+springboot+mysql在线文件管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的在线文件管理系统&#xff0c;系统包含管理员、使用员、监察员角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;使用员管理&#xff1b;监测员管理&#xff1b;留言管理&#xff08;回复&#xff09;&#xff1b…

SD Express 卡漏洞导致笔记本电脑和游戏机遭受内存攻击

Positive Technologies 最近发布的一份报告揭示了一个名为 DaMAgeCard 的新漏洞&#xff0c;攻击者可以利用该漏洞利用 SD Express 内存卡直接访问系统内存。 该漏洞利用了 SD Express 中引入的直接内存访问 (DMA) 功能来加速数据传输速度&#xff0c;但也为对支持该标准的设备…

基于单片机的智能灯光控制系统

摘要 现在的大部分的大学&#xff0c;都是采用了一种“绿色”的教学方式&#xff0c;再加上现在的大学生缺乏环保意识&#xff0c;所以在学校里很多的教室&#xff0c;在白天的时候灯都会打开&#xff0c;这是一种极大的浪费&#xff0c;而且随时都有可能看到&#xff0c;这是…

ros项目dual_arm_pick-place(urdf文件可视化查看)

前言 一直想写一些项目的讲解&#xff0c;今天&#xff08;2024.12.05&#xff09;可以说正式开始了。 dual_arm_pick-place项目&#xff0c;是关于两个机械臂协同传递物品。 正文 这次的话&#xff0c;给大家讲一下里面的urdf文件。 这篇文章主要来看一下项目中的urdf文件…