前言在 Java Web 开发中我们经常遇到一个问题后台管理系统的头部、侧边栏、底部是固定的每个页面都要重复写一遍这些 HTML 结构不仅代码臃肿维护起来也非常痛苦。传统的做法是用% include %静态包含但这种方式不够灵活——每个页面还是得手动引入多个文件。本文将介绍一种更优雅的解决方案利用 JSP Tag File 创建布局模板配合 Layui 前端框架打造一个干净、可复用的后台管理布局。先来看最终效果我们创建一个Layout.tag标签文件在任何 JSP 页面中只需几行代码就能生成完整的后台管理页面。一、什么是 JSP Tag FileTag File 是 JSP 2.0 引入的一种技术它允许开发者用 JSP 语法来创建自定义标签而不需要编写 Java 类。简单来说Tag File 就是一个扩展名为.tag的文本文件结构和 JSP 文件非常相似。它被放置在WEB-INF/tags/目录下可以被任何 JSP 页面像使用普通标签一样调用。Tag File 最大的优势是不懂 Java 的人也能编写只需要掌握 JSP 语法即可。二、项目结构与准备工作2.1 目录结构前端项目结构你的Web项目/ ├── WEB-INF/ │ |── jsp/ | | └── views/ │ | └── user/ │ └── index.jsp ← 视图界面 │ ├── tags/ ← 存放所有 tag 文件 │ │ └── layout/ │ │ └── Layout.tag ← 我们的布局模板 │ └── components/ │ ├── app.jsp ← 公共资源引入CSS/JS │ └── layout/ │ ├── Header.jsp ← 头部组件 │ └── Side.jsp ← 侧边栏组件 ├── res/ │ └── layui/ ← Layui 前端框架 └── 项目结构2.2 引入 LayuiLayui 是一款轻量级、模块化的前端 UI 框架提供了完善的后台布局方案。你需要将 Layui 的资源文件放入res/layui/目录下。三、Layout.tag 标签文件详解公共资源的app.jsp代码meta namerenderer contentwebkit meta http-equivX-UA-Compatible contentIEedge,chrome1 meta nameviewport contentwidthdevice-width, initial-scale1 link href% request.getContextPath() %/res/layui/css/layui.css relstylesheet / script src% request.getContextPath() %/res/twcss/browser4.js/script script src% request.getContextPath() %/res/jquery/jquery-3.5.1.min.js/script script typetext/javascript src% request.getContextPath() %/res/jquery/jquery_Extend.js/script script src% request.getContextPath() %/res/layui/layui.js/script下面是完整的Header.jsp代码div classlayui-header div classlayui-logo layui-hide-xs layui-bg-blacklayout demo/div !-- 头部区域可配合layui 已有的水平导航 -- ul classlayui-nav layui-layout-left !-- 移动端显示 -- li classlayui-nav-item layui-show-xs-inline-block layui-hide-sm lay-header-eventmenuLeft i classlayui-icon layui-icon-spread-left/i /li li classlayui-nav-item layui-hide-xsa hrefjavascript:;nav 1/a/li li classlayui-nav-item layui-hide-xsa hrefjavascript:;nav 2/a/li li classlayui-nav-item layui-hide-xsa hrefjavascript:;nav 3/a/li li classlayui-nav-item a hrefjavascript:;nav groups/a dl classlayui-nav-child dda hrefjavascript:;menu 11/a/dd dda hrefjavascript:;menu 22/a/dd dda hrefjavascript:;menu 33/a/dd /dl /li /ul ul classlayui-nav layui-layout-right li classlayui-nav-item layui-hide layui-show-sm-inline-block a hrefjavascript:; img src//unpkg.com/outeres0.0.10/img/layui/icon-v2.png classlayui-nav-img tester /a dl classlayui-nav-child dda hrefjavascript:;Your Profile/a/dd dda hrefjavascript:;Settings/a/dd dda hrefjavascript:;Sign out/a/dd /dl /li %--li classlayui-nav-item lay-header-eventmenuRight lay-unselect a hrefjavascript:; i classlayui-icon layui-icon-more-vertical/i /a /li--% /ul /div下面是完整的Side.jsp代码div classlayui-side layui-bg-black div classlayui-side-scroll ul classlayui-nav layui-nav-tree lay-filtermenuInfo li classlayui-nav-item layui-nav-itemed a class hrefjavascript:;menu group 1/a dl classlayui-nav-child dda hrefjavascript:; urluser/indexmenu 1/a/dd dda hrefjavascript:; urlpark/indexmenu 2/a/dd dda hrefjavascript:; urlmenu3menu 3/a/dd dda hrefjavascript:; urlmenu4the links/a/dd /dl /li /ul /div /div下面是完整的Layout.tag代码% tag body-contentscriptless pageEncodingUTF-8 % % attribute nametitle requiredfalse % !DOCTYPE html html head jsp:include page/WEB-INF/components/app.jsp / title${title}/title style.layui-body { padding: 16px; }/style /head body script src% request.getContextPath() %/res/layui/layui.js/script div classlayui-layout layui-layout-admin jsp:include page/WEB-INF/components/layout/Header.jsp / jsp:include page/WEB-INF/components/layout/Side.jsp / div classlayui-body jsp:doBody / /div div classlayui-footer底部固定区域/div /div script/script /body /html3.1 第一行tag 指令% tag body-contentscriptless pageEncodingUTF-8 %这是 Tag File 的核心指令body-contentscriptless表示标签体内容不能包含 JSP 脚本片段即% ... %这种写法只能使用 EL 表达式${...}和 HTML。这是 JSP 2.0 推崇的无脚本开发方式。pageEncodingUTF-8指定文件编码为 UTF-8。3.2 attribute 指令定义标签属性% attribute nametitle requiredfalse %attribute指令用于定义标签的属性nametitle属性名使用标签时通过这个名称传值。requiredfalse该属性不是必填的。如果设为true使用标签时必须提供该属性。在标签体中我们可以通过${title}来获取这个属性的值。3.3 公共资源引入jsp:include page/WEB-INF/components/app.jsp /通过request.getContextPath()动态获取项目根路径确保资源路径在任何部署环境下都能正确访问。四、如何使用布局模板4.1 在 JSP 页面中引入标签库jsp% taglib tagdir/WEB-INF/tags/layout prefixlayout %tagdir指定 Tag File 所在的目录。prefix给这个标签库起一个前缀使用时通过前缀:标签名的方式调用。4.2 使用布局标签对应的控制器RequestMapping(value /user/index,method RequestMethod.GET) public ModelAndView user() { ModelAndView view new ModelAndView(); view.setViewName(/views/user/index); view.addObject(msg,sssss); return view; }% taglib tagdir/WEB-INF/tags/layout prefixt % % page contentTypetext/html;charsetUTF-8 languagejava % t:layout title用户管理 div用户管理/div /t:layout效果浏览器标题显示用户管理通过title属性传入。自动引入头部、侧边栏、底部。标签中间的内容用户列表表格被渲染到layui-body区域。五、核心概念总结5.1 body-contentscriptless 的意义这个设置强制标签体内容不能包含 JSP 脚本片段% ... %只能使用 EL 表达式和 JSTL 标签。✅ 允许的写法layout:Layout title${pageTitle} c:forEach items${userList} varuser trtd${user.name}/td/tr /c:forEach /layout:Layout❌ 禁止的写法layout:Layout title% request.getParameter(title) % % String name test; % /layout:Layout这样做的好处是强制实现了表现层与业务逻辑的分离让 JSP 页面更加干净、易于维护。5.2 Tag File vs JSP Include对比项Tag FileJSP Include复用方式作为自定义标签使用静态/动态包含传参能力支持 attribute 传参有限可通过 request 传参标签体支持jsp:doBody插槽不支持灵活性高可像普通标签一样使用较低只是单纯包含学习成本稍高低Tag File 本质上提供了一种比 JSP Include 更强大的页面模板化方法。5.3 Tag File 的存放位置Tag File 必须存放在WEB-INF/tags/目录或其子目录下。这是因为WEB-INF目录下的文件对客户端不可见保证了安全性。Tomcat 服务器会在这个指定目录中查找 Tag File。六、总结本文通过一个完整的 Layui 后台管理布局示例介绍了 JSP Tag File 的核心用法Tag File 是什么用 JSP 语法创建自定义标签的技术。如何创建在WEB-INF/tags/下创建.tag文件使用tag指令和attribute指令。核心机制jsp:doBody作为内容插槽body-contentscriptless保证代码规范。如何使用通过taglib指令引入像普通标签一样调用。通过这种方案你可以将后台管理系统的公共布局抽取为一个标签文件所有页面共用一套头部、侧边栏和底部只需关注各自的主体内容。这不仅减少了大量重复代码也让页面维护变得异常简单——修改一次布局所有页面同步更新。希望这篇教程对你有所帮助如果有任何问题欢迎在评论区交流讨论。