ssm员工管理系统---通过Bootstrap模态框实现修改员工信息功能

Posted 2021-05-16 杀手不太冷！

文章目录

• • ssm员工管理系统---通过Bootstrap模态框实现修改员工信息功能
  • • 需求
    • 把bootstrap中的模态框加入到index.jsp首页
    • 给index.jsp首页的编辑按钮绑定一个单击事件
    • index.jsp首页中的getDepts方法
    • 后端控制器接收/depts请求的方法getDepts
    • service层的getDepts方法
    • 动态代理接口中的queryAllDepartment方法
    • 映射文件中的sql语句
    • index.jsp首页中的getEmp方法
    • 后端控制器中接收/select_emp_byId请求的方法getEmp
    • service层的getEmp方法
    • 动态代理接口中的selectEmployeeById方法
    • 映射文件中的sql语句
    • 给修改员工模态框中的更新按钮绑定一个click单击事件
    • 后端控制器中接收updateEmp请求的方法updateEmp
    • service层的update_emp_byId方法
    • 动态代理接口中的updateEmployee方法
    • 映射文件中的sql语句
    • 测试

ssm员工管理系统—通过Bootstrap模态框实现修改员工信息功能

需求

点击编辑按钮，会跳出来一个修改员工的模态框，并且模态框里初始会显示对应员工的信息，然后在模态框中修改员工信息，修改好之后，点击模态框的更新按钮，会刷新页面，显示已修改的员工信息。

把bootstrap中的模态框加入到index.jsp首页

bootstrap官网的模态框，如下图：

把模态框的代码移到index.jsp首页中，如下图：

给index.jsp首页的编辑按钮绑定一个单击事件

如下图：

来看一下，index.jsp页面中，编辑按钮的代码，如下图：

index.jsp首页中的getDepts方法

getDepts方法干的事情：

1.清空select多选菜单中原本的内容

2.发送异步请求查询部门表中的信息

3.将查询到的部门信息构建到修改员工模态框的显示员工部门名的多选菜单中

模态框中显示员工部门的位置，如下图：

getDepts方法的内容如下图：

后端控制器接收/depts请求的方法getDepts

getDepts方法干的事情：

1.调用service层的getDepts查询所有的部门信息

2.把查询到的部门信息返回到前端

getDepts方法的内容如下图：

service层的getDepts方法

如下图：

动态代理接口中的queryAllDepartment方法

如下图：

在applicationContext.xml配置文件中扫描动态代理接口的包，如下图：

映射文件中的sql语句

如下图：

index.jsp首页中的getEmp方法

此方法干的事情：

1.向后端发送一个请求查询员工信息

2.解析后端返回的json字符串，把查询到的员工信息构建到模态框的相应位置

模态框中显示员工信息的位置，如下图：

getEmp方法的内容如下图：

后端控制器中接收/select_emp_byId请求的方法getEmp

此方法中干的事情：

1.调用service层的getEmp方法根据员工id查询到具体员工的信息

2.把查询到的信息返回给前端

getEmp方法的内容如下图：

service层的getEmp方法

如下图：

动态代理接口中的selectEmployeeById方法

如下图：

在appllicationContext.xml配置文件中，一定要扫描动态代理接口，如下图：

映射文件中的sql语句

如下图：

给修改员工模态框中的更新按钮绑定一个click单击事件

如下图：

模态框中的更新按钮的代码如下图：

后端控制器中接收updateEmp请求的方法updateEmp

updateEmp方法干的事情:

1.接收前端传递来的员工信息，并封装到Employee员工对象中

2.调用service层的update_emp_byId方法，更新数据库中的员工信息

3.返回操作结果json字符串给后端

updateEmp方法的代码如下图：

service层的update_emp_byId方法

如下图：

动态代理接口中的updateEmployee方法

如下图：

在applicationContext.xml配置文件中扫描动态代理接口，如下图：

映射文件中的sql语句

如下图：

测试

首先进入首页，如下图：

然后修改id是18的员工信息，点击编辑之后，如下图：

然后修改email为[e-mail],修改gender为女，修改部门为运维部，如下图：

之后点击更新按钮，如下图：