员工管理系统 - 增删改查
基于 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">
ABC@126.com
</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">
ABC@126.com
</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">
ABC@126.com
</div>
</div>
</div>
</body>
</html>
至此,整个员工管理系统开发完毕。
总结
可以看到,利用 spring boot 开发一个小系统的流程是十分简单的;
只要搭建好整个系统的架构,完成一个功能,后续添加功能是十分方便的。
最重要的不是细节,是对整体架构的把握。