1.员工列表页
前边我们实现了登录功能,并且登陆进去进去了后台管理页面
下面我们要实现的是,点击Customers就出来员工列表也就是list.html
我们先找到Customers的位置,并把他的href跳转改了
由于我们使用的是restfulCURD,所以可以这么写
记得在HTML里边写上thymeleaf的约束头
下边我们要写controller来实现路由
我们先把list.html放到emps包里边方便管理
然后新建EmployeeController.java类,
package com.zhanshen.springbootweb.controller; import com.zhanshen.springbootweb.dao.EmployeeDao; import com.zhanshen.springbootweb.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 { /** * 这个是员工的Dao层,查询所有员工,之前的代码我们引入了,里边有查询的方法 */ @Autowired EmployeeDao employeeDao; //查询所有员工 @GetMapping("/emps") public String list(Model model) { /** * 查询得到所有的员工,然后传入Model ,用于把查询得到的查询所有的数据放到请求域中,最后返回到list.html里边 */ Collection<Employee> employees = employeeDao.getAll(); model.addAttribute("emps", employees); return "emps/list"; } }
这样就可以跳转到list页面
2.公共代码片段的抽取
我们会发现list的侧导航栏和头部导航栏的内容是一样的,所以我们可以让他们去共用一套代码
这里的头部和侧栏都是公用的,我们找到他们的代码
,先来看头部的栏目
代码是body里边的一个叫做<nav>标签的导航栏
通过th:fragment="xxx"可以把它作为公共的模板,然后我们在其他地方引入
利用th:insert"~{模板名 :: 模块名}"来引入
会发现,我们的div里边就是我们引入的模块
当然我们发现,我们在原来的nav标签上边又套了一层div这并不是很友好,所以我们还有其他的两种写法,这三种写法分别如下
th:insert"~{模板名:: 模块名}"
th:replace"~{模板名:: 模块名}"
th:include"~{模板名:: 模块名}"
第一个的用法我们看到了就是在你所写的标签里边插入,这样会多出一层标签,下面两个用法如下
<footer th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </footer>
<body> ... <div th:insert="footer :: copy"></div> <div th:replace="footer :: copy"></div> <div th:include="footer :: copy"></div> </body>
我们比较效果如下
<body> ... <div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> </div> <footer> © 2011 The Good Thymes Virtual Grocery </footer> <div> © 2011 The Good Thymes Virtual Grocery </div> </body>
发现第二个是我们想要的,把他所在的标签做替换,第三个则是把要包含的标签去掉,取里边的内容
于是我们换成第二个就好了
这样nav就引入进来了
我们也把左侧的导航栏引入进来
除了用th:fragment外我们还可以直接用选择器,如下:
设置id为leftbar
然后
这样既可
