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

🕗 发布于 2024-12-14 01:00 java SSM

整体查询到的页面

 <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"><i
                            class="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 的表单提交事件，并将提交的数据传递给回调函数 data
    form.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";
}

原文地址：https://blog.csdn.net/2301_81453175/article/details/144338234

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：轻量化特征融合 | 一种基于增强层间特征相关性的轻量级特征融合网络 | 北理工新作
下一篇：docker开启远程访问

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14

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

1.添加操作

2.修改操作

3.删除操作

相关文章