Thymeleaf 模板引擎入门案例 结合 SpringBoot框架(二)

Thymeleaf 模板引擎入门案例 结合 SpringBoot框架(二)

• 预期效果：点击侧边栏哪个选项时，该选项高亮

• 做法：引入片段的时候传入参数

  th:class="${activeUri == 'main.html'? 'nav-link active':'nav-link'}"

<a class="nav-link active"
                   th:class="${activeUri == 'main.html'? 'nav-link active':'nav-link'}"
                   href="#" th:href="@{/main.html}">

• 页面引入片段时需要传参

<!--引入sidebar-->
				<div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>

需要特别注意：这种写法是不对的！ 

<!--引入侧边栏-->
				<div th:replace="~{commons/bar::#sidebar(activeUri='emps')}"></div>

应改为 => 

th:replace="commons/bar::#sidebar(activeUri='emps')"

<!--引入侧边栏-->
				<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

 

• list.html 前端页面遍历 后端controller传递的数据Collection

• 注：这里的传参 ModelAndView使用错误，需要进行修改

@Controller
public class EmployeeController {
    @Autowired
    private EmployeeDao ed;

    //查询所有员工返回列表页面
    @GetMapping("/emps")
    public String list(ModelAndView mv) {
        Collection<Employee> employees = ed.getAll();
        mv.addObject("emps", employees);
        //thymeleaf默认会拼串 classpath:/templates/ .html
        return "emp/list";
    }
}

• SpringMVC响应数据和结果视图

• Map,Model,ModelMap 隐形参数的作用和关系(重点)
  使用Map传递页面数据
  使用Model传递页面数据
  使用ModelMap传递页面数据
  总结:以上三个隐形参数传过来的是同一个实现类对象:BindingAwareModelMap,底层都会把键值对数据放到
  request作用域中.

• @GetMapping("/emps")
      public String list(Model model) {
          Collection<Employee> employees = ed.getAll();
          System.out.println(employees.size());
          model.addAttribute("emps", employees);
          //thymeleaf默认会拼串 classpath:/templates/ .html
          return "emp/list";
      }

  list.html页面 使用 thymeleaf模板遍历结果集：

• <table class="table table-striped table-sm">
  							<thead>
  								<tr>
  									<th>#</th>
  									<th>lastName</th>
  									<th>email</th>
  									<th>gender</th>
  									<th>department</th>
  									<th>birth</th>
  								</tr>
  							</thead>
  							<tbody>
  								<!--遍历emps，取出的每个变量为emp-->
  								<tr th:each="emp:${emps}">
  									<td th:text="${emp.id}"></td>
  									<td>[[${emp.lastName}]]</td>
  									<td th:text="${emp.email}"></td>
  									<td th:text="${emp.gender}==0?'女':'男'"></td>
  									<td th:text="${emp.department.departmentName}"></td>
  									<td th:text="${emp.birth}"></td>
  								</tr>
  							</tbody>
  						</table>

  页面效果

• 

 补充：使用thymeleaf修改页面日期格式显示

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

 页面效果：