基于 Spring Boot 博客系统开发（七）

本系统是简易的个人博客系统开发，为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。🌿🌿🌿
基于 Spring Boot 博客系统开发（六）👈👈

后台公共代码抽取

添加访问后台模板页的方法，AdminController

@Controller
@RequestMapping("/admin")
public class AdminController {@RequestMapping("/")public String home(){return "admin/index";}@RequestMapping("/list")public String list(){return "admin/list";}@RequestMapping("/edit")public String edit(){return "admin/edit";}}

创建 include.html 用于存储公共部分代码，使用 th:fragment

抽取公共代码到 include 文件中
在这里插入图片描述

引用公共代码

index.html 整理后代码
在这里插入图片描述

list.html 整理后代码

在这里插入图片描述

edit.html 整理后代码，非公共代码需要保留

在这里插入图片描述

实现点击菜单高亮

基于上面公共代码抽取后，但是不同页面所需要公共代码需要进行调整，就需要主页面传递参数到公共代码模板中。
admin/index.html 页面中，传递了实参1值。

<th:block th:include="admin/include :: header-menu(1)" />

抽取页面 admin/include 中，可以定义形参tag。使用tag形参配合 th:classappend 添加样式，这里顺便修改了a标签链接。

<div th:fragment="header-menu(tag)" >
......这里省略<ul><li><a href="/admin/" class="waves-effect " th:classappend="${tag == 1?'active':''}"><i class="fa fa-dashboard" aria-hidden="true"></i><span> 仪表盘 </span></a></li><li ><a href="/admin/edit" class="waves-effect" th:classappend="${tag == 2?'active':''}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><span> 发布文章 </span></a></li><li><a href="/admin/list" th:classappend="${tag == 3?'active':''}"class="waves-effect"><iclass="fa fa-list" aria-hidden="true"></i><span> 文章管理 </span></a></li></ul>
......这里省略
</div>