員工管理系統(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中

位置如下

1.2、編寫pojo層

員工表

//員工表@Data@NoArgsConstructorpublic 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@NoArgsConstructorpublic 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ù)庫(kù)，springboot和數(shù)據(jù)庫(kù)的連接在后序課程中。

部門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@Repositorypublic class DepartmentDao { //模擬數(shù)據(jù)庫(kù)中的數(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,'市場(chǎng)部'));departments.put(103,new Department(103,'教研部'));departments.put(104,new Department(104,'運(yùn)營(yíng)部'));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ù)庫(kù)中的數(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,'市場(chǎng)部')));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)營(yíng)部')));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、首頁(yè)實(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@Configurationpublic 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=falseserver.servlet.context-path=/kuang2.3、測(cè)試首頁(yè)

輸入路徑

http://localhost:8080/kuang/index.html

測(cè)試成功！

3、頁(yè)面國(guó)際化3.1、 File Encodings設(shè)置

先在IDEA中統(tǒng)一設(shè)置properties的編碼問題！

編寫國(guó)際化配置文件，抽取頁(yè)面需要顯示的國(guó)際化頁(yè)面消息。我們可以去登錄頁(yè)面查看一下，哪些內(nèi)容

我們需要編寫國(guó)際化的配置！

3.2、配置文件編寫

1、我們?cè)趓esources資源文件下新建一個(gè)i18n目錄，存放國(guó)際化配置文件

2、建立一個(gè)login.properties文件，還有一個(gè)login_zh_CN.properties；發(fā)現(xiàn)IDEA自動(dòng)識(shí)別了我們要做國(guó)際化操作；文件夾變了！

3、我們可以在這上面去新建一個(gè)文件；

彈出如下頁(yè)面：我們?cè)偬砑右粋€(gè)英文的；

這樣就快捷多了！

4、接下來，我們就來編寫配置，我們可以看到idea下面有另外一個(gè)視圖；

這個(gè)視圖我們點(diǎn)擊 + 號(hào)就可以直接添加屬性了；我們新建一個(gè)login.tip，可以看到邊上有三個(gè)文件框可以輸入

在這里插入圖片描述

我們添加一下首頁(yè)的內(nèi)容！

然后依次添加其他頁(yè)面內(nèi)容即可！

然后去查看我們的配置文件；

login.properties ：默認(rèn)

login.btn=登錄login.password=密碼login.remember=記住我login.tip=請(qǐng)登錄login.username=用戶名

英文：

login.btn=Sign inlogin.password=Passwordlogin.remember=Remember melogin.tip=Please sign inlogin.username=Username

中文：

login.btn=登錄login.password=密碼login.remember=記住我login.tip=請(qǐng)登錄login.username=用戶名

OK，配置文件步驟搞定！

配置文件生效探究

我們?nèi)タ匆幌耂pringBoot對(duì)國(guó)際化的自動(dòng)配置！這里又涉及到一個(gè)類：MessageSourceAutoConfiguration

里面有一個(gè)方法，這里發(fā)現(xiàn)SpringBoot已經(jīng)自動(dòng)配置好了管理我們國(guó)際化資源文件的組件 ResourceBundleMessageSource；

// 獲取 properties 傳遞過來的值進(jìn)行判斷@Beanpublic MessageSource messageSource(MessageSourceProperties properties) { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); if (StringUtils.hasText(properties.getBasename())) {// 設(shè)置國(guó)際化文件的基礎(chǔ)名（去掉語(yǔ)言國(guó)家代碼的）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

配置頁(yè)面國(guó)際化值

去頁(yè)面獲取國(guó)際化的值，查看Thymeleaf的文檔，找到message取值操作為：#{…}。我們?nèi)ロ?yè)面測(cè)試下：

IDEA還有提示，非常智能的！

我們可以去啟動(dòng)項(xiàng)目，訪問一下，發(fā)現(xiàn)已經(jīng)自動(dòng)識(shí)別為中文的了！

但是我們想要更好！可以根據(jù)按鈕自動(dòng)切換中文英文！

配置國(guó)際化解析

在Spring中有一個(gè)國(guó)際化的Locale （區(qū)域信息對(duì)象）；里面有一個(gè)叫做LocaleResolver （獲取區(qū)域信息對(duì)象）的解析器！

我們?nèi)ノ覀僿ebmvc自動(dòng)配置文件，尋找一下！看到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()); } // 接收頭國(guó)際化分解 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ǐng)求頭帶來的區(qū)域信息獲取Locale進(jìn)行國(guó)際化 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)擊鏈接讓我們的國(guó)際化資源生效，就需要讓我們自己的Locale生效！

