基於springboot+thymeleaf+mybatis的員工管理系統 —— 增刪改查

Github地址:https://github.com/szluyu99/ems_thymeleaf

基於 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>&nbsp;|&nbsp;
								<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 開發一個小系統的流程是十分簡單的;

只要搭建好整個系統的架構,完成一個功能,後續添加功能是十分方便的。

最重要的不是細節,是對整體架構的把握。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章