Thymeleaf 引入公共代码页面

王小婷

发布于 2019-06-16 12:59:07

2.5K0

发布于 2019-06-16 12:59:07

文章被收录于专栏：编程微刊编程微刊

前面写过，写前端页面的时候，尤其是写后台管理系统，每个页面都会遇到一些重复的代码，比如左侧导航栏，头部的信息，前面也做了一些整合，把代码放在了公共的页面，每个页面调用时只需要用script引入即可。

在HTML页面中引入公共的部分的代码

https://cloud.tencent.com/developer/article/1428911

但是项目里面用到的是Thymeleaf 模板，为了减少请求速度，用Thymeleaf 引入公共代码页面会提高页面跳转和打开的速度，虽然前端是有三大框架可以使用，但对于没有应用框架的代码里面，我们可以使用模板引擎来提高。

其实道理也挺简单的，和上面的文章的步骤差不多，

1：首先在templates底下新建一个com文件，用来存放侧边栏和顶部公共代码文件

顶部head.html

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<footer th:fragment="common_head">
    ....(此处为顶部公共部分代码，省略五百行)
</footer>
</head>
</html>

侧边栏side.html

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<footer th:fragment="common_side">
<div class="menu">
    .......(此处为侧边栏公共部分代码，省略五百行)
</div>
</footer>
</head>
</html>

2：现在假设我在写用户界面的模块,只需要在固定位置引入以上两个文件即可

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>用户管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div class="page-container">
        <div class="left-content">
            <div class="mother-grid-inner">
                <!--  顶部文件引入-->
                <div class="header-main">
                    <div id="head" th:include="com/head :: common_head"></div>
                </div>
                <div class="inner-block">
                    ...用户管理界面代码(此处省略n行代码)
                </div>
            </div>
        </div>
        <!--侧边栏导入-->
        <div class="sidebar-menu">
            <div th:include="com/side :: common_side"></div>
        </div>      
    </div>
</body>
</html>