JSP 、Thymeleaf 、 JavaScript 和Vue

文章目录

• [一、 JSP 、Thymeleaf 、 JavaScript Vue](#一、 JSP 、Thymeleaf 、 JavaScript Vue)
• [1. 角色比喻（最容易懂）](#1. 角色比喻（最容易懂）)
• [2. 运行位置（核心区别）](#2. 运行位置（核心区别）)
• [3. 代码长什么样（直观对比）](#3. 代码长什么样（直观对比）)
• • [① JSP（服务器端，嵌 Java）](#① JSP（服务器端，嵌 Java）)
  • [② Thymeleaf（服务器端，模板语法）](#② Thymeleaf（服务器端，模板语法）)
  • [③ JavaScript（浏览器端，真·前端）](#③ JavaScript（浏览器端，真·前端）)
  • [④ Vue（浏览器端，框架）](#④ Vue（浏览器端，框架）)
• [4. 执行流程（最关键）](#4. 执行流程（最关键）)
• • [JSP / Thymeleaf 流程（服务器渲染）](#JSP / Thymeleaf 流程（服务器渲染）)
  • [JavaScript / Vue 流程（浏览器渲染）](#JavaScript / Vue 流程（浏览器渲染）)
• [5. 最终极简总结](#5. 最终极简总结)
• [6. 你最关心的：Thymeleaf 到底像谁？](#6. 你最关心的：Thymeleaf 到底像谁？)
• 二、thymleaf可以取代jsp
• • [JSP 能做的，Thymeleaf 全能做到](#JSP 能做的，Thymeleaf 全能做到)
  • 那为什么还有人说"不能完全替代"？
  • 一句话总结
• [三、JSP ↔ Thymeleaf 对照速查表](#三、JSP ↔ Thymeleaf 对照速查表)
• • [1. 取后端变量（最常用）](#1. 取后端变量（最常用）)
  • • [JSP（EL 表达式）](#JSP（EL 表达式）)
    • Thymeleaf
  • [2. 循环遍历列表](#2. 循环遍历列表)
  • • [JSP + JSTL](#JSP + JSTL)
    • Thymeleaf
  • [3. if 判断](#3. if 判断)
  • • [JSP + JSTL](#JSP + JSTL)
    • Thymeleaf
  • [4. if...else](#4. if...else)
  • • [JSP + JSTL](#JSP + JSTL)
    • Thymeleaf
  • [5. 页面包含（头部、底部）](#5. 页面包含（头部、底部）)
  • • JSP
    • Thymeleaf
  • [6. 链接 / 路径](#6. 链接 / 路径)
  • • JSP
    • Thymeleaf
  • [7. 表单输入框回显](#7. 表单输入框回显)
  • • JSP
    • Thymeleaf
    • [Spring 绑定（更推荐）](#Spring 绑定（更推荐）)
  • [8. 日期格式化](#8. 日期格式化)
  • • [JSP + JSTL](#JSP + JSTL)
    • Thymeleaf
  • [9. 判空](#9. 判空)
  • • JSP
    • Thymeleaf
  • [10. Session 取值](#10. Session 取值)
  • • JSP
    • Thymeleaf
  • [11. 问号默认值（空值处理）](#11. 问号默认值（空值处理）)
  • • JSP
    • Thymeleaf
• 极简记忆口诀

一、 JSP 、Thymeleaf 、 JavaScript Vue

• JSP、Thymeleaf：服务器端，拼 HTML 的
• JavaScript、Vue：浏览器端，动页面的

1. 角色比喻（最容易懂）

• JSP：老厨师，在厨房一边炒菜一边写菜单，很乱
• Thymeleaf：新厨师，在厨房按模板做好菜，端出去就是成品
• JavaScript：服务员，菜上桌后在你面前调整摆盘、互动
• Vue：智能服务员，一套完整流程帮你搞定页面交互

2. 运行位置（核心区别）

技术	在哪运行？	浏览器拿到的是什么？
JSP	服务器（Tomcat）	纯 HTML
Thymeleaf	服务器（Tomcat）	纯 HTML
JavaScript	浏览器（Chrome/Edge）	JS 代码 + HTML
Vue	浏览器	Vue 组件 + JS

3. 代码长什么样（直观对比）

① JSP（服务器端，嵌 Java）

<%
User user = (User)request.getAttribute("user");
String name = user.getName();
%>
欢迎您：<%= name %>

特点：Java 代码直接写页面里，又乱又老。

② Thymeleaf（服务器端，模板语法）

<p th:text="${user.name}">欢迎您</p>

特点：没有 Java，没有 JS，就是 HTML 加 th: 属性。

③ JavaScript（浏览器端，真·前端）

<p id="name"></p>
<script>
  let user = { name: "张三" };
  document.getElementById("name").innerText = user.name;
</script>

特点：在浏览器里跑，动态改页面。

④ Vue（浏览器端，框架）

<p>{{ user.name }}</p>
<script>
export default {
  data() {
    return { user: { name: '张三' } }
  }
}
</script>

特点：语法像 Thymeleaf，但完全在浏览器跑。

4. 执行流程（最关键）

JSP / Thymeleaf 流程（服务器渲染）

1. 浏览器请求页面
2. 服务器执行 JSP/Thymeleaf，拼好完整 HTML
3. 服务器把纯 HTML发给浏览器
4. 浏览器只负责展示，看不到任何模板代码

JavaScript / Vue 流程（浏览器渲染）

1. 服务器发 HTML + JS/Vue 代码
2. 浏览器自己执行 JS/Vue，渲染页面
3. 页面可以无刷新交互、动态变化

5. 最终极简总结

• JSP = 服务器端老模板，能写 Java，很乱
• Thymeleaf = 服务器端新模板，不写 Java，干净
• JavaScript = 浏览器端脚本，真·前端语言
• Vue = 基于 JS 的前端框架

6. 你最关心的：Thymeleaf 到底像谁？

• 语法长得像 Vue / JS
• 本质完全是服务器模板，和 JSP 一类
• 绝对不是前端语言

如果你在学 Spring Boot，记住一句话就行：
用 Thymeleaf 代替 JSP，不要在页面写任何 Java 代码。

二、thymleaf可以取代jsp

日常开发里，Thymeleaf 完全能替代 JSP 的所有实用功能，而且做得更干净、更规范。

只有极少数极老、极偏门的场景才用不了，但你 99.9% 遇不到。

JSP 能做的，Thymeleaf 全能做到

JSP 核心就这几件事，Thymeleaf 全部能替代：

1. 取后端数据

   • JSP：<%= user.getName() %> / ${user.name}
   • Thymeleaf：th:text="${user.name}"
     → 功能一样，写法更干净

2. 循环遍历列表

   • JSP：<c:forEach items="${list}" var="item">
   • Thymeleaf：th:each="item : ${list}"
     → 更简洁，不用引 JSTL

JSTL 到底是干嘛的？

它就干 4 件事：

循环 → <c:forEach>

判断 → <c:if>、<c:choose>

格式化日期、数字 → fmt:formatDate

操作字符串、集合

本质：

在 JSP 里不用写 Java 代码，用标签实现逻辑。

3. if / else 判断

   • JSP：<% if(...) { %> 或 <c:if>
   • Thymeleaf：th:if、th:unless、th:switch
     → 纯 HTML 风格，不嵌代码

4. 表单提交、数据回显

   • JSP：手写 value="<%=...%>"
   • Thymeleaf：th:field="*{username}"
     → Spring 集成更强，自动绑定、错误提示

5. 包含公共页面（头部、底部）

   • JSP：<%@ include %> / <jsp:include>
   • Thymeleaf：th:insert / th:replace
     → 模块化更强，更灵活

6. 获取请求、session、内置对象

   • JSP：request / session / application
   • Thymeleaf：${param.name}、${session.user}
     → 一样能用，语法更统一

7. 日期、字符串、数字格式化

   • JSP：要写 Java 代码或 JSTL 函数
   • Thymeleaf：内置 #dates、#strings、#numbers
     → 更方便，不用自己拼工具类

那为什么还有人说"不能完全替代"？

只有这些极端老场景 Thymeleaf 不支持：

1. 在页面里直接写一大段 Java 逻辑

   • JSP：<% 一堆代码 %> 随便写
   • Thymeleaf：禁止写 Java 代码
     但这不是缺点，是规范------业务逻辑本该写在 Controller/Service 里。

2. 直接操作 Servlet 内部 API

   • JSP 本质就是 Servlet，可以调用 getWriter()、forward 等
   • Thymeleaf 只做模板渲染，不暴露底层 Servlet
     正常项目根本不需要这么干。

3. 极度老旧的框架、依赖 JSP 特有标签

   比如老 Struts、老 EJB 等，现在基本没人用了。

一句话总结

只要你是正常做 Spring Boot / SpringMVC 项目：

• Thymeleaf = JSP 的现代化、干净版
• 能实现 JSP 所有实际业务功能
• 还比 JSP 更好维护、前后端更好协作

你完全可以放心把 JSP 扔掉，全程用 Thymeleaf。

三、JSP ↔ Thymeleaf 对照速查表

1. 取后端变量（最常用）

JSP（EL 表达式）

${user.name}

Thymeleaf

<span th:text="${user.name}"></span>

2. 循环遍历列表

JSP + JSTL

<c:forEach items="${userList}" var="user">
    <div>${user.name}</div>
</c:forEach>

Thymeleaf

<div th:each="user : ${userList}">
    <span th:text="${user.name}"></span>
</div>

3. if 判断

JSP + JSTL

<c:if test="${user.age >= 18}">
    成年人
</c:if>

Thymeleaf

<span th:if="${user.age >= 18}">成年人</span>

4. if...else

JSP + JSTL

<c:choose>
    <c:when test="${user.vip}">VIP 用户</c:when>
    <c:otherwise>普通用户</c:otherwise>
</c:choose>

Thymeleaf

<span th:if="${user.vip}">VIP 用户</span>
<span th:unless="${user.vip}">普通用户</span>

5. 页面包含（头部、底部）

JSP

<%@ include file="header.jsp" %>

Thymeleaf

<div th:replace="fragments/header :: header"></div>

6. 链接 / 路径

JSP

<a href="/user/detail?id=${user.id}">详情</a>

Thymeleaf

<a th:href="@{/user/detail(id=${user.id})}">详情</a>

7. 表单输入框回显

JSP

<input type="text" name="username" value="${user.username}">

Thymeleaf

<input type="text" th:value="${user.username}">

Spring 绑定（更推荐）

<input th:field="*{username}">

8. 日期格式化

JSP + JSTL

<fmt:formatDate value="${user.createTime}" pattern="yyyy-MM-dd"/>

Thymeleaf

<span th:text="${#dates.format(user.createTime, 'yyyy-MM-dd')}"></span>

9. 判空

JSP

<c:if test="${not empty userList}">
    有数据
</c:if>

Thymeleaf

<span th:if="${not #lists.isEmpty(userList)}">有数据</span>

10. Session 取值

JSP

${sessionScope.loginUser}

Thymeleaf

<span th:text="${session.loginUser.name}"></span>

11. 问号默认值（空值处理）

JSP

${user.name!='无'? user.name : '匿名用户'}

Thymeleaf

<span th:text="${user.name} ?: '匿名用户'"></span>

极简记忆口诀

• JSP：${} 直接写
• Thymeleaf：都包在 th:* 属性里
• 循环：th:each
• 判断：th:if / th:unless
• 链接：@{}
• 日期：#dates
• 列表：#lists