前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于maven+ssm的增删改查之修改员工信息

基于maven+ssm的增删改查之修改员工信息

作者头像
西西嘛呦
发布2020-08-26 14:40:02
8200
发布2020-08-26 14:40:02
举报

具体流程:点击编辑按钮,弹出编辑模态框,同时会发送ajax请求获取员工和部门信息并显示在相关位置。在模态框中修改相关信息,发送ajax请求进行保存。

获取部门信息之前已经有了,现在是获取员工信息。

EmployeeController.java

代码语言:javascript
复制
    //查询员工信息
    @ResponseBody
    @RequestMapping(value="/emp/{id}",method=RequestMethod.GET)
    public Msg getEmp(@PathVariable("id") Integer id) {
        Employee employee = employeeService.getEmp(id);
        return Msg.success().add("emp", employee);
    }

EmployeeService.java

代码语言:javascript
复制
public Employee getEmp(Integer id);

EmployeeServiceImpl.java

代码语言:javascript
复制
    @Override
    public Employee getEmp(Integer id) {
        // TODO Auto-generated method stub
        return employeeMapper.selectByPrimaryKey(id);
    }

然后是index.jsp弹出的模态框的界面:

代码语言:javascript
复制
<!-- 员工修改模态框 -->
<div class="modal fade" id="empUpdateModal" 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">员工修改</h4>
      </div>
      <div class="modal-body">
              <!-- 新增表单 -->
            <form class="form-horizontal">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">empName</label>
                <div class="col-sm-10">
                      <p class="form-control-static" id="empName_update_static"></p>
                  <span class="help-block"></span>
                </div>
              </div>
              <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">email</label>
                <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="email_update_input" placeholder="123@qq.com">
                  <span class="help-block"></span>
                </div>
              </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">gender</label>
                  <div class="col-sm-10">
                      <label class="radio-inline">
                          <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                        </label>
                 </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">deptName</label>
                <div class="col-sm-4">
                  <select name="dId" class="form-control" id="dept_add_select"></select>
                </div>
              </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
      </div>
    </div>
  </div>

在list.js中,需要在编辑那传入相关的员工id:

代码语言:javascript
复制
......
        var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                            .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                            .append("编辑");
        //添加一个自定义的属性,表示当前员工id
        editBtn.attr("edit-id", item.empId)
......

新建一个edit.js

代码语言:javascript
复制
//修改
//要在页面加载完成之后创建,才绑定用on
$(document).on("click",".edit_btn",function(){
    //alert("edit");
    //1.查出部门信息,并显示部门列表.2.查出员工信息
    getDepts("#empUpdateModal select");
    getEmp($(this).attr("edit-id"));
    //传员工id给更新按钮
    $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
    $("#empUpdateModal").modal({
        backdrop:"static"
    });
});

//查询员工信息
function getEmp(id){
    $.ajax({
        url:"/curd_ssm/emp/" + id,
        type:"GET",
        success:function(result){
            console.log(result);
            var empData = result.extend.emp;
            $("#empName_update_static").text(empData.empName);
            $("#email_update_input").val(empData.email);
            $("#empUpdateModal input[name=gender]").val([empData.gender]);
            $("#empUpdateModal select").val([empData.dId]);
        }
    });

}

得到员工id,部门信息,员工信息后,打开模态框,同时需要将员工id传给模态框中的更新按钮,以便可以根据id进行更新。

当然我们需要在index.jsp中引用相关js:

代码语言:javascript
复制
<script type="text/javascript" src="${APP_PATH}/static/myjs/edit.js" ></script>

之后对相关信息进行修改,点击保存会发送ajax请求,此时后端相关方法:

EmployeeController.java

代码语言:javascript
复制
    //保存修改信息
    @ResponseBody
    @RequestMapping(value="/emp/{empId}",method=RequestMethod.PUT)
    public Msg saveEditEmp(Employee employee) {
        //System.out.println(employee);
        employeeService.updateEmp(employee);
        return Msg.success();
    }

注意我们是使用PUT请求。

EmployeeService.java

代码语言:javascript
复制
public void updateEmp(Employee employee);

EmployeeServiceImpl.java

代码语言:javascript
复制
    @Override
    public void updateEmp(Employee employee) {
        // TODO Auto-generated method stub
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

最后在edit.js中:

代码语言:javascript
复制
//点击更新员工信息
$("#emp_update_btn").click(function(){
    //验证邮箱是否合法
    var email = $("#email_update_input").val();
    var regEmail =     /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    if(!regEmail.test(email)){
        //alert("邮箱格式不正确");
        $("#email_update_input").empty();
        show_validate_msg("#email_update_input","error","邮箱格式不正确");
        return false;
    }else{
        show_validate_msg("#email_update_input","success","");
    }
    //发送ajax请求,保存数据
    $.ajax({
        url:"/curd_ssm/emp/"+$(this).attr("edit-id"),
        type:"POST",
        data:$("#empUpdateModal form").serialize()+"&_method=PUT",
//        type:"PUT",
//        data:$("#empUpdateModal form").serialize(),
        success:function(result){
            //alert(result.msg);
            $("#empUpdateModal").modal("hide");
            //回到本页面
            to_page(currentNum);
        }
    });

这里发送PUT请求有两种方式,一种如上,利用web.xml中配置的rest风格的过滤器将POST请求转换成PUT请求。

另一种是通过在web.xml中配置:

代码语言:javascript
复制
    <!-- 直接发送PUT请求 -->
    <filter>
        <filter-name>HttpPutFormContentFilter</filter-name>
        <filter-class>org.springframework.web.filter.HttpPutFormContentFilter</filter-class>
    </filter>
        <filter-mapping>
        <filter-name>HttpPutFormContentFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

然后在发送ajax请求时:

代码语言:javascript
复制
        type:"PUT",
        data:$("#empUpdateModal form").serialize(),

同时要注意的是在EmployeeController.java中RequestMapping中的id必须为Employee.java的属性值:empId。不然获取不到数据。

启动服务器:对这条数据进行修改,点击编辑

修改:

保存:

相关信息被成功修改。

说明:关于发送PUT请求的第二种方式,道理是这么个道理 ,但是我没运行成功,报错说:

代码语言:javascript
复制
严重: Servlet.service() for servlet [springDispatcherServlet] in context with path [/curd_ssm] threw exception [Request processing failed; nested exception is org.springframework.jdbc.BadSqlGrammarException: com.gong.curd.dao.EmployeeMapper.updateByPrimaryKeySelective (batch index #1) failed. Cause: java.sql.BatchUpdateException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'where emp_id = 92' at line 3
; bad SQL grammar []; nested exception is java.sql.BatchUpdateException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'where emp_id = 92' at line 3] with root cause
com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'where emp_id = 92' at line 3

但是我的sql是Mybatis逆向工程生成的,这也能有错。。。

不过第一种是可以的,但也存在bug,就是修改完成后如果不是在最后一页,那么需要进行刷新结果才能出来,而且该条记录会在最后一页显示。应该是js哪里出了问题,不过不打紧,学学其中的逻辑,思想就好了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-01-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云数据库 MySQL
腾讯云数据库 MySQL(TencentDB for MySQL)为用户提供安全可靠,性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性,包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL,可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理,不仅经济实惠,而且稳定可靠,易于运维。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档