Spring Boot 員工管理系統(tǒng)超詳細(xì)教程(源碼分享)
員工管理系統(tǒng)
1、準(zhǔn)備工作
資料下載
內(nèi)含源碼 + 筆記 + web素材
源碼下載地址：
http://xiazai.jb51.net/202105/yuanma/javaguanli_jb51.rar
筆記
素材
源碼
1.1、導(dǎo)入資源
將文件夾中的靜態(tài)資源導(dǎo)入idea中
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-FK4du48Q-1620304585032)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20210503093036786.jpg)]](http://img.jbzj.com/file_images/article/202105/2021051009493141.jpg)
位置如下
1.2、編寫pojo層
員工表
//員工表
@Data
@NoArgsConstructor
public class Employee {
private Integer id;
private String lastName;
private String email;
private Integer gender; //性別 0 女， 1，男
private Department department;
private Date birth;
public Employee(Integer id, String lastName, String email, Integer gender, Department department) {
this.id = id;
this.lastName = lastName;
this.email = email;
this.gender = gender;
this.department = department;
this.birth = new Date();
}
}
部門表
//部門表
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {
private int id; //部門id
private String departmentName; //部門名字
}
添加lombok依賴
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
1.3、編寫dao層
這里我們模擬數(shù)據(jù)庫，springboot和數(shù)據(jù)庫的連接在后序課程中。
部門dao
package com.kuang.dao;
import com.kuang.pojo.Department;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
//部門dao
@Repository
public class DepartmentDao {
//模擬數(shù)據(jù)庫中的數(shù)據(jù)
private static Map<Integer, Department>departments = null;
static {
departments = new HashMap<Integer, Department>(); //創(chuàng)建一個(gè)部門表
departments.put(101,new Department(101,"教學(xué)部"));
departments.put(102,new Department(102,"市場部"));
departments.put(103,new Department(103,"教研部"));
departments.put(104,new Department(104,"運(yùn)營部"));
departments.put(105,new Department(105,"后勤部"));
}
//獲取所有的部門信息
public Collection<Department> getDepartments(){
return departments.values();
}
//通過id得到部門
public Department getDepartmentById(Integer id){
return departments.get(id);
}
}
員工dao
package com.kuang.dao;
import com.kuang.pojo.Department;
import com.kuang.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
//員工dao
@Repository //被string托管
public class EmployeeDao {
//模擬數(shù)據(jù)庫中的數(shù)據(jù)
private static Map<Integer, Employee> employees= null;
//員工所屬的部門
@Autowired
private DepartmentDao departmentDao;
static {
employees = new HashMap<Integer,Employee>(); //創(chuàng)建一個(gè)部門表
employees.put(1001,new Employee( 1001,"AA","1622840727@qq.com",1,new Department(101,"教學(xué)部")));
employees.put(1002,new Employee( 1002,"BB","2622840727@qq.com",0,new Department(102,"市場部")));
employees.put(1003,new Employee( 1003,"CC","4622840727@qq.com",1,new Department(103,"教研部")));
employees.put(1004,new Employee( 1004,"DD","5628440727@qq.com",0,new Department(104,"運(yùn)營部")));
employees.put(1005,new Employee( 1005,"FF","6022840727@qq.com",1,new Department(105,"后勤部")));
}
//主鍵自增
private static Integer ininId = 1006;
//增加一個(gè)員工
public void save(Employee employee){
if(employee.getId() == null){
employee.setId(ininId++);
}
employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));
employees.put(employee.getId(),employee);
}
//查詢?nèi)康膯T工
public Collection<Employee>getALL(){
return employees.values();
}
//通過id查詢員工
public Employee getEmployeeById(Integer id){
return employees.get(id);
}
//刪除一個(gè)員通過id
public void delete(Integer id){
employees.remove(id);
}
}
2、首頁實(shí)現(xiàn)
2.1、引入Thymeleaf
pom.xml導(dǎo)入依賴
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
2.2、編寫MyMvcConfig
package com.kuang.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
//擴(kuò)展使用SpringMVC
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/index.html").setViewName("index");
}
}
更改靜態(tài)資源路徑
所有的靜態(tài)資源都需要使用thymeleaf接管：@{}
application.properties 修改
# 關(guān)閉模板引擎的緩存 spring.thymeleaf.cache=false server.servlet.context-path=/kuang
2.3、測試首頁
輸入路徑
http://localhost:8080/kuang/index.html
測試成功！
3、頁面國際化
3.1、 File Encodings設(shè)置
先在IDEA中統(tǒng)一設(shè)置properties的編碼問題！
編寫國際化配置文件，抽取頁面需要顯示的國際化頁面消息。我們可以去登錄頁面查看一下，哪些內(nèi)容
我們需要編寫國際化的配置！
3.2、配置文件編寫
1、我們在resources資源文件下新建一個(gè)i18n目錄，存放國際化配置文件
2、建立一個(gè)login.properties文件，還有一個(gè)login_zh_CN.properties；發(fā)現(xiàn)IDEA自動識別了我們要做國際化操作；文件夾變了！
3、我們可以在這上面去新建一個(gè)文件；
彈出如下頁面：我們再添加一個(gè)英文的；
這樣就快捷多了！
4、接下來，我們就來編寫配置，我們可以看到idea下面有另外一個(gè)視圖；
這個(gè)視圖我們點(diǎn)擊 + 號就可以直接添加屬性了；我們新建一個(gè)login.tip，可以看到邊上有三個(gè)文件框可以輸入
在這里插入圖片描述
我們添加一下首頁的內(nèi)容！
然后依次添加其他頁面內(nèi)容即可！
然后去查看我們的配置文件；
login.properties ：默認(rèn)
login.btn=登錄 login.password=密碼 login.remember=記住我 login.tip=請登錄 login.username=用戶名
英文：
login.btn=Sign in login.password=Password login.remember=Remember me login.tip=Please sign in login.username=Username
中文：
login.btn=登錄 login.password=密碼 login.remember=記住我 login.tip=請登錄 login.username=用戶名
OK，配置文件步驟搞定！
配置文件生效探究
我們?nèi)タ匆幌耂pringBoot對國際化的自動配置！這里又涉及到一個(gè)類：MessageSourceAutoConfiguration
里面有一個(gè)方法，這里發(fā)現(xiàn)SpringBoot已經(jīng)自動配置好了管理我們國際化資源文件的組件 ResourceBundleMessageSource；
// 獲取 properties 傳遞過來的值進(jìn)行判斷
@Bean
public MessageSource messageSource(MessageSourceProperties properties) {
ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
if (StringUtils.hasText(properties.getBasename())) {
// 設(shè)置國際化文件的基礎(chǔ)名（去掉語言國家代碼的）
messageSource.setBasenames(
StringUtils.commaDelimitedListToStringArray(
StringUtils.trimAllWhitespace(properties.getBasename())));
}
if (properties.getEncoding() != null) {
messageSource.setDefaultEncoding(properties.getEncoding().name());
}
messageSource.setFallbackToSystemLocale(properties.isFallbackToSystemLocale());
Duration cacheDuration = properties.getCacheDuration();
if (cacheDuration != null) {
messageSource.setCacheMillis(cacheDuration.toMillis());
}
messageSource.setAlwaysUseMessageFormat(properties.isAlwaysUseMessageFormat());
messageSource.setUseCodeAsDefaultMessage(properties.isUseCodeAsDefaultMessage());
return messageSource;
}
我們真實(shí)的情況是放在了i18n目錄下，所以我們要去配置這個(gè)messages的路徑；
spring.messages.basename=i18n.login
配置頁面國際化值
去頁面獲取國際化的值，查看Thymeleaf的文檔，找到message取值操作為：#{…}。我們?nèi)ロ撁鏈y試下：
IDEA還有提示，非常智能的！
我們可以去啟動項(xiàng)目，訪問一下，發(fā)現(xiàn)已經(jīng)自動識別為中文的了！
但是我們想要更好！可以根據(jù)按鈕自動切換中文英文！
配置國際化解析
在Spring中有一個(gè)國際化的Locale （區(qū)域信息對象）；里面有一個(gè)叫做LocaleResolver （獲取區(qū)域信息對象）的解析器！
我們?nèi)ノ覀僿ebmvc自動配置文件，尋找一下！看到SpringBoot默認(rèn)配置：
@Bean
@ConditionalOnMissingBean
@ConditionalOnProperty(prefix = "spring.mvc", name = "locale")
public LocaleResolver localeResolver() {
// 容器中沒有就自己配，有的話就用用戶配置的
if (this.mvcProperties.getLocaleResolver() == WebMvcProperties.LocaleResolver.FIXED) {
return new FixedLocaleResolver(this.mvcProperties.getLocale());
}
// 接收頭國際化分解
AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
return localeResolver;
}
AcceptHeaderLocaleResolver 這個(gè)類中有一個(gè)方法
public Locale resolveLocale(HttpServletRequest request) {
Locale defaultLocale = this.getDefaultLocale();
// 默認(rèn)的就是根據(jù)請求頭帶來的區(qū)域信息獲取Locale進(jìn)行國際化
if (defaultLocale != null && request.getHeader("Accept-Language") == null) {
return defaultLocale;
} else {
Locale requestLocale = request.getLocale();
List<Locale> supportedLocales = this.getSupportedLocales();
if (!supportedLocales.isEmpty() && !supportedLocales.contains(requestLocale)) {
Locale supportedLocale = this.findSupportedLocale(request, supportedLocales);
if (supportedLocale != null) {
return supportedLocale;
} else {
return defaultLocale != null ? defaultLocale : requestLocale;
}
} else {
return requestLocale;
}
}
}
那假如我們現(xiàn)在想點(diǎn)擊鏈接讓我們的國際化資源生效，就需要讓我們自己的Locale生效！
我們?nèi)プ约簩懸粋€(gè)自己的LocaleResolver，可以在鏈接上攜帶區(qū)域信息！
修改一下前端頁面的跳轉(zhuǎn)連接：
<!-- 這里傳入?yún)?shù)不需要使用 ？使用 （key=value）-->
<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}" rel="external nofollow" >中文</a>
<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}" rel="external nofollow" >English</a>
我們?nèi)懸粋€(gè)處理的組件類！
package com.kuang.component;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
//可以在鏈接上攜帶區(qū)域信息
public class MyLocaleResolver implements LocaleResolver {
//解析請求
@Override
public Locale resolveLocale(HttpServletRequest request) {
String language = request.getParameter("l");
Locale locale = Locale.getDefault(); // 如果沒有獲取到就使用系統(tǒng)默認(rèn)的
//如果請求鏈接不為空
if (!StringUtils.isEmpty(language)){
//分割請求參數(shù)
String[] split = language.split("_");
//國家，地區(qū)
locale = new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
}
為了讓我們的區(qū)域化信息能夠生效，我們需要再配置一下這個(gè)組件！在我們自己的MvcConofig下添加bean；
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
我們重啟項(xiàng)目，來訪問一下，發(fā)現(xiàn)點(diǎn)擊按鈕可以實(shí)現(xiàn)成功切換！搞定收工！
注意點(diǎn)
4、登錄+攔截器
4.1、登錄
禁用模板緩存
說明：頁面存在緩存，所以我們需要禁用模板引擎的緩存
#禁用模板緩存 spring.thymeleaf.cache=false
模板引擎修改后，想要實(shí)時(shí)生效！頁面修改完畢后，IDEA小技巧 ： Ctrl + F9 重新編譯！即可生效！
登錄
我們這里就先不連接數(shù)據(jù)庫了，輸入任意用戶名都可以登錄成功！
1、我們把登錄頁面的表單提交地址寫一個(gè)controller！
<form class="form-signin" th:action="@{/user/login}" method="post">
//這里面的所有表單標(biāo)簽都需要加上一個(gè)name屬性
</form>
2、去編寫對應(yīng)的controller
@Controller
public class LoginController {
@RequestMapping("/user/login")
public String login(
@RequestParam("username") String username ,
@RequestParam("password") String password,
Model model){
//具體的業(yè)務(wù)
if(!StringUtils.isEmpty(username)&&"123456".equals(password)){
return "redirect:/main.html";
}
else{
//告訴用戶，你登錄失敗
model.addAttribute("msg","用戶名或者密碼錯(cuò)誤！");
return "index";
}
}
}
OK ，測試登錄成功！
3、登錄失敗的話，我們需要將后臺信息輸出到前臺，可以在首頁標(biāo)題下面加上判斷
<!--判斷是否顯示，使用if, ${}可以使用工具類，可以看thymeleaf的中文文檔-->
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}">
</p>
重啟登錄失敗測試：
優(yōu)化，登錄成功后，由于是轉(zhuǎn)發(fā)，鏈接不變，我們可以重定向到首頁！
4、我們再添加一個(gè)視圖控制映射，在我們的自己的MyMvcConfifig中：
registry.addViewController("/main.html").setViewName("dashboard");
5、將 Controller 的代碼改為重定向；
//登錄成功！防止表單重復(fù)提交，我們重定向 return "redirect:/main.html";
重啟測試，重定向成功！后臺主頁正常顯示！
4.2、登錄攔截器
但是又發(fā)現(xiàn)新的問題，我們可以直接登錄到后臺主頁，不用登錄也可以實(shí)現(xiàn)！怎么處理這個(gè)問題呢？我
們可以使用攔截器機(jī)制，實(shí)現(xiàn)登錄檢查！
1、在LoginController添加serssion
session.setAttribute("loginUser",username);
2、自定義一個(gè)攔截器：
//自定義攔截器
public class LoginHandlerInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//獲取 loginUser 信息進(jìn)行判斷
Object user = request.getSession().getAttribute("loginUser");
if(user == null){//未登錄，返回登錄頁面
request.setAttribute("msg","沒有權(quán)限，請先登錄");
request.getRequestDispatcher("/index.html").forward(request,response);
return false;
}else{
//登錄，放行
return true;
}
}
}
3、然后將攔截器注冊到我們的SpringMVC配置類當(dāng)中！
@Override
public void addInterceptors(InterceptorRegistry registry) {
// 注冊攔截器，及攔截請求和要剔除哪些請求!
// 我們還需要過濾靜態(tài)資源文件，否則樣式顯示不出來
registry.addInterceptor(new LoginHandlerInterceptor())
.addPathPatterns("/**")
.excludePathPatterns("/index.html","/user/login","/","/css/*","/img/**","/js/**");
}
4、我們?nèi)缓笤诤笈_主頁，獲取用戶登錄的信息
<!--后臺主頁顯示登錄用戶的信息-->
[[${session.loginUser}]] <!--$取EL表達(dá)式-->
然后我們登錄測試攔截！完美！
5、展示員工列表
5.1、員工列表頁面跳轉(zhuǎn)
我們在主頁點(diǎn)擊Customers，就顯示列表頁面；我們?nèi)バ薷南?/p>
1、將首頁的側(cè)邊欄Customers改為員工管理
2、a鏈接添加請求
<a class="nav-link" th:href="@{/emps}" rel="external nofollow" rel="external nofollow" >員工管理</a>
3、將list放在emp文件夾下
4、編寫處理請求的controller
//員工列表
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getALL();
model.addAttribute("emps",employees);
return "emp/list";
}
}
我們啟動項(xiàng)目，測試一下看是否能夠跳轉(zhuǎn)，測試OK！我們只需要將數(shù)據(jù)渲染進(jìn)去即可！
但是發(fā)現(xiàn)了一個(gè)問題，側(cè)邊欄和頂部都相同，我們是不是應(yīng)該將它抽取出來呢？
5.2、Thymeleaf公共頁面元素抽取
步驟：
1、抽取公共片段 th:fragment 定義模板名
2、引入公共片段 th:insert 插入模板名
實(shí)現(xiàn)：
1、我們來抽取一下，使用list列表做演示！我們要抽取頭部nav標(biāo)簽，我們在dashboard中將nav部分定
義一個(gè)模板名；
<!--頂部導(dǎo)航欄-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" rel="external nofollow" rel="external nofollow" >[[${session.loginUser}]]</a> <!--$取EL表達(dá)式-->
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" rel="external nofollow" rel="external nofollow" >注銷</a>
</li>
</ul>
</nav>
2、然后我們在list頁面中去引入，可以刪掉原來的nav
<!--引入抽取的topbar-->
<!--模板名 ： 會使用thymeleaf的前后綴配置規(guī)則進(jìn)行解析 使用~{模板::標(biāo)簽名}-->
<!--頂部導(dǎo)航欄-->
<div th:insert="~{dashboard::topbar}"></div>
3、啟動再次測試，可以看到已經(jīng)成功加載過來了！
說明：
除了使用insert插入，還可以使用replace替換，或者include包含，三種方式會有一些小區(qū)別，可以見名
知義；
我們使用replace替換，可以解決div多余的問題，可以查看thymeleaf的文檔學(xué)習(xí)
側(cè)邊欄也是同理，當(dāng)做練手，可以也同步一下！
定義模板：
<!--側(cè)邊欄--> <nav th:fragment="sitebar" class="col-md-2 d-none d-md-block bg-light sidebar">
然后我們在list頁面中去引入：
<!--頂部導(dǎo)航欄-->
<div th:replace="~{commons/commons::topbar}"></div>
<!--側(cè)邊欄-->
<div th:replace="~{commons/commons::sidebar}"></div>
啟動再試試，看效果！
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-MYb7uR0O-1620304585041)(%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F.assets/image-20210504080516865.jpg)]](http://img.jbzj.com/file_images/article/202105/2021051009493259.jpg)
我們發(fā)現(xiàn)一個(gè)小問題，側(cè)邊欄激活的問題，它總是激活第一個(gè)；按理來說，這應(yīng)該是動態(tài)的才對！
為了重用更清晰，我們建立一個(gè)commons文件夾，專門存放公共頁面；
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-oOhXpYuM-1620304585042)(%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F.assets/image-20210504080721577.jpg)]](http://img.jbzj.com/file_images/article/202105/2021051009493360.jpg)
我們?nèi)ロ撁嬷幸胍幌?/p>
<a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}" rel="external nofollow" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
首頁 <span class="sr-only">(current)</span>
</a>
<a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/emps}" rel="external nofollow" rel="external nofollow" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
員工管理
</a>
我們先測試一下，保證所有的頁面沒有出問題！ok！
側(cè)邊欄激活問題：
1、將首頁的超鏈接地址改到項(xiàng)目中
2、我們在a標(biāo)簽中加一個(gè)判斷，使用class改變標(biāo)簽的值；
<div th:replace="~{commons/commons::topbar(active='main.html')}"></div>
<div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>
3、修改請求鏈接
<thead>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>department</th>
<th>birth</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.getId()}"></td>
<td th:text="${emp.getLastName()}"></td>
<td th:text="${emp.getEmail()}"></td>
<td th:text="${emp.getGender()==0?'女':'男'}"></td>
<td th:text="${emp.department.getDepartmentName()}"></td>
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
<td>
<button class="btn btn-sm btn-primary">編輯</button>
<button class="btn btn-sm btn-danger">刪除</button>
</td>
</tr>
</tbody>
4、我們刷新頁面，去測試一下，OK，動態(tài)激活搞定！
5.3、員工信息頁面展示
現(xiàn)在我們來遍歷我們的員工信息！順便美化一些頁面，增加添加，修改，刪除的按鈕！
<h2><a class="btn btn-sm btn-success" th:href="@{/emp}" rel="external nofollow" >添加員工</a></h2>
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-3zTWfpyn-1620304585042)(%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F.assets/image-20210504081556725.jpg)]](http://img.jbzj.com/file_images/article/202105/2021051009493361.jpg)
OK，顯示全部員工OK！
6、添加員工實(shí)現(xiàn)
6.1、表單及細(xì)節(jié)處理
1、將添加員工信息改為超鏈接
//to員工添加頁面
@GetMapping("/emp")
public String toAddPage(){
return "emp/add";
}
2、編寫對應(yīng)的controller
<form th:action="@{/emp}" method="post" >
<div class="form-group" ><label>LastName</label>
<input class="form-control" placeholder="kuangshen" type="text" name="lastName">
</div>
<div class="form-group" ><label>Email</label>
<input class="form-control" placeholder="24736743@qq.com" type="email" name="email">
</div>
<div class="form-group"><label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" name="gender" type="radio" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="gender" type="radio" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group" ><label>department</label>
<select class="form-control" name="department.id">
<option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
</select>
</div>
<div class="form-group" >
<label >Birth</label>
<input class="form-control" placeholder="kuangstudy" type="text" name="birth">
</div>
<button class="btn btn-primary" type="submit">添加</button>
</form>
3、添加前端頁面；復(fù)制list頁面，修改即可
bootstrap官網(wǎng)文檔 ： https://v4.bootcss.com/docs/4.0/components/forms/
我們?nèi)タ梢岳锩嬲易约合矚g的樣式！我這里給大家提供了編輯好的：
@GetMapping("/emp")
public String toAddPage(Model model){
//查詢所有的部門信息
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);
return "emp/add";
}
4、部門信息下拉框應(yīng)該選擇的是我們提供的數(shù)據(jù)，所以我們要修改一下前端和后端
Controller
<select class="form-control" name="department.id">
<option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
</select>
前端
<form th:action="@{/emp}" method="post"> 1
OK，修改了controller，重啟項(xiàng)目測試！
6.2、具體添加功能
1、修改add頁面form表單提交地址和方式
<form th:action="@{/emp}" method="post">
2、編寫controller；
//員工添加功能
//接收前端傳遞的參數(shù)，自動封裝成為對象[要求前端傳遞的參數(shù)名，和屬性名一致]
@PostMapping ("/emp")
public String addEmp(Employee employee){
//保存員工的信息
System.out.println(employee);
employeeDao.save(employee);
// 回到員工列表頁面，可以使用redirect或者forward，就不會被視圖解析器解析
return "redirect:/emps";
}
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-b6fVRToh-1620304585042)(%E5%91%98%E5%B7%A5%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F.assets/image-20210504161017922.jpg)]](http://img.jbzj.com/file_images/article/202105/2021051009493362.jpg)
回憶：重定向和轉(zhuǎn)發(fā)以及 /的問題？
時(shí)間格式問題
生日我們提交的是一個(gè)日期 ， 我們第一次使用的 / 正常提交成功了，后面使用 - 就錯(cuò)誤了，所以這里面
應(yīng)該存在一個(gè)日期格式化的問題；
SpringMVC會將頁面提交的值轉(zhuǎn)換為指定的類型，默認(rèn)日期是按照 / 的方式提交 ； 比如將2019/01/01
轉(zhuǎn)換為一個(gè)date對象。
那思考一個(gè)問題？我們能不能修改這個(gè)默認(rèn)的格式呢？
這個(gè)在配置類中，所以我們可以自定義的去修改這個(gè)時(shí)間格式化問題，我們在我們的配置文件中修改一
下；
spring.mvc.date-format=yyyy-MM-dd
這樣的話，我們現(xiàn)在就支持 - 的格式了，但是又不支持 / 了 ， 2333吧
測試OK！
7、修改員工信息
邏輯分析：
我們要實(shí)現(xiàn)員工修改功能，需要實(shí)現(xiàn)兩步；
1、點(diǎn)擊修改按鈕，去到編輯頁面，我們可以直接使用添加員工的頁面實(shí)現(xiàn)
2、顯示原數(shù)據(jù)，修改完畢后跳回列表頁面！
實(shí)現(xiàn)
1、我們?nèi)?shí)現(xiàn)一下，首先修改跳轉(zhuǎn)鏈接的位置；
<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}" rel="external nofollow" >編輯</a>
2、編寫對應(yīng)的controller
//員工修改頁面
@GetMapping("/emp/{id}")
public String toUpdateEmp(@PathVariable("id") Integer id,Model model){
Employee employee = employeeDao.getEmployeeById(id);
model.addAttribute("emp",employee);
//查詢所有的部門信息
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);
return "emp/update";
}
3、我們需要在這里將add頁面復(fù)制一份，改為update頁面；需要修改頁面，將我們后臺查詢數(shù)據(jù)回顯
<form th:action="@{/emp}" method="post" >
<input type="hidden" name="id" th:value="${emp.getId()}">
<div class="form-group" ><label>LastName</label>
<input th:value="${emp.getLastName()}" class="form-control" placeholder="kuangshen" type="text" name="lastName">
</div>
<div class="form-group" ><label>Email</label>
<input th:value="${emp.getEmail()}" class="form-control" placeholder="24736743@qq.com" type="email" name="email">
</div>
<div class="form-group"><label>Gender</label><br/>
<div class="form-check form-check-inline">
<input th:checked="${emp.getGender()==1}" class="form-check-input" name="gender" type="radio" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input th:checked="${emp.getGender()==0}" class="form-check-input" name="gender" type="radio" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group" ><label>department</label>
<select class="form-control" name="department.id">
<option th:selected="${dept.id==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
</select>
</div>
<div class="form-group" >
<label >Birth</label>
<input th:value="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}" class="form-control" placeholder="2021-02-02" type="text" name="birth">
</div>
<button class="btn btn-primary" type="submit">修改</button>
</form>
數(shù)據(jù)回顯OK!
8、刪除員工實(shí)現(xiàn)
1、list頁面，編寫提交地址
<a class="btn btn-sm btn-danger" th:href="@{/delEmp/}+${emp.getId()}" rel="external nofollow" >刪除</a>
2、編寫Controller
//刪除員工
@GetMapping("/delEmp/{id}")
public String delEmp(@PathVariable("id") Integer id){
employeeDao.delete(id);
return "redirect:/emps";
}
測試OK！
9、404及注銷
404
我們只需要在模板目錄下添加一個(gè)error文件夾，文件夾中存放我們相應(yīng)的錯(cuò)誤頁面；
比如404.html 或者 4xx.html 等等，SpringBoot就會幫我們自動使用了！
測試使用！
注銷
1、注銷請求
<a class="nav-link" th:href="@{/user/logout}" rel="external nofollow" >注銷</a>
2、對應(yīng)的controller
```java
@RequestMapping("/user/logout")
public String logout(HttpSession session){
session.invalidate();
return "redirect:/index.html";
}
到此這篇關(guān)于Spring Boot 員工管理系統(tǒng)超詳細(xì)教程(源碼分享)的文章就介紹到這了,更多相關(guān)Spring Boot 員工管理系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Java阻塞隊(duì)列(BlockingQueue)的實(shí)現(xiàn)原理
這篇文章主要介紹了詳解Java阻塞隊(duì)列(BlockingQueue)的實(shí)現(xiàn)原理，阻塞隊(duì)列是Java util.concurrent包下重要的數(shù)據(jù)結(jié)構(gòu)，有興趣的可以了解一下2017-06-06
spring?cloud?gateway中netty線程池小優(yōu)化
這篇文章主要介紹了spring?cloud?gateway中netty線程池小優(yōu)化技巧示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Java 方法引用與ambda表達(dá)式的聯(lián)系
這篇文章主要介紹了Java 方法引用與ambda表達(dá)式的聯(lián)系，方法引用通過方法的名字來指向一個(gè)方法， 方法引用同樣是Java 8 引入的新特性，而且和Lambda表達(dá)式有著不小的聯(lián)系，它同樣可以根據(jù)上下文進(jìn)行推導(dǎo)，進(jìn)而可以簡化代碼2022-06-06
在Java中,遍歷并刪除?Map?中的元素有四種常見的方法,每種方法都有其適用場景和優(yōu)缺點(diǎn),下面小編就來和大家詳細(xì)介紹一下這幾種方法的具體實(shí)現(xiàn)吧2024-10-10
淺談SpringMVC+Spring3+Hibernate4開發(fā)環(huán)境搭建
MVC已經(jīng)是現(xiàn)代Web開發(fā)中的一個(gè)很重要的部分，本文介紹一下SpringMVC+Spring3+Hibernate4的開發(fā)環(huán)境搭建，有興趣的可以了解一下。2017-01-01
springboot響應(yīng)json?null值過濾方式
這篇文章主要介紹了springboot響應(yīng)json?null值過濾方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-11-11
這篇文章主要為大家詳細(xì)介紹了JavaSe的抽象類和接口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
異常就是不正常，比如當(dāng)我們身體出現(xiàn)了異常我們會根據(jù)身體情況選擇喝開水、吃藥、看病、等?異常處理方法。?java異常處理機(jī)制是我們java語言使用異常處理機(jī)制為程序提供了錯(cuò)誤處理的能力，程序出現(xiàn)的錯(cuò)誤，程序可以安全的退出，以保證程序正常的運(yùn)行等2022-04-04
使用JSONObject.toJSONString 過濾掉值為空的key
這篇文章主要介紹了使用JSONObject.toJSONString 過濾掉值為空的key，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
java.util.concurrent.ExecutionException 問題解決方法
這篇文章主要介紹了java.util.concurrent.ExecutionException 問題解決方法的相關(guān)資料,需要的朋友可以參考下2016-11-11