我們?nèi)プ约簩懸粋€(gè)自己的LocaleResolver，可以在鏈接上攜帶區(qū)域信息！

修改一下前端頁(yè)面的跳轉(zhuǎn)連接：

<!-- 這里傳入?yún)?shù)不需要使用 ？使用 （key=value）--><a th:href='http://www.aoyou183.cn/bcjs/@{/index.html(l=’zh_CN’)}' rel='external nofollow' >中文</a><a th:href='http://www.aoyou183.cn/bcjs/@{/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 { //解析請(qǐng)求 @Override public Locale resolveLocale(HttpServletRequest request) {String language = request.getParameter('l');Locale locale = Locale.getDefault(); // 如果沒有獲取到就使用系統(tǒng)默認(rèn)的//如果請(qǐng)求鏈接不為空if (!StringUtils.isEmpty(language)){ //分割請(qǐng)求參數(shù) String[] split = language.split('_'); //國(guó)家，地區(qū) locale = new Locale(split[0],split[1]);}return locale; } @Override public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) { }}

為了讓我們的區(qū)域化信息能夠生效，我們需要再配置一下這個(gè)組件！在我們自己的MvcConofig下添加bean；

@Beanpublic LocaleResolver localeResolver(){ return new MyLocaleResolver();}

我們重啟項(xiàng)目，來訪問一下，發(fā)現(xiàn)點(diǎn)擊按鈕可以實(shí)現(xiàn)成功切換！搞定收工！

注意點(diǎn)

4、登錄+攔截器4.1、登錄

禁用模板緩存

說明：頁(yè)面存在緩存，所以我們需要禁用模板引擎的緩存

#禁用模板緩存 spring.thymeleaf.cache=false

模板引擎修改后，想要實(shí)時(shí)生效！頁(yè)面修改完畢后，IDEA小技巧 ： Ctrl + F9 重新編譯！即可生效！

登錄

我們這里就先不連接數(shù)據(jù)庫(kù)了，輸入任意用戶名都可以登錄成功！

1、我們把登錄頁(yè)面的表單提交地址寫一個(gè)controller！

<form th:action='@{/user/login}' method='post'> //這里面的所有表單標(biāo)簽都需要加上一個(gè)name屬性 </form>

2、去編寫對(duì)應(yīng)的controller

@Controllerpublic 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 ，測(cè)試登錄成功！

3、登錄失敗的話，我們需要將后臺(tái)信息輸出到前臺(tái)，可以在首頁(yè)標(biāo)題下面加上判斷

<!--判斷是否顯示，使用if, ${}可以使用工具類，可以看thymeleaf的中文文檔--> <p th:text='${msg}' th:if='${not #strings.isEmpty(msg)}'> </p>

重啟登錄失敗測(cè)試：

優(yōu)化，登錄成功后，由于是轉(zhuǎn)發(fā)，鏈接不變，我們可以重定向到首頁(yè)！

4、我們?cè)偬砑右粋€(gè)視圖控制映射，在我們的自己的MyMvcConfifig中：

registry.addViewController('/main.html').setViewName('dashboard');

5、將 Controller 的代碼改為重定向；

//登錄成功！防止表單重復(fù)提交，我們重定向 return 'redirect:/main.html';

重啟測(cè)試，重定向成功！后臺(tái)主頁(yè)正常顯示！

4.2、登錄攔截器

但是又發(fā)現(xiàn)新的問題，我們可以直接登錄到后臺(tái)主頁(yè)，不用登錄也可以實(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){//未登錄，返回登錄頁(yè)面 request.setAttribute('msg','沒有權(quán)限，請(qǐng)先登錄'); request.getRequestDispatcher('/index.html').forward(request,response); return false;}else{ //登錄，放行 return true;} }}

3、然后將攔截器注冊(cè)到我們的SpringMVC配置類當(dāng)中！

@Override public void addInterceptors(InterceptorRegistry registry) {// 注冊(cè)攔截器，及攔截請(qǐng)求和要剔除哪些請(qǐng)求!// 我們還需要過濾靜態(tài)資源文件，否則樣式顯示不出來registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns('/**').excludePathPatterns('/index.html','/user/login','/','/css/*','/img/**','/js/**');}

4、我們?nèi)缓笤诤笈_(tái)主頁(yè)，獲取用戶登錄的信息

<!--后臺(tái)主頁(yè)顯示登錄用戶的信息-->[[${session.loginUser}]] <!--$取EL表達(dá)式-->

然后我們登錄測(cè)試攔截！完美！

5、展示員工列表5.1、員工列表頁(yè)面跳轉(zhuǎn)

我們?cè)谥黜?yè)點(diǎn)擊Customers，就顯示列表頁(yè)面；我們?nèi)バ薷南?/p>

