员工管理系统 - 增删改查
基于 springboot + thymeleaf + mybatis 的员工管理系统 —— 登录与注册功能
前面我们已经实现了注册与登录功能，整体的开发流程从 entity -> dao -> service -> controller 已经很详细了，这篇博客就不按照那么详细的流程记录了，根据这个流程看代码自己体会吧。
entity
在 com.yusael.entity 下创建 Emp.java：
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class Emp {
private String id;
private String name;
private String salary;
private Double age;
private Date bir;
}
查询所有功能
在 com.yusal.dao包下创建 EmpDAO.java 接口：
package com.yusael.dao;
import com.yusael.entity.Emp;
import java.util.List;
public interface EmpDAO {
List<Emp> findAll(); // 查询所有
}
在 resources/com/yusael/mapper 下创建 EmpDAOMapper.xml：
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.yusael.dao.EmpDAO">
<!--查询所有-->
<select id="findAll" resultType="Emp">
select id, name, salary, age, bir from t_emp
</select>
</mapper>
在 com.yusael.service 包下创建 EmpService.java 接口：
package com.yusael.service;
import com.yusael.entity.Emp;
import java.util.List;
public interface EmpService {
List<Emp> findAll();
}
在 com.yusael.service 包创建 EmpServiceImpl.java 中增加：
package com.yusael.service;
import com.yusael.dao.EmpDAO;
import com.yusael.entity.Emp;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
public class EmpServiceImp implements EmpService {
@Autowired
private EmpDAO empDAO;
@Override
public List<Emp> findAll() {
return empDAO.findAll();
}
}
com.yusael.controller 包下创建 EmpController.java：
package com.yusael.controller;
import com.yusael.entity.Emp;
import com.yusael.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
@RequestMapping("/emp")
public class EmpController {
@Autowired
private EmpService empService;
@GetMapping("findAll")
public String findAll(Model model) {
List<Emp> emps = empService.findAll();
model.addAttribute("emps", emps);
return "/ems/emplist";
}
}
查询所有的页面 emplist.html
这里的页面只有 .html，css 和 img 可以去看完整的项目：https://github.com/szluyu99/ems_thymeleaf。
emplist.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>emplist</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
</head>
<body>
<div id="wrap">
<div id="top_content">
<div id="header">
<div id="rightheader">
<p>
2009/11/20
<br />
</p>
</div>
<div id="topheader">
<h1 id="title">
<a href="#">main</a>
</h1>
</div>
<div id="navigation">
</div>
</div>
<div id="content">
<p id="whereami">
</p>
<h1>
Welcome <span th:text="${session.user.username}"/>!
</h1>
<table class="table">
<tr class="table_header">
<td>
ID
</td>
<td>
Name
</td>
<td>
Salary
</td>
<td>
Age
</td>
<td>
Bir
</td>
<td>
Operation
</td>
</tr>
<tr th:class=${empStat.odd}?'row1':'row2' th:each="emp,empStat : ${emps}">
<td>
<span th:text="${emp.id}"/>
</td>
<td>
<span th:text="${emp.name}"/>
</td>
<td>
<span th:text="${emp.salary}"/>
</td>
<td>
<span th:text="${emp.age}"/>
</td>
<td>
<span th:text="${#dates.format(emp.bir,'yyyy-MM-dd')}"/>
</td>
<td>
<a th:href="@{/emp/delete(id=${emp.id})}">delete emp</a> |
<a th:href="@{/emp/find(id=${emp.id})}">update emp</a>
</td>
</tr>
</table>
<p>
<input type="button" class="button" value="Add Employee" onclick="location.href='/ems/toSave'">
</p>
</div>
</div>
<div id="footer">
<div id="footer_bg">
[email protected]
</div>
</div>
</div>
</body>
</html>
至此，接着上篇文章的登录功能，点击 Submit 以后，可以跳转到查询所有的界面了。
运行 EmsApplication.java，浏览器网址输入 http://localhost:8989/ems/index，跳转到登录界面，输入用户名和密码（没有就注册），点击 Submit。
成功跳转到了查询所有的页面，但是此时数据中没有数据，所以显示为空。
保存员工
com.yusal.dao包： EmpDAO.java 接口中增加一个方法：
void save(Emp emp);
resources/com/yusael/mapper 目录下： EmpDAOMapper.xml 增加如下代码：
<!--保存员工-->
<insert id="save" parameterType="Emp">
insert into t_emp values (#{id}, #{name}, #{salary}, #{age}, #{bir})
</insert>
com.yusael.service 包：EmpService.java 接口增加一个方法：
void save(Emp emp);
com.yusael.service 包：EmpServiceImpl.java 增加一个方法实现：
@Override
public void save(Emp emp) {
emp.setId(UUID.randomUUID().toString());
empDAO.save(emp);
}
com.yusael.controller 包：EmpController.java 增加：
@GetMapping("/save")
public String findAll(Emp emp) {
empService.save(emp);
return "redirect:/emp/findAll";
}
保存员工的页面 addEmp.html
addEmp.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>add Emp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="css/style.css" />
</head>
<body>
<div id="wrap">
<div id="top_content">
<div id="header">
<div id="rightheader">
<p>
2009/11/20
<br />
</p>
</div>
<div id="topheader">
<h1 id="title">
<a href="#">Main</a>
</h1>
</div>
<div id="navigation">
</div>
</div>
<div id="content">
<p id="whereami">
</p>
<h1>
add Emp info:
</h1>
<form th:action="@{/emp/save}" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
name:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="name" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
salary:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="salary" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
age:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="age" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
bir:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="bir" />
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="Confirm" />
</p>
</form>
</div>
</div>
<div id="footer">
<div id="footer_bg">
[email protected]
</div>
</div>
</div>
</body>
</html>
至此，保存员工功能已经完成，之前我们完成到查询所有功能，在查询所有的页面上点击 Add Employee 进入保存员工页面：
在保存员工的页面输入信息，点击 Confirm：
点击确认以后，员工信息已经成功保存到数据库，并且页面自动给跳转回查询所有界面。
删除员工
com.yusal.dao包： EmpDAO.java 接口中增加一个方法：
void delete(String id);
resources/com/yusael/mapper 目录下： EmpDAOMapper.xml 增加如下代码：
<!--删除员工-->
<delete id="delete" parameterType="String">
delete from t_emp
where id = #{id}
</delete>
com.yusael.service 包：EmpService.java 接口增加一个方法：
void delete(String id);
com.yusael.service 包：EmpServiceImpl.java 增加一个方法实现：
@Override
public void delete(String id) {
empDAO.delete(id);
}
com.yusael.controller 包：EmpController.java 增加：
@GetMapping("/delete")
public String delete(String id) {
empService.delete(id);
return "redirect:/emp/findAll";
}
至此，删除员工的功能已经完成。
之前我们曾经往员工表中添加了一个信息，现在让我们尝试去删除它，在查询所有页面，点击 delete emp，删除该条员工记录。
点击 delete emp 后跳转回查询所有的页面，并且该条记录成功被删除。
修改员工
修改员工由两个部分组成：根据id查询员工，修改员工信息。
根据id查询员工
com.yusal.dao 包： EmpDAO.java 接口中增加一个方法：
Emp find(String id);
resources/com/yusael/mapper 目录下： EmpDAOMapper.xml 增加如下代码：
<!--根据id查询员工-->
<select id="find" parameterType="String" resultType="Emp">
select id, name, salary, age, bir
from t_emp
where id = #{id}
</select>
com.yusael.service 包：EmpService.java 接口增加一个方法：
Emp find(String id);
com.yusael.service 包：EmpServiceImpl.java 增加一个方法实现：
@Override
public Emp find(String id) {
return empDAO.find(id);
}
com.yusael.controller 包：EmpController.java 增加：
// 根据id查询员工
@GetMapping("/find")
public String find(String id, Model model) {
Emp emp = empService.find(id);
model.addAttribute("emp", emp);
return "/ems/updateEmp";
}
至此，我们可以通过点击 update emp，跳转到 修改员工的页面：
此时以及可以跳转到修改员工信息的页面了，但是真正的修改操作还没有去做，下面我们将去完善这个功能。
修改员工信息
com.yusal.dao 包： EmpDAO.java 接口中增加一个方法：
void update(Emp emp);
resources/com/yusael/mapper 目录下： EmpDAOMapper.xml 增加如下代码：
<!--修改员工信息-->
<update id="update" parameterType="Emp">
update t_emp set name = #{name}, salary = #{salary}, age = #{age}, bir = #{bir}
where id = #{id}
</update>
com.yusael.service 包：EmpService.java 接口增加一个方法：
void update(Emp emp);
com.yusael.service 包：EmpServiceImpl.java 增加一个方法实现：
@Override
public void update(Emp emp) {
empDAO.update(emp);
}
com.yusael.controller 包：EmpController.java 增加：
// 修改员工信息
@PostMapping("/update")
public String update(Emp emp) {
empService.update(emp);
return "redirect:/emp/findAll";
}
至此，我们完成了修改员工信息的功能。
刚刚我们点击 update emp，进入了修改员工信息的页面：
我们将信息修改过后，点击 Confirm。
点击 Confirm，跳转回查询所有页面，可以看到信息已经修改了。
更新员工页面 updateEmp.html
updateEmp.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>update Emp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
</head>
<body>
<div id="wrap">
<div id="top_content">
<div id="header">
<div id="rightheader">
<p>
2009/11/20
<br />
</p>
</div>
<div id="topheader">
<h1 id="title">
<a href="#">Main</a>
</h1>
</div>
<div id="navigation">
</div>
</div>
<div id="content">
<p id="whereami">
</p>
<h1>
update Emp info:
</h1>
<form th:action="@{/emp/update}" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
id:
</td>
<td valign="middle" align="left">
<span th:text="${emp.id}"/>
<input type="hidden" th:value="${emp.id}" name="id">
</td>
</tr>
<tr>
<td valign="middle" align="right">
name:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="name" th:value="${emp.name}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
salary:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="salary" th:value="${emp.salary}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
age:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="age" th:value="${emp.age}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
bir
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="bir" th:value="${#dates.format(emp.bir,'yyyy/MM/dd')}"/>
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="Confirm" />
</p>
</form>
</div>
</div>
<div id="footer">
<div id="footer_bg">
[email protected]
</div>
</div>
</div>
</body>
</html>
至此，整个员工管理系统开发完毕。
总结
可以看到，利用 spring boot 开发一个小系统的流程是十分简单的；
只要搭建好整个系统的架构，完成一个功能，后续添加功能是十分方便的。
最重要的不是细节，是对整体架构的把握。