Spring Boot入门(二十) 之 员工列表的链接高亮和列表完善

我们发现有一个小问题就是我们点进去Customers但是他不高亮,还是原来的Dashboard是高亮,所以我们要进行调整

我们先把公共的模板单独抽取出来,都放到commons里边的bar.html里边


然后分别在dashboard.html和list.html里边修改引入的文件,用th:replace="~{}"

1.我们来实现链接高亮

高亮的原因主要还是Dashboard页面的class有一个active,有active,所以会高亮,否则不高亮

高亮的话我们需要判断当前页面是哪个页面,所以我们可以传入参入如下:

我们在bar.html里边传入activeUri作为判断,如果穿过来的是dash, 那么class就加上active,否则就不加

dashboard在replace的时候也加上这个值
同理list.html也是一样的操作


添加完后Ctrl+f9编译静态页面我们会发现可以来回切换了

2.遍历取出员工数据

我们可以发现tbody里边的就是我们的每一个员工数据,
我们把tbody里边的数据都删了,然后自己添加内容

我们把查询得到的emps用遍历的方法添加到list里边
Ctrl + F9可以看到我们的数据

只不过日期的显示并不是很人性化,所以我们还可以进行格式化

<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH: mm')}"></td>

这样的显示会好很多