Thymeleaf 公共页面元素抽取

list页面和主页面的侧边栏和顶部都相同，我们是不是应该将它抽取出来呢？

  1. 抽取公共片段 th:fragment 定义模板名

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

我们来抽取一下，使用list列表做演示！我们要抽取头部，nav标签

为了重用更清晰，我们建立一个commons文件夹，专门存放公共页面

image-20200202202108899

除了使用insert插入，还可以使用replace替换，或者include包含，三种方式会有一些小区别，可以见名知义；

我们使用replace替换，可以解决div多余的问题，可以查看thymeleaf的文档学习

将主页面中和list页面中的侧边栏和顶部代码删除后，我们去页面中引入一下。

<div th:replace="~{commons/commons::topbar}"></div>

<div th:replace="~{commons/commons::sidebar}"></div>

image-20200202202552513

解决我们侧边栏激活问题！

  1. 侧边栏激活样式是一个class名叫active所控制的

  2. 将首页的超链接地址改到项目中

  3. 我们在a标签中加一个判断，使用class改变标签的值

image-20200202205337510

image-20200202205459263

其他的同理

员工管理

将主页中的Customers改名为员工管理。点击发送请求查询所有员工信息，成功查询之后转发到list页面中，在list页面中同样引入侧边栏和顶部栏。

image-20200202210224637

控制器

image-20200202210439144

list页面遍历我们的员工信息！顺便美化一些页面，增加添加，修改，删除的按钮

image-20200202210852979

image-20200202211509797

添加员工

  1. 将添加员工信息改为超链接

    image-20200203112107017

  2. 编写对应的controller

    image-20200203112322322

  3. 添加前端add页面，复制list页面，修改即可。加入了bootstrap的表单样式

    image-20200203113447034

  4. 当前端页面提交时，编写对应的controller

    image-20200203114029278

  5. 前端填写数据，注意时间问题

    image-20200203114509102

    点击提交，后台输出正常！页面跳转及数据显示正常

    由于目前很多富文本编辑器提供的日期选择格式都是yy-MM-dd（2020-02-20）所以当我们换一个时间格式提交时

    image-20200203114747472

    发现页面出现了400错误!

    image-20200203114859223

    生日我们提交的是一个日期 ， 我们第一次使用的 / 正常提交成功了，后面使用 - 就错误了，所以这里面应该存在一个日期格式化的问题；

    SpringMVC会将页面提交的值转换为指定的类型，默认日期是按照 / 的方式提交 。 比如将2019/01/01 转换为一个date对象。

    那思考一个问题？我们能不能修改这个默认的格式呢？

    我们去看webmvc的自动配置文件；找到一个日期格式化的方法，我们可以看一下

    image-20200203115911590

    这个在配置类中，所以我们可以自定义的去修改这个时间格式化问题，我们在我们的配置文件中修改一下

    image-20200203120550536

    image-20200203120631783

    image-20200203120650204

员工修改

我们要实现员工修改功能，需要实现两步

  1. 点击修改按钮，去到编辑页面，我们可以复制使用添加员工的add页面为upadate页面实现
  2. 显示原数据，修改完毕后跳回列表页面

首先在list页面中修改跳转链接的位置

image-20200203121450419

编写对应的controller

image-20200203121811710

update页面

image-20200203121847067

image-20200203122633525

update对应的controller

image-20200203122829501

image-20200203122958675

image-20200203123041419

image-20200203123129494

image-20200203123146153

删除员工

list页面，编写提交地址

image-20200203123304230

编写Controller

image-20200203123419227

测试

image-20200203123442025

image-20200203123503353

定制错误页面

我们只需要在模板目录下添加一个error文件夹，文件夹中存放我们相应的错误页面，比如404.html 或者 4xx.html 等等，SpringBoot就会帮我们自动使用了！

image-20200203123707599

image-20200203123842805

注销功能

来到顶部导航栏中的代码

image-20200203124036826

编写对应的controller

image-20200203124157837

测试

image-20200203124229292

image-20200203124243435

测试地址

账号 密码
任意 123456