Spring Boot实战——公共页

      进行web开发的时候会经常遇到某些页面，它们的页面中某些地方是一样的，也就是说，这部分地方是公共的，每个页面的html代码都是一样的，这样的页面我们称为公共页。而本次实战中，我们要对公共页进行操作，简化公共页的繁杂性。

导言如下：

（0）预准备

（1）抽取公共页

（2）点击高亮

（0）预准备

      准备工作我曾经在Spring Boot实战——登录页中说过，其实步骤差不多，就是首先导入资源文件，我这次导入了两个公共页，并对其html代码进行部分修改，一个设置为主页（dashboard.html），另一个设置为副页（list.html）。项目目录结构如下：

其中我将公共部分放入了bar.html，这个我稍后会说。

      除此之外，项目还要导入thymeleaf的依赖，导入bootstrap 的依赖，在html代码中加入thymeleaf的语法提示，这些我在登录页的实战中都有说，大家可以去看看。

      下面展示两个html页面的公共部分的代码，核心部分代码因功能不同而做自行修改（*单纯代码是不会有页面渲染，还要加入css，js，图片才行）：

   

   

      

         
而完整代码运行效果如下：
dashboard.html:

list.html:

 
      这时候我们准备就完成了，我们首先要做的就是页面可以登录，这时候我们需要编辑controller，而编辑之前我们需要对旁边的主页和员工管理页面进行部分修改：

而我们观察html中有两段是有关两个按钮的a标签，a标签中有href进行链接（先dashboard.html再list.html）：


我们使用thymeleaf进行修改：


 
这时候我们编辑controller：
@Controller
public class MyController {

    //dashboard.html作为主页面
    @RequestMapping({"/","/dashboard"})
    public String dashboard(){
        return "dashboard";
    }

    //通过按钮“员工管理”跳转，通过get请求获取“/emp”
    @GetMapping("/emp")
    public String dashboardtolist(){
        //返回的是emp目录下的list.html
        //而thymeleaf默认拼串，所以前面静态资源文件夹不用存在
        return "emp/list";
    }

    //通过按钮“主页”跳转，通过get请求获取“/dashboard”
    @GetMapping("/dashboard")
    public String backdashboard(){
        return "dashboard";
    }

}
 
 
（1）公共页抽取
抽取公共部分我们首先需要知道公共部分是那些，所以我们需要在浏览器中打开页面通过开发者工具（F12打开），使用开发者工具观察公共部分是哪些：

找到公共部分，及它们对应的代码，这时候在IDEA中对公共部分抽取出来放在新建的一个html文件（bar.html）中
 
这时候我们就需要使用的thymeleaf中对公共部分的操作了：
（1）抽取公共片段 （将公共部分抽取出来）

    公共部分代码
  
 
（2）引入公共片段 （在原先html代码中插入）



其中：
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名   
 
（3）默认效果：
insert的公共片段在div标签中 
如果使用th:insert等属性进行引入，可以不用写~{}；
行内写法可以加上：[[~{}]];[(~{})]；
 
而除了insert的引入方式，还有三种引入公共片段的th属性：
th:insert：将公共片段整个插入到声明引入的元素中；

th:replace：将声明引入的元素替换为公共片段；

th:include：将被引入的片段的内容包含进这个标签中；
它们对应的效果分别为：

    
  
 

  


   公共部分

 
 
而我们也需要对刚刚发现的顶部公共部分和左边公共部分进行修改：
顶部部分代码：


左边部分代码：


 
其中要修改的部分分别为：


修改后分别为：


 
这时候需要在dashboard.html和list.html中进行公共部分的添加，而我们使用添加的方式就使用replace：
顶部则需要添加：

左边栏需要添加：

 
现在运行代码即可成功！
 
 
（2）点击高亮
我们观察页面发现左边栏部分有两个按钮“主页”和“页面管理”，它们现在仅是“主页”会高亮，而我们需要按不同按钮不同按钮高亮如何做，下面我们就来介绍thymeleaf的做法：
 
首先我们都要给这两个按钮引入变量，由变量的值来确定按钮的高亮，而高亮十分简单，即引入“active”即可：

a标签中的class路径中添加active即可高亮。
 
则我们需要修改主页按钮修改为（在公共页面bar.html中修改）：

页面管理修改为：

使用thymeleaf的条件运算符进行赋值
 
而我们在不同页面的html代码中由各自的需求进行修改：
比如在dashboard.html中我们需要“主页”高亮，则在主页的按钮中进行修改：

通过（）进行赋值。
 
同理，我们在list.html页面中需要“页面管理”高亮，则需要在页面管理按钮中修改为：

 
这时候运行程序即可成功！！
 
 
 
各个页面最终公共部分修改为：
bar.html:

    
    


    
    

 
dashboard.html:




   

      


         
         

 
list.html: