从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • JavaSE

  • JavaSenior

  • JavaEE

  • JavaWeb

  • Spring

  • 主流框架

  • SpringMVC

  • SpringBoot

    • SpringBoot教程-尚硅谷

      • SpringBoot 课程介绍
      • Spring 和 SpringBoot
      • HelloWorld
      • 了解自动配置原理
      • 底层注解-@Configuration 详解
      • 底层注解-@Import 导入组件
      • 底层注解-@Conditional 条件装配
      • 原生配置文件引入-@ImportResource
      • 底层注解-配置绑定 @ConfigurationProperties
      • 自动配置原理
      • 自动配置流程
      • Lombok 简化开发
      • DevTools
      • Spring-Initailizr
      • 配置文件-Yaml 用法
      • Web 开发简介
      • web 开发-静态资源规则于定制化
      • 静态资源配置原理
      • Rest 映射及源码解析
      • 请求映射原理
      • 常用参数注解使用
      • MatrixVariable:矩阵变量
      • 各种类型参数解析原理
      • Servlet-API 参数解析原理
      • Model、Map 参数解析原理
      • 自定义对象参数绑定原理
      • 自定义 Converter 原理
      • 数据响应原理
      • 内容协商原理
      • 基于请求参数的内容原理
      • 自定义 MessageConverter 原理
      • Thymeleaf 初体验
      • web 实验-后台管理系统
      • web 实验-抽取公共页面
        • 需求
        • 新建文件夹
        • 新建表格处理的 Controller
        • 重复代码分析
        • 抽取公共页面
        • 替换
        • 源码
      • web 实验-遍历数据
      • 源码分析-视图解析器与视图
      • 拦截器-登录检查与静态资源放行
      • 拦截器的执行时机和原理
      • 单文件和多文件上传的使用
      • 文件上传原理
      • 错误处理机制
      • 错误处理-底层组件源码分析
      • 异常处理流程
      • 几种异常处理原理
      • Web 原生对象注入
      • 嵌入式 Servlet 容器
      • 定制化原理
      • 数据库场景的自动配置分析和整合测试
      • 自定义方式整合 Druid
      • 通过 starter 整合 Druid
      • 整合 Mybatis
      • 使用注解整合 Mybatis
      • 整合 MybatisPlus 操作数据库
      • MybatisPlus-列表分页展示
      • 整合 Redis
      • 单元测试-Junit5
      • 单元测试-断言机制
      • 单元测试-前置条件
      • 单元测试-嵌套测试
      • 单元测试-参数化测试
      • 指标监控-基本概念
      • 指标监控-配置 EndPoint
      • 指标监控-可视化
      • 原理解析-Profile 功能
      • 配置文件深入
      • 自定义 Starter
      • SpringApplication 初始化过程
      • SpringBoot 完整启动过程
  • Java
  • SpringBoot
  • SpringBoot教程-尚硅谷
2023-08-22
目录

web 实验-抽取公共页面

# 340.web 实验-抽取公共页面

继续完善我们的后台管理系统

# 需求

登录后,首页左侧有很多菜单,此时点进去都是不能正常跳转的;

‍

我们完善 Data Table 下所有功能,使其能正常跳转:

‍

# 新建文件夹

由于功能很多,全部页面放在一个文件夹不太方便,因此新建一个 src/main/resources/templates/table 文件夹,存放表格相关的页面。 ‍ 然后我们将《前端资源文件 demo》目录下这几个文件,放到 table 文件夹:

  • basic_table.html
  • responsive_table.html
  • dynamic_table.html
  • editable_table.html
  • pricing_table.html

# 新建表格处理的 Controller

新增一个 Controller,用来返回 table 下的页面:

package com.peterjxl.learnspringbootwebadmin.controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class TableController {


    @GetMapping("/basic_table")
    public String basic_table(){
        return "table/basic_table";
    }

    @GetMapping("/dynamic_table")
    public String dynamic_table(){
        return "table/dynamic_table";
    }

    @GetMapping("/responsive_table")
    public String responsive_table(){
        return "table/responsive_table";
    }
  
    @GetMapping("/editable_table")
    public String editable_table(){
        return "table/editable_table";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

‍ 然后我们访问相关链接,是能正常访问的:

# 重复代码分析

我们首页,跳转到表格功能的页面,是访问的 HTML:

<li><a href="basic_table.html"> Basic Table</a></li>
<li><a href="dynamic_table.html"> Advanced Table</a></li>
<li><a href="responsive_table.html"> Responsive Table</a></li>
<li><a href="editable_table.html"> Edit Table</a></li>
1
2
3
4

‍ 除了首页,表格功能部分的页面,也有左侧的菜单栏,其也是通过 HTML 的方式访问的,要改的话不太方便;

考虑到左侧菜单页,以及顶部的菜单栏是公共的,可以抽取;只有内容区域不一样。

‍

首先,打开 main.html,head 标签里主要是引入了一些 CSS,然后左侧菜单栏的相关代码大概有 100 多行(注释也很清晰);然后紧接着是内容区的代码;再下面则是引入了一些 JS。

ps:菜单顶部的代码,其实是在内容区的代码中 ‍ 其他页面同理(例如 basic_table.html),大概也是这样的结构。(也就是 CSS 和 JS 的引入,也有公共的部分) ‍

# 抽取公共页面

‍ 新建 resources/templates/common.html,用来放公共的内容。首先是 CSS 和 JS 的引入:

<!DOCTYPE html>
<html lang="en">
<head>
  <!--common-->
  <link href="css/style.css" rel="stylesheet">
  <link href="css/style-responsive.css" rel="stylesheet">
</head>
<body>

   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/jquery-ui-1.9.2.custom.min.js"></script>
   <script src="js/jquery-migrate-1.2.1.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/modernizr.min.js"></script>
   <script src="js/jquery.nicescroll.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后我们改为 Thymeleaf 的取值方式:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href="css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link href="css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet">
    <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
    <script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
</head>
<body>

  
   <script th:src="@{js/jquery-1.10.2.min.js}"></script>
   <script th:src="@{js/jquery-ui-1.9.2.custom.min.js}"></script>
   <script th:src="@{js/jquery-migrate-1.2.1.min.js}"></script>
   <script th:src="@{js/bootstrap.min.js}"></script>
   <script th:src="@{js/modernizr.min.js}"></script>
   <script th:src="@{js/jquery.nicescroll.js}"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后就是 copy 一份 main 页面中,左侧菜单栏和顶部菜单的代码,放到 common.html 了;由于代码很多,这里就不 copy 了。

接下来我们看看 Thymeleaf 的 官网文档 (opens new window),是如何说明抽取的:

‍

简单来说,就是定义一个标签,里面用上 th:fragment;然后要在引入的页面中,使用 th:insert。

除此之外,也可以不声明 th:fragment,而是直接使用 CSS 选择器,直接引入某个页面的标签:

‍

根据文档,修改 common.html 如下:添加 id 或 th:fragment 属性

‍

# 替换

声明了公共页面后,下一步就是替换了,根据 官网文档 (opens new window),主要是通过 th:insert , th:replace 和 th:include 属性,然后属性值则写某个页面的名字(不用前缀和后缀)。假设公告部分是这样:

<footer th:fragment="copy">
  &copy; 2011 The Good Thymes Virtual Grocery
</footer>
1
2
3

‍ 然后其他页面这样引入:

 <div th:insert="~{footer :: copy}"></div>

 <div th:replace="~{footer :: copy}"></div>

<div th:include="footer :: copy"></div>
1
2
3
4
5

‍ 渲染的结果:


  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

 <div>
    &copy; 2011 The Good Thymes Virtual Grocery
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

‍ 其实根据名字,应该也能猜出来,这里就不赘述了。注意,th:include 虽然不推荐使用,但这里为了方便演示,还是用了下。

# 替换 CSS

接下来我们替换 main 页面,将 main 页面的如下内容:

 <!--common-->
  <link href="css/style.css" rel="stylesheet">
  <link href="css/style-responsive.css" rel="stylesheet">




  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
1
2
3
4
5
6
7
8
9
10
11
12

‍ 替换为如下内容:

 <link th:include="common :: commonheader">
1

‍ 然后我们重启,重新登录,可以看到能正常显示,这就说明替换成功了;而且打开控制台,也能看到有代码:

‍

也能看到有请求 style.css:

‍

如果使用 th:replace 属性,则会有两个 head 标签,只不过浏览器能帮我们修正这种情况:

‍

# 替换 JS

同理,将 main 页面的如下内容:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
1
2
3
4
5
6

‍ 替换为:

<div th:replace="common :: #commonscript"></div>
1

‍ 查看源代码,也能看到:

‍

# 替换菜单栏和顶部菜单

‍

<div th:replace="common :: #leftmenu"></div>

<div th:replace="common :: headermenu"></div>
1
2
3

# 修改超链接

我们修改 common 页面中,关于表格功能的超链接,

<li class="menu-list"><a href="#"><i class="fa fa-th-list"></i> <span>Data Tables</span></a>
    <ul class="sub-menu-list">
        <li><a th:href="@{basic_table}"> Basic Table</a></li>
        <li><a th:href="@{dynamic_table}"> Advanced Table</a></li>
        <li><a th:href="@{responsive_table}"> Responsive Table</a></li>
        <li><a th:href="@{editable_table}"> Edit Table</a></li>
    </ul>
</li>
1
2
3
4
5
6
7
8

# 其他页面

同理,将 table 相关的页面也替换菜单和顶部、CSS 和 JS 的引入部分 ‍

# 源码

已将本文源码上传到 Gitee (opens new window) 或 GitHub (opens new window) 的分支 demo2,读者可以通过切换分支来查看本文的示例代码 ‍

上次更新: 2025/5/17 12:26:09
web 实验-后台管理系统
web 实验-遍历数据

← web 实验-后台管理系统 web 实验-遍历数据→

最近更新
01
吐槽一下《僵尸校园》
05-15
02
2025 年 4 月记
04-30
03
山西大同 “订婚强奸案” 将会给整个社会带来的影响有多严重? - 知乎 转载
04-26
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式