1、將首頁(yè)的側(cè)邊欄Customers改為員工管理

2、a鏈接添加請(qǐng)求

<a th:href='http://www.aoyou183.cn/bcjs/@{/emps}' rel='external nofollow' rel='external nofollow' >員工管理</a>

3、將list放在emp文件夾下

4、編寫處理請(qǐng)求的controller

//員工列表@Controllerpublic class EmployeeController { @Autowired EmployeeDao employeeDao; @RequestMapping('/emps') public String list(Model model){Collection<Employee> employees = employeeDao.getALL();model.addAttribute('emps',employees);return 'emp/list'; }}

我們啟動(dòng)項(xiàng)目，測(cè)試一下看是否能夠跳轉(zhuǎn)，測(cè)試OK！我們只需要將數(shù)據(jù)渲染進(jìn)去即可！

但是發(fā)現(xiàn)了一個(gè)問題，側(cè)邊欄和頂部都相同，我們是不是應(yīng)該將它抽取出來呢？

5.2、Thymeleaf公共頁(yè)面元素抽取

步驟：

1、抽取公共片段 th:fragment 定義模板名

2、引入公共片段 th:insert 插入模板名

實(shí)現(xiàn)：

1、我們來抽取一下，使用list列表做演示！我們要抽取頭部nav標(biāo)簽，我們?cè)赿ashboard中將nav部分定

義一個(gè)模板名；

<!--頂部導(dǎo)航欄--><nav th:fragment='topbar'> <a rel='external nofollow' rel='external nofollow' >[[${session.loginUser}]]</a> <!--$取EL表達(dá)式--> <input type='text' placeholder='Search' aria-label='Search'> <ul class='navbar-nav px-3'><li class='nav-item text-nowrap'> <a rel='external nofollow' rel='external nofollow' >注銷</a></li> </ul></nav>

2、然后我們?cè)趌ist頁(yè)面中去引入，可以刪掉原來的nav

<!--引入抽取的topbar--> <!--模板名 ： 會(huì)使用thymeleaf的前后綴配置規(guī)則進(jìn)行解析 使用~{模板::標(biāo)簽名}--><!--頂部導(dǎo)航欄--><div th:insert='~{dashboard::topbar}'></div>

3、啟動(dòng)再次測(cè)試，可以看到已經(jīng)成功加載過來了！

說明：

除了使用insert插入，還可以使用replace替換，或者include包含，三種方式會(huì)有一些小區(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'>

然后我們?cè)趌ist頁(yè)面中去引入：

<!--頂部導(dǎo)航欄--><div th:replace='~{commons/commons::topbar}'></div><!--側(cè)邊欄--><div th:replace='~{commons/commons::sidebar}'></div>

啟動(dòng)再試試，看效果！

我們發(fā)現(xiàn)一個(gè)小問題，側(cè)邊欄激活的問題，它總是激活第一個(gè)；按理來說，這應(yīng)該是動(dòng)態(tài)的才對(duì)！

為了重用更清晰，我們建立一個(gè)commons文件夾，專門存放公共頁(yè)面；

我們?nèi)ロ?yè)面中引入一下

<a th: th:href='http://www.aoyou183.cn/bcjs/@{/index.html}' rel='external nofollow' > <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke- 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> 首頁(yè) <span class='sr-only'>(current)</span></a><a th: th:href='http://www.aoyou183.cn/bcjs/@{/emps}' rel='external nofollow' rel='external nofollow' > <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke- 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>

我們先測(cè)試一下，保證所有的頁(yè)面沒有出問題！ok！

側(cè)邊欄激活問題：

1、將首頁(yè)的超鏈接地址改到項(xiàng)目中

2、我們?cè)赼標(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、修改請(qǐng)求鏈接

<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、我們刷新頁(yè)面，去測(cè)試一下，OK，動(dòng)態(tài)激活搞定！

5.3、員工信息頁(yè)面展示

現(xiàn)在我們來遍歷我們的員工信息！順便美化一些頁(yè)面，增加添加，修改，刪除的按鈕！

<h2><a th:href='http://www.aoyou183.cn/bcjs/@{/emp}' rel='external nofollow' >添加員工</a></h2>

OK，顯示全部員工OK！

6、添加員工實(shí)現(xiàn)6.1、表單及細(xì)節(jié)處理

1、將添加員工信息改為超鏈接

//to員工添加頁(yè)面 @GetMapping('/emp') public String toAddPage(){ return 'emp/add'; }

2、編寫對(duì)應(yīng)的controller

<form th:action='@{/emp}' method='post' > <div ><label>LastName</label><input placeholder='kuangshen' type='text' name='lastName'> </div> <div ><label>Email</label><input 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 name='gender' type='radio' value='1'> <label class='form-check-label'>男</label></div><div class='form-check form-check-inline'> <input name='gender' type='radio' value='0'> <label class='form-check-label'>女</label></div> </div> <div ><label>department</label><select name='department.id'> <option th:each='dept:${departments}' th:text='${dept.getDepartmentName()}' th:value='${dept.getId()}'></option></select> </div> <div ><label >Birth</label><input placeholder='kuangstudy' type='text' name='birth'> </div> <button type='submit'>添加</button></form>

3、添加前端頁(yè)面；復(fù)制list頁(yè)面，修改即可

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 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)目測(cè)試！

