IDEA实现ssm整合快速开发CRUD——新增

最新推荐文章于 2022-03-04 12:15:00 发布

栀雾仴佐

最新推荐文章于 2022-03-04 12:15:00 发布

阅读量504

点赞数 1

分类专栏： SSM整合文章标签： maven ssm bootstrap ajax java

本文链接：https://blog.csdn.net/weixin_61531981/article/details/123155144

版权

该博客介绍了如何在IDEA环境下使用SSM（Spring、SpringMVC、MyBatis）框架整合，实现CRUD操作中的员工新增功能。详细步骤包括：配置CRUD对话框，绑定按钮事件，设计模态框样式，创建Controller和服务类，实现用户名检查和后端JSR303验证。此外，还涉及了前端AJAX和jQuery校验，以及与数据库交互的RESTful API设计。

摘要由CSDN通过智能技术生成

上篇：基础环境搭建以及查询功能地址：

IDEA实现ssm整合快速开发CRUD——基础环境搭建
 IDEA实现ssm整合快速开发CRUD——查询

1、CRUD-新增对话框

在这里插入图片描述

2、CRUD-新增逻辑

• 1、在index.jsp页面点击”新增”
• 2、弹出新增对话框
• 3、去数据库查询部门列表，显示在对话框中
• 4、用户输入数据，并进行校验——jquery前端校验，ajax用户名重复校验，重要数据（后端校验(JSR303)，唯一约束）；
• 5、完成保存
• URI:
• /emp/{id} GET 查询员工
• /emp POST 保存员工
• /emp/{id} PUT 修改员工
• /emp/{id} DELETE 删除员工

2.1、为`新增`按钮绑定单击事件，并手动打开模态框

 //清空表单内容及样式
        function reset_form(ele){
   
            //清空表单数据
            $(ele)[0].reset();
            //清空表单样式
            $(ele).find("*").removeClass("has-success has-error");
            $(ele).find(".help-block").text("");
        }
<%--点击新增按钮弹出模态框（注意：写在<script type="text/javascript"></script>标签中）--%>
        $("#emp_add_modal_btn").click(function () {
   
            //清除表单数据（表单完整重置 （ 表单的数据，表单的样式 ））
            reset_form("#empAddModal form");
            //发送ajax请求，查出部门信息，显示在下拉列表中
            getDepts("#dept_add_select");
            //弹出模态框（手动打开）
            $("#empAddModal").modal({
   
                //背景删除设置："static"表示设置为点击背景不删除
                backdrop:"static"
            });
        });

        //查出所有部门信息并显示在指定元素的下拉列表中
        function getDepts(ele) {
   
            //清空添加到下拉列表中的部门信息
            $(ele).empty();
            $.ajax({
   
                url: "${APP_PATH}/depts",
                type: "GET",
                success:function (result) {
   
                    //console.log(result);
                    /*{"code":100,"msg":"处理成功！",
                    "extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}*/
                    //显示部门信息在下拉列表中
                    $.each(result.extend.depts,function () {
   
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        //optionEle.appendTo("#dept_add_select");
                        optionEle.appendTo(ele);
                    })
                }
            });
        }

2.2、设置员工添加模态框的样式（index.jsp）

<!-- 员工添加的模态框（即弹出的对话框）================================================================================= -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">员工添加</h4>