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
然后
这样既可