6.2、具體添加功能

1、修改add頁(yè)面form表單提交地址和方式

<form th:action='@{/emp}' method='post'>

2、編寫controller；

//員工添加功能//接收前端傳遞的參數(shù)，自動(dòng)封裝成為對(duì)象[要求前端傳遞的參數(shù)名，和屬性名一致]@PostMapping ('/emp')public String addEmp(Employee employee){ //保存員工的信息 System.out.println(employee); employeeDao.save(employee); // 回到員工列表頁(yè)面，可以使用redirect或者forward，就不會(huì)被視圖解析器解析 return 'redirect:/emps';}

回憶：重定向和轉(zhuǎn)發(fā)以及 /的問題？

時(shí)間格式問題

生日我們提交的是一個(gè)日期 ， 我們第一次使用的 / 正常提交成功了，后面使用 - 就錯(cuò)誤了，所以這里面

應(yīng)該存在一個(gè)日期格式化的問題；

SpringMVC會(huì)將頁(yè)面提交的值轉(zhuǎn)換為指定的類型，默認(rèn)日期是按照 / 的方式提交 ； 比如將2019/01/01

轉(zhuǎn)換為一個(gè)date對(duì)象。

那思考一個(gè)問題？我們能不能修改這個(gè)默認(rèn)的格式呢？

這個(gè)在配置類中，所以我們可以自定義的去修改這個(gè)時(shí)間格式化問題，我們?cè)谖覀兊呐渲梦募行薷囊?/p>

下；

spring.mvc.date-format=yyyy-MM-dd

這樣的話，我們現(xiàn)在就支持 - 的格式了，但是又不支持 / 了 ， 2333吧

測(cè)試OK！

7、修改員工信息

邏輯分析：

我們要實(shí)現(xiàn)員工修改功能，需要實(shí)現(xiàn)兩步；

1、點(diǎn)擊修改按鈕，去到編輯頁(yè)面，我們可以直接使用添加員工的頁(yè)面實(shí)現(xiàn)

2、顯示原數(shù)據(jù)，修改完畢后跳回列表頁(yè)面！

實(shí)現(xiàn)

1、我們?nèi)?shí)現(xiàn)一下，首先修改跳轉(zhuǎn)鏈接的位置；

<a th:href='http://www.aoyou183.cn/bcjs/@{/emp/}+${emp.getId()}' rel='external nofollow' >編輯</a>

2、編寫對(duì)應(yīng)的controller

//員工修改頁(yè)面@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頁(yè)面復(fù)制一份，改為update頁(yè)面；需要修改頁(yè)面，將我們后臺(tái)查詢數(shù)據(jù)回顯

<form th:action='@{/emp}' method='post' > <input type='hidden' name='id' th:value='${emp.getId()}'> <div ><label>LastName</label><input th:value='${emp.getLastName()}' placeholder='kuangshen' type='text' name='lastName'> </div> <div ><label>Email</label><input th:value='${emp.getEmail()}' 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}' 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}' name='gender' type='radio' value='0'> <label class='form-check-label'>女</label></div> </div> <div ><label>department</label><select 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 ><label >Birth</label><input th:value='${#dates.format(emp.birth,’yyyy-MM-dd HH:mm’)}' placeholder='2021-02-02' type='text' name='birth'> </div> <button type='submit'>修改</button></form>

數(shù)據(jù)回顯OK!

8、刪除員工實(shí)現(xiàn)

1、list頁(yè)面，編寫提交地址

<a th:href='http://www.aoyou183.cn/bcjs/@{/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';}

測(cè)試OK！

9、404及注銷

404

我們只需要在模板目錄下添加一個(gè)error文件夾，文件夾中存放我們相應(yīng)的錯(cuò)誤頁(yè)面；

比如404.html 或者 4xx.html 等等，SpringBoot就會(huì)幫我們自動(dòng)使用了！

測(cè)試使用！

注銷

1、注銷請(qǐng)求

<a th:href='http://www.aoyou183.cn/bcjs/@{/user/logout}' rel='external nofollow' >注銷</a>2、對(duì)應(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)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！