只是练习thymeleaf的用法，所以没有使用数据库；如果觉得非要加数据库的同学，可以自行修改。

环境与技术

电脑环境：macOS
电脑软件：IDEA
基础框架：SpringBoot2.3.0
前端框架：bootstrap
模板引擎：thymeleaf
服务器：Tomcat
依赖管理：Maven3.5.4

资源下载

静态资源、页面和dao代码下载：https://pan.baidu.com/s/1IZ5UvyYm1iCN1V276qMqQw 密码：tgnt

---

新建项目

---

下一步，创建项目

引入依赖

pom引入web、jquery、thymeleaf、bootstrap

   <!--   引入jquery-webjar     --><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.4.1</version></dependency><!--   引入bootstrap     --><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>4.3.1</version></dependency>

导入资源

把整个asserts目录放到项目的resources/static目录下，把dao和entities两个目录放到main/java/com/angenin/springboot目录下，剩下4个页面放到resources/templates目录下。

---

RestfulCRUD

---

1. 默认访问首页

在java/com/angenin/springboot新建config/MyConfig配置类
MyConfig：

package com.angenin.springboot.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class MyMvcConfig implements WebMvcConfigurer {@Override	//添加视图映射public void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("login");registry.addViewController("/index.html").setViewName("login");}
}

把resources/templates目录下的index.html改名为login.html。

启动项目，在浏览器输入http://localhost:8080，成功访问到登录页面。

• 往login.html的< html >标签中加入xmlns:th="http://www.thymeleaf.org"

• 修改login.html里的< link >标签

  <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
  <link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
  

• 往login.html里的< img >标签加入th:src="@{/asserts/img/bootstrap-solid.svg}"
  这样修改以后，然后以后项目名变了，thymeleaf会自动帮我们修改资源的访问路径。

例如这样，我们来修改项目的访问名
在application.properties配置文件中加入

server.servlet.context-path=/crud

现在在需要浏览器输入http://localhost:8080/crud才能访问到首页，并且页面代码也自动加了/crud。

2. 国际化

1. 编写国际化配置文件，抽取页面需要显示的国际化消息
   在resources下新建一个i18n目录，在目录里新建login.properties和login_zh_CN.properties文件。

当IDEA识别到我们要做国际化文件时，会自动切换到国际化视图。

再新建一个文件

添加属性

抽取页面需要显示的国际化消息

属性	login.properties(默认)	login_en_US.properties(英文)	login_zh_CN.properties(中文)
login.tip	请登录~	Please sign in	请登录
login.username	用户名~	username	用户名
login.password	密码~	password	密码
login.remember	记住我~	Remember Me	记住我
login.tip	登录~	Sign in	登录

2. 使用ResourceBundleMessageSource管理国际化资源文件
   SpringBoot自动配置好了管理国际化资源文件的组件。
   MessageSourceAutoConfiguration.class

   @Bean@ConfigurationProperties(prefix = "spring.messages")public MessageSourceProperties messageSourceProperties() {return new MessageSourceProperties();}@Bean	//MessageSource(ResourceBundleMessageSource)是管理国际化的组件public MessageSource messageSource(MessageSourceProperties properties) {ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();if (StringUtils.hasText(properties.getBasename())) {//设置国际化资源文件的基础名（去掉语言国家代码的）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;}

在application.properties中加入spring.messages.basename=i18n.login

