我们发现有一个小问题就是我们点进去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>
这样的显示会好很多
