員工管理系統 - 增刪改查
基於 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 開發一個小系統的流程是十分簡單的;
只要搭建好整個系統的架構,完成一個功能,後續添加功能是十分方便的。
最重要的不是細節,是對整體架構的把握。