3. 修改页面取出国际化内容
   修改login.html

   			<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1><label class="sr-only" th:text="#{login.username}">Username</label><input type="text" class="form-control" placeholder="Username" th:placeholder="#{login.username}" required="" autofocus=""><label class="sr-only" th:text="#{login.password}">Password</label><input type="password" class="form-control" placeholder="Password" th:placeholder="#{login.password}" required=""><div class="checkbox mb-3"><label><input type="checkbox" value="remember-me"> [[#{login.remember}]]</label></div><button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>
   

   我的google浏览器是选的是中文，所有会使用中文的国际化内容
   
   启动项目，刷新页面
   
   如果出现乱码：
   
   但是如果在项目里这个修改，这是在这个项目里解决了乱码问题，下次打开别的项目还是一样会乱码（相当于局部配置）。
   而如果想修改后，每个项目都不会乱码的话，需要进行全局修改。
   
   然后按照上一张图修改即可，这样就解决了乱码问题。
   修改浏览器语言
   
   刷新页面就切换成英语的国际化内容
   

4. 实现点击登录页面的中文或English切换语言
   原理：
   国际化Locale：区域信息对象
   LocaleResolver：获取区域信息对象
   WebMvcAutoConfiguration.class中注册了LocaleResolver组件

           @Bean@ConditionalOnMissingBean	//当容器中没有用户注册LocaleResolver才自动注册默认的LocaleResolver@ConditionalOnProperty(prefix = "spring.mvc", name = {"locale"})public LocaleResolver localeResolver() {if (this.mvcProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.servlet.WebMvcProperties.LocaleResolver.FIXED) {return new FixedLocaleResolver(this.mvcProperties.getLocale());} else {AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();localeResolver.setDefaultLocale(this.mvcProperties.getLocale());return localeResolver;}}
   

   默认的就是根据请求头带来的的区域信息获取Locale来进行国际化。
   
   浏览器语言切换成中文
   
   修改login.html的两个语言的a标签

   	<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a><a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>
   

   在main/java/com/angenin/springboot下新建component/MyLocaleResolver

   package com.angenin.springboot.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;public class MyLocaleResolver implements LocaleResolver {@Override   //解析区域信息public Locale resolveLocale(HttpServletRequest httpServletRequest) {//获取请求的l参数String l = httpServletRequest.getParameter("l");//默认的信息Locale locale = Locale.getDefault();//检测l参数是否为空if(!StringUtils.isEmpty(l)){//不为空String[] s = l.split("_");//第一个参数为语言代码，第二个参数为国家代码locale = new Locale(s[0], s[1]);}return locale;}@Overridepublic void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {}
   }
   

然后在MyConfig配置类中注册我们的LocaleResolver

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

重新启动，刷新页面即可点击实现语言的切换。

3. 登录

登录只是在后台简单的进行判断，不使用数据库，提交也不使用ajax。

1. 在login页面的form标签里加上th:action="@{/user/login}" method="post"设置提交的地址和请求类型，并且在username和password的input标签加上name=username和name=password。

2. 在application.properties里添加spring.thymeleaf.cache=false禁用模板引擎使用缓存

3. 在main/java/com/angenin/springboot下新建controller/LoginController

   package com.angenin.springboot.controller;import org.springframework.stereotype.Controller;
   import org.springframework.util.StringUtils;
   import org.springframework.web.bind.annotation.*;import java.util.Map;@Controller
   public class LoginController {//    @DeleteMapping
   //    @PutMapping
   //    @GetMapping//    @RequestMapping(value = "/user/login", method = RequestMethod.POST)@PostMapping("/user/login")    //直接使用PostMapping表示要映射一个post的请求public String login(@RequestParam("username") String username,@RequestParam("password") String password,Map<String, Object> map){if(!StringUtils.isEmpty(username) && "123456".equals(password)){//登录成功跳转到dashboard.html页面return "dashboard";}else {map.put("msg", "用户名或密码错误");return "login";}}
   }
   

4. 在login页面Please sign in下添加

   <!--th:if进行判断，smg不为空显示th:text="${msg}"（#strings是thymeleaf的内置工具对象）-->
   <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
   

运行项目，随便输入一个用户名和密码，显示错误信息

密码输入123456进入到首页，因为路径的改变，所以所有的页面的需要修改引用的路径。

此时，如果刷新页面会出现表单重复提交现象（问题一）。

解决办法是登录成功后使用重定向到首页。

• 往config/MyConfig的视图映射addViewControllers方法中添加registry.addViewController("/main.html").setViewName("dashboard");
• controller/LoginController的login方法里，把return "dashboard";改为

//登录成功跳转到dashboard.html页面，防止表单重复提交，重定向到主页
//加上redirect:/即为重定向
return "redirect:/main.html";

重新启动项目，登录后进入主页，而且由于视图映射，重定向过来后，样式也生效了。

但是复制此时的网站地址，用其他浏览器打开，发现可以直接到后台主页，只要就失去了登录的意义了（问题二）。（这里使用了火狐浏览器）

解决办法是使用拦截器进行登录检查。

• 在LoginController中的login添加一个传参HttpSession，并把用户名保存到里面。

    ...public String login(@RequestParam("username") String username,@RequestParam("password") String password,Map<String, Object> map, HttpSession httpSession){if(!StringUtils.isEmpty(username) && "123456".equals(password)){//把用户名保存到session域中httpSession.setAttribute("loginUser", username);...

• 在main/java/com/angenin/springboot/component下新建LoginHandlerInterceptor.java拦截器。

package com.angenin.springboot.component;import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** 登录检查*/
public class LoginHandlerInterceptor implements HandlerInterceptor {@Override   //目标方法执行之前public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {Object loginUser = request.getSession().getAttribute("loginUser");if(loginUser == null){//未登录，返回登录页面//保存错误信息request.setAttribute("msg", "没有权限，请先登录");//转发到登录页面request.getRequestDispatcher("/index.html").forward(request, response);return false;}else{//已登录，放行请求return true;}}
}

• 然后在MyConfig配置类重写addInterceptors方法，在方法里注册拦截器。

    @Overridepublic void addInterceptors(InterceptorRegistry registry) {//注册拦截器，addPathPatterns添加拦截路径（/**表示拦截所有请求），excludePathPatterns排除拦截路径registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")//排除登录页面的请求、提交表单的路径、静态资源路径.excludePathPatterns("/index.html", "/", "/user/login", "/webjars/**", "/asserts/**");}

清理缓存，直接访问http://localhost:8080/crud/main.html

在dashboard.html中把Company name换成[[${session.loginUser}]]

并把剩下的页面静态资源引入的路径改为使用thymeleaf方式引入。
实现在html标签里加入xmlns:th="http://www.thymeleaf.org"，接着把页面里所有路径都改为th:href@{}或th:src@{}（里面有些href是直接连接到bootstrap官网资源的，不用修改）。（具体参照上面login页面的改法）

4. CRUD-员工列表

RestfulCRUD：CRUD满足Rest风格
URI：/资源名称/资源标识 HTTP请求方式区分对资源CRUD的操作。

	普通CRUD(uri来区分操作)	RestfulCRUD
查询	getEmp	emp（get请求）
添加	addEmp?xxx	emp（post请求）
修改	updateEmp?id=xx&xxx=xx	emp/{id}（put请求）
删除	deleteEmp?id=xx	emp/{id}（delete请求）

实验的请求架构

	请求URI	请求方式
查询所有员工	emps	get
查询单个员工	emp/{id}	get
来到添加页面	emp	get
添加员工	emp	post
来到修改页面(查出员工信息回显)	emp	get
修改员工	emp	put
删除员工	emp/{id}	delete

1. CRUD-员工列表

把dashboard.html页面的Customers改为员工管理，并修改a标签的请求路径。

	<li class="nav-item"><a class="nav-link" href="#" th:href="@{/emp}">...</svg>员工管理</a></li>

在resources/templates里新建一个emp目录，用于存放emp相关的页面，把list.html放入。

在controller里添加一个EmployeeController。

package com.angenin.springboot.controller;import com.angenin.springboot.dao.EmployeeDao;
import com.angenin.springboot.entities.Employee;
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 java.util.Collection;@Controller
public class EmployeeController {@AutowiredEmployeeDao employeeDao;//查询所有员工返回列表页面@GetMapping("/emps")public String list(Model model){//获取所有员工数据Collection<Employee> all = employeeDao.getAll();//把获取的数据放到请求域中model.addAttribute("emps", all);//thymeleaf默认会进行拼串//classpath:/templates/xxx 加上后缀 .htmlreturn "emp/list";}}

运行项目，登录进入主页后，点击员工管理，跳转到list页面。

页面中的导航条都是相同的，所以我们需要使用thymeleaf对其进行抽取。

使用thymeleaf的抽取公共片段

1. 抽取公共头部元素
   在dashboard.html页面中的body下nav标签里的内容就是头部元素，我们在nav标签内加入th:fragment="topbar"元素。
   删除list页面中body下nav的内容(即头部元素)，然后引入抽取的topbar头部。

   			<!--  引入抽取的topbar（模板名::片段名）	-->
   <!--	模板名：会使用thymeleaf的前后缀配置规则进行解析	-->
   <div th:insert="~{dashboard::topbar}"></div>
   

   启动项目，然后登录跳转到list页面
   
   但是在浏览器查看页面代码发现，dashboard页面nav是在body下，而list页面nav是在body的div下，list页面多了个div，为了防止以后出现问题，可以用thymeleaf的其他引入方式。
   dashboard页面：
   
   list页面：
   
   thymeleaf的三种引入功能片段属性：

• th:insert ：将公共片段整个插入到声明引入的元素中
• th:replace ：将声明引入的元素替换为公共片段
• th:include ：将被引入的片段的内容包含进这个标签中
  三种引入属性的区别

<!--抽取片段-->
<footer th:fragment="copy">&copy; 2011 The Good Thymes Virtual Grocery 
</footer><!--三种引入方式-->
<!--1-->
<div th:insert="footer :: copy"></div> 
<!--2-->
<div th:replace="footer :: copy"></div> 
<!--3-->
<div th:include="footer :: copy"></div> <!--效果-->
<!--1-->
<div> <footer> &copy; 2011 The Good Thymes Virtual Grocery </footer> 
</div> 
<!--2-->
<footer>&copy; 2011 The Good Thymes Virtual Grocery 
</footer> 
<!--3--><div> &copy; 2011 The Good Thymes Virtual Grocery 
</div>

所以我们应该使用th:replace标签来引入，把list页面的th:inset改成th:replace。

而且使用上面三种方式，可以省略_{{}，直接写成`th:replace=“dashboard::topbar”`。（如果是行内写法[[]]，[()]就一定要加上}{}）

2. 抽取测边导航条
   侧边导航条在头部导航条nav下的div里的div下的nav。
   
   这里我们用另一种方法抽取，给侧边导航条nav加上一个id="sidebar"属性。
   然后删除list页面的侧边栏，改成：

<!--引入侧边栏（模板名::选择器）		-->
<div th:replace="dashboard::#sidebar"></div>

3. 动态显示高亮
   但是，在list页面时，侧边栏的员工管理没高亮，我们需要让其动态的显示。
   查看代码发现负责显示高亮的是a标签class里的active。
   所以我们要在引入片段的同时引入参数，让其动态的添加和删除active。
   为了层次清晰，我们要在templates目录下再新建一个commons目录，在里面新建一个bar.html页面，然后把顶部栏，侧边栏写在页面里。
   把dashboard.html页面的顶部栏和侧边栏的代码放到bar.html页面里，dashboard.html使用引入标签引入顶部栏和侧边栏，list页面的引入也需要改。

   <!--dashboard、list都用这两个-->
   <div th:replace="commons/bar::topbar"></div>
   <div th:replace="commons/bar::#sidebar"></div>
   

   修改bar.html页面的侧边栏Dashboard的a标签，让其能正常跳转，并且加上th:class进行三元判断，如果是首页，a标签的class属性就加上active。

   <a class="nav-link active" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}">
   

   同样，员工管理的a标签也加上th:class。

   <a class="nav-link active" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}">
   

   然后在引入的标签里加入传参activeUri

   <!--dashboard页面-->
   <div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>
   <!--list页面-->
   <div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
   

   重新运行，实现随着页面的切换动态高亮。
   

显示员工数据

修改list页面的表格

<h2><button class="btn btn-sm btn-success">添加员工</button>
</h2>
<div class="table-responsive">
<table class="table table-striped table-sm"><thead><tr><th>#</th><th>lastName</th><th>email</th><th>gender</th><th>department</th><th>birth</th><th>操作</th></tr></thead><tbody><tr th:each="emp:${emps}"><td th:text="${emp.id}"></td><!--行内写法--><td>[[${emp.lastName}]]</td><td th:text="${emp.email}"></td><!--0为女，1为男--><td th:text="${emp.gender}==0?'女':'男'"></td><!--取出department对象的departmentName属性--><td th:text="${emp.department.departmentName}"></td><!--使用dates工具对象格式化日期格式--><td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd')}"></td><td><button class="btn btn-sm btn-primary">编辑</button><button class="btn btn-sm btn-danger">删除</button></td></tr></tbody>
</table>

运行结果

5. CRUD-添加员工

把添加按钮button改为a标签里并添加href="emp" th:href="@{/emp}属性。

在resources/templates/emp目录里，复制list.html，来新建add.html添加页面。并删除add页面main标签里所有的代码。

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"><!--添加使用post请求--><form th:action="@{/emp}" method="post"><div class="form-group"><label>LastName</label><input name="lastName" type="text" class="form-control" placeholder="angenin"></div><div class="form-group"><label>Email</label><input name="email" type="email" class="form-control" placeholder="angenin@qq.com"></div><div class="form-group"><label>Gender</label><br/><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="gender"  value="1"><label class="form-check-label">男</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="gender"  value="0"><label class="form-check-label">女</label></div></div><div class="form-group"><label>department</label><select class="form-control" name="department.id"><!--提交的是部门的id--><option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option></select></div><div class="form-group"><label>Birth</label><input name="birth" type="text" class="form-control" placeholder="2020-5-20"></div><button type="submit" class="btn btn-primary">添加</button></form>
</main>

在EmployeeController添加

   @AutowiredDepartmentDao departmentDao;//来到员工添加页面@GetMapping("/emp")public String toAddPage(Model model){//查出所有的部门并添加到modelCollection<Department> departments = departmentDao.getDepartments();model.addAttribute("depts", departments);//来到添加页面return "emp/add";}//添加员工//SpringMVC自动将请求参数和入参对象的属性进行一一绑定（请求参数名必须和javaBean入参的对象里面的属性名相同）@PostMapping("/emp")public String addEmp(Employee employee){//打印出保存的员工数据（System.out.println("保存的员工信息：" + employee);//模拟保存员工数据employeeDao.save(employee);//redirect：表示重定向到一个地址//forward：表示转发到一个地址// /：代表当前项目路径//转发到员工列表页面return "redirect:/emps";}

运行项目，点击添加按钮来到添加页面。

点击添加后重定向到list页面。


这里有个问题就是，如果提交的生日数据格式不是用/分隔的，而是用-或.来分隔，那么会出现400错误。
解决办法：日期格式化，让SpringMVC将页面提交的值转换为指定的类型。
在application.properties配置文件中用spring.mvc.format.date=yyyy-MM-dd修改日期格式（只这样做只能有一种格式，可以使用第三方插件）。

6. CRUD-修改员工

修改list页面的编辑按钮。

<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>

在EmployeeController添加方法，获取被修改员工的信息。

    //来到修改页面，查出当前员工信息，然后在页面回显数据@GetMapping("/emp/{id}")    //@PathVariable：路径变量public String toEditPage(@PathVariable("id") Integer id, Model model){Employee employee = employeeDao.get(id);model.addAttribute("emp", employee);//查出所有的部门并添加到modelCollection<Department> departments = departmentDao.getDepartments();model.addAttribute("depts", departments);//跳转到修改页面（add是一个修改添加二合一的页面）return "emp/add";}

修改add.html页面，使其当点击员工的修改按钮时回显被点击员工的数据。

<!--回显用户名-->
<input name="lastName" type="text" class="form-control" placeholder="angenin" th:value="${emp.lastName}">
<!--回显邮箱-->
<input name="email" type="email" class="form-control" placeholder="angenin@qq.com" th:value="${emp.email}">
<!--回显性别-->
<input class="form-check-input" type="radio" name="gender"  value="1" th:checked="${emp.gender==1}">
<input class="form-check-input" type="radio" name="gender"  value="0" th:checked="${emp.gender==0}">
<!--回显部门-->
<option th:selected="${dept.id==emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
<!--回显生日-->
<input name="birth" type="text" class="form-control" placeholder="2020-5-20" th:value="${#dates.format(emp.birth, 'yyyy-MM-dd')}">

成功回显数据：

此时，点击添加员工按钮会出现Property or field 'lastName' cannot be found on null错误，这是因为二合一后，跳转到add页面后，add页面会去使用th:value去取值，而点击添加按钮，Controller没往model中放员工信息，所以报错。
解决办法是add页面在th:value取值时进行判断来区分是用于添加员工还是修改员工。

<!--修改th:value进行判断，如果emp不等于空才赋值，修改之前取值的那部分，都要加上${emp!=null}?-->
th:value="${emp!=null}?${emp.lastName}<!--button也需要进行判断-->
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>

修改表单提交的方式，修改发送put请求，添加发送post请求。我觉得二合一耦合度太高，感觉还是分开成两个页面比较好，个人看法。
这里因为表单只支持get和post请求，不然用th:method更简单。
在add页面表单里添加一个隐藏域：

<!--需要区分是修改还是添加-->
<form th:action="@{/emp}" method="post">
<!--发送put请求修改员工数据-->
<!--
1. SpringMVC中配置hiddenHttpMethodFilter（SpringBoot自动配置好了）
2. 在页面创建一个post表单
3. 创建一个input项hidden，name="_method",value="put"只要在emp存在才显示
-->
<!--SpringBoot中有过滤器针对name为_method的请求，如果有，过滤器就会把post请求修改成value值的请求-->
<input type="hidden" name="_method" value="put" th:i="${emp!=null}">
<!--提交时加上员工id-->
<input type="hidden" name="id" th:if="#${emp!=null}" th:value="${emp.id}">

在EmployeeController添加：

    //员工修改，需要提交员工id@PutMapping("/emp")public String updateEmployee(Employee employee){System.out.println("修改的员工数据：" + employee);//保存修改的数据employeeDao.save(employee);return "redirect:/emps";}

在application.properties配置文件中添加spring.mvc.hiddenmethod.filter.enabled=true。（如果没加会进入接收post请求的方法，即新增员工的方法）

启动项目，修改员工信息

7. CRUD-删除员工

因为Rest风格，删除时需要发起delete请求，所以要在删除按钮外包一层form标签。

<form th:action="@{/emp/}+${emp.id}" method="post"><input type="hidden" name="_method" value="delete"><button type="submit" class="btn btn-sm btn-danger">删除</button>
</form>

在EmployeeController添加：

    //员工删除@DeleteMapping("/emp/{id}")public String deleteEmployee(@PathVariable("id") Integer id){//删除员工employeeDao.delete(id);//重定向会list页面return "redirect:/emps";}

运行项目，实现员工删除

但是为每个删除按钮添加表单不好，而且样式也改变了。
解决办法是我们可以把表单放到main标签外，然后为删除按钮条件点击事件，实现一个表单多条数据共同使用。

					<!--th:attr是thymeleaf中的设置自定义属性的属性--><button th:attr="del_uri=@{/emp/}+${emp.id}" type="submit" class="btn btn-sm btn-danger deleteBtn">删除</button></td></tr></tbody></table></div>
</main>
<form id="deleteEmpForm" method="post"><input type="hidden" name="_method" value="delete">
</form>

然后在页面里加上删除按钮的点击事件

<!-- 删除按钮的单击事件 -->
<script>$(".deleteBtn").click(function () {//$(this).attr("del_uri")获取表单提交地址//删除当前员工$("#deleteEmpForm").attr("action", $(this).attr("del_uri")).submit();return false;});
</script>

重新运行项目，删除成功

8. 定制错误页面

在templates目录下新建一个error目录，并把404.html页面放入，当系统发生错误时，SpringBoot就会在error自动读取错误状态码相对应的我们设置的错误页面。

把MyConfig中的addInterceptors先注释掉，然后运行项目，在浏览器输入一个不存在的地址，就会跳到我们制定的错误页面。

我们也可以在error目录下放置4xx.html和5xx.html页面，当发送错误时，SpringBoot会首先在静态资源目录下找error目录，不知道就用SpringBoot默认的错误页面，如果找的了就会在error目录里找错误状态码相对应的错误页面（如404错误就会找404.html），默认没有相对应的，就找开头相同的错误页面（如404错误，找不到404.html就找4xx.html），如果也没有，就会报错，而不会使用默认的错误页面。

例如，我们在error复制404.html，新建一个4xx.html，把4xx页面里的404改为4xx，然后在添加员工那，在生日栏里输入错误格式的数据，点击新建就会出现400错误，但是error目录里没有400页面，就会找对应的4xx页面。

如果我们把error的4开头的错误页面都删除了，当出现404或400错误时，因为我们已经创建了error目录，所以SpringBoot就不会使用默认的错误页面，但是我们error目录里又没有相对应的错误页面，那么程序就会报错。

页面能获取的错误信息：

• timestamp：时间戳
• status：状态码
• error：错误提示
• exception：异常对象
• message：异常消息
• errors：JSR303数据校验的所有错误

在4xx页面中添加：

<h1>status: [[${status}]]</h1>
<h2>timestamp: [[${timestamp}]]</h2>