SpringMvc学习之旅与Thymeleaf的常用用法

客官°小女子只卖身不卖艺 2024-05-23 18:54 37阅读 0赞

![168c1abc67f4402ebfc99ff077a3e4da.gif][]

> 哈喽~大家好呀，这篇继续上篇的SpringMvc讲解与Thymeleaf的常用用法。
> 
> ?个人主页：[个人主页][Link 1]
> 
> ? 系列专栏：[【Java框架】 ][Java_]
> 
> ?与这篇相关的文章：
> 
> > <table> 
> >  <tbody> 
> >   <tr> 
> >    <td>&nbsp;【JAVAEE框架】MyBatis与Spring的整合（上）</td> 
> >    <td><a href="https://blog.csdn.net/aasd23/article/details/127166622?spm=1001.2014.3001.5501" title="【JAVAEE框架】MyBatis与Spring的整合（上）_程序猿追的博客-CSDN博客" rel="nofollow">【JAVAEE框架】MyBatis与Spring的整合（上）_程序猿追的博客-CSDN博客</a></td> 
> >   </tr> 
> >   <tr> 
> >    <td>【JAVAEE框架】浅谈 AOP 及代码实现</td> 
> >    <td><a href="https://blog.csdn.net/aasd23/article/details/126893196" title="【JAVAEE框架】浅谈 AOP 及代码实现_程序猿追的博客-CSDN博客" rel="nofollow">【JAVAEE框架】浅谈 AOP 及代码实现_程序猿追的博客-CSDN博客</a></td> 
> >   </tr> 
> >   <tr> 
> >    <td>【JAVAEE框架】浅谈 Spring 框架的两大核心思想 AOP 与 IOP</td> 
> >    <td><a href="https://blog.csdn.net/aasd23/article/details/126890139" title="【JAVAEE框架】浅谈 Spring 框架的两大核心思想 AOP 与 IOP_程序猿追的博客-CSDN博客" rel="nofollow">【JAVAEE框架】浅谈 Spring 框架的两大核心思想 AOP 与 IOP_程序猿追的博客-CSDN博客</a></td> 
> >   </tr> 
> >  </tbody> 
> > </table>

**目录**

一、前言

1、ModelAndView 详解

二、Servlet重定向forward与redirect

1、Model

三、thymeleaf 的用法

1、Thymeleaf 的特点

2、常用的语法

3、th属性

--------------------

## 一、前言 ##

### 1、ModelAndView 详解 ###

> 前面写到，当控制器处理完请求时，通常会将包含视图名称或视图对象以及一些模型属性的ModelAndView对象返回到DispatcherServlet。
> 
> ModelAndView 当中包含了一个model属性和一个view属性，model其实是一个 ModelMap 类型,它是一个LinkedHashMap的子类，view包含了一些视图信息。

**如何使用？**

> ModelAndView 通过 **setViewName**方法来实现跳转的页面。

**eg：**跳转的页面 mv.setViewName("user/userInfo"); 就是跳转到 user的userInfo页面

**addObject**

> addObject 该方法用于设置【前端页面要显示的数据是什么】；该方法的参数：可以是任何一个有效的Java对象；该方法默认把对象，存放在当前请求中的；
> 
> 通过设置键值对的方式来实现传给页面的值。

eg：

<body class="login_bg">
        <section class="loginBox">
            <header class="loginHeader">
                <h1>超市订单管理系统</h1>
            </header>
            <section class="loginCont">
                <form class="loginForm" action="${pageContext.request.contextPath }/user/login"  name="actionForm" id="actionForm"  method="post" >
                    <div class="info">${error }</div>
                    <div class="inputbox">
                        <label for="user">用户名：</label>
                        <input type="text" class="input-text" id="userCode" name="usercode" placeholder="请输入用户名" required/>
                    </div>  
                    <div class="inputbox">
                        <label for="mima">密码：</label>
                        <input type="password" id="userPassword" name="userpassword" placeholder="请输入密码" required/>
                    </div>  
                    <div class="subBtn">
                        
                        <input type="submit" value="登录"/>
                        <input type="reset" value="重置"/>
                    </div>  
                </form>
            </section>
        </section>
    </body>

该页面是超市管理系统的登录页面，看 **input 里面的name属性，用户名的name属性是usercode，那么addObject传值是 mv.addObject（“usercode”，xxx）来传值，`注：记得大小写一定要对上`**

## 二、Servlet重定向forward与redirect ##

> 使用servlet重定向有两种方式，一种是forward，另一种就是redirect。forward是服务器内部重定向，客户端并不知道服务器把你当前请求重定向到哪里去了，地址栏的url与你之前访问的url保持不变。redirect则是客户端重定向，是服务器将你当前请求返回，然后给个状态标示给你，告诉你应该去重新请求另外一个url，具体表现就是地址栏的url变成了新的url。

**eg：**

ModelAndView mv = new ModelAndView("/user/save/result");//默认为forward模式  
    
    ModelAndView mv = new ModelAndView("redirect:/user/save/result");//redirect模式

### 1、Model ###

> **Model 作用:** 作为数据流转的载体，相当于前端的一个数据库，就好比后端中的user实体类所对应的数据库User， 从Model中获取数据比从后端的User实体类中获取数据更加方便。

![img][]

如图，这是一个简单的实例，简单展示一下Model是怎么存储数据然后展示到前段页面的。

**控制层**

@Controller
    // 在Spring MVC 中使用 @RequestMapping 来映射请求，也就是通过它来指定控制器可以处理哪些URL请求，相当于Servlet中在web.xml中配置
    @RequestMapping("/user")
    public class UserAction {
    
        @RequestMapping("/test04")
        public String test02(Model model){
    
            User user = new User("Lucy","123456",18);
            // return "userInfo";
            System.out.println(user);
            model.addAttribute("user",user);
            return "userDetail";
        }
    }

**前台页面**

<html>
    <head>
        <title>Title</title>
    </head>
    <body>
    
        <h1>用户详情页</h1>
        <h1>姓名：${user.username}</h1>
        <h1>密码：${user.password}</h1>
        <h1>年龄：${user.age}</h1>
    
    </body>
    </html>

**访问地址**

[http://localhost:8080/day09\_SpringMvc01/user/test04][http_localhost_8080_day09_SpringMvc01_user_test04]

**效果**

![60ad0a8adeda4da2859074a13da31759.png][]

**如果使用 HttpServletRequest 或 HttpSession 来传数据呢？**

@RequestMapping("/test05")
        public String test03(User user, Model model, HttpServletRequest request, HttpSession session){
            user = new User("Lucy","123456",18);
            // return "userInfo";
    
            // user放入Session
            // 用到ServletAPI
            request.setAttribute("requestKey","requestValue");
            session.setAttribute("sessionKey","sessionValue");
    
            model.addAttribute("user",user);
            return "userDetail";
        }

**前台页面**

<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <h1>用户信息页面</h1>
        姓名：${user.name} <br>
        年龄：${user.age} <br>
        requestValue：${requestKey} <br>
        sessionValue：${sessionKey} <br>
    </body>
    </html>

**springMVC.xml 配置说明**

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:mvc="http://www.springframework.org/schema/mvc"
           xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        ">
    
    
    
    
        <context:component-scan base-package="com.itxzw">
            <context:exclude-filter type="regex" expression="com.itxzw.util"/>
        </context:component-scan>
    
        
        
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="prefix" value="/WEB-INF/view/"/>
            <property name="suffix" value=".jsp" />
        </bean>
    
        
    
        <mvc:annotation-driven />
    
    </beans>
    web.xml 配置说明
    
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
    
      <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:springMVC.xml</param-value>
        </init-param>
      </servlet>
      <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
      </servlet-mapping>
    
    
    </web-app>

**主要理解 DispatcherServlet 的流程理解，控制层传前台可以理解为使用了类似于键值对的方式进行获取值的。**

## 三、thymeleaf 的用法 ##

> Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。

使用它，需要在 html 标签中，增加额外属性来达到 “模板+数据” 的展示方式，示例代码如下。

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <h1 th:text="迎您来到Thymeleaf">欢迎您访问静态页面 HTML</h1>
    </body>
    </html>

**效果**

![5b1bbc178e2b44b88c1bac5ebf33a51a.png][]

### 1、Thymeleaf 的特点 ###

Thymeleaf 模板引擎具有以下特点：

> **动静结合：**Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。
> 
> **开箱即用：**Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
> 
> **多方言支持：**它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。
> 
> **与 SpringBoot 完美整合：**SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。

注：要使用 Thymeleaf 就要在 html 导入额外属性

xmlns:th="http://www.thymeleaf.org"

### 2、常用的语法 ###

表达式

**变量表达式：**$\{...\}

**选择变量表达式**：\*\{...\}

**链接表达式：**@\{...\}

**国际化表达式：**\#\{...\}

**片段引用表达式：**~\{...\}

本人常用的是变量表达式

假设获取 person 对象的 name属性，表达式形式如下：

${person.name}

### 3、th属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>th:id</td> 
   <td>替换 HTML 的 id 属性</td> 
   <td><code>&lt;input id="html-id" th:id="thymeleaf-id" /&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:text</td> 
   <td>文本替换，转义特殊字符</td> 
   <td><code>&lt;h1 th:text="hello，bianchengbang" &gt;hello&lt;/h1&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:utext</td> 
   <td>文本替换，不转义特殊字符</td> 
   <td><code>&lt;div th:utext="'&lt;h1&gt;欢迎来到编程帮！&lt;/h1&gt;'" &gt;欢迎你&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:object</td> 
   <td>在父标签选择对象，子标签使用 *{…} 选择表达式选取值。 没有选择对象，那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。 同时即使选择了对象，子标签仍然可以使用变量表达式。</td> 
   <td><code>&lt;div th:object="${session.user}" &gt; &lt;p th:text="*{fisrtName}"&gt;firstname&lt;/p&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:value</td> 
   <td>替换 value 属性</td> 
   <td><code>&lt;input th:value = "${user.name}" /&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:with</td> 
   <td>局部变量赋值运算</td> 
   <td><code>&lt;div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:style</td> 
   <td>设置样式</td> 
   <td><code>&lt;div th:style="'color:#F00; font-weight:bold'"&gt;编程帮 www.biancheng.net&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:onclick</td> 
   <td>点击事件</td> 
   <td><code>&lt;td th:onclick = "'getInfo()'"&gt;&lt;/td&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:each</td> 
   <td>遍历，支持 Iterable、Map、数组等。</td> 
   <td><code>&lt;table&gt; &lt;tr th:each="m:${session.map}"&gt; &lt;td th:text="${m.getKey()}"&gt;&lt;/td&gt; &lt;td th:text="${m.getValue()}"&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:if</td> 
   <td>根据条件判断是否需要展示此标签</td> 
   <td><code>&lt;a th:if ="${userId == collect.userId}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:unless</td> 
   <td>和 th:if 判断相反，满足条件时不显示</td> 
   <td><code>&lt;div th:unless="${m.getKey()=='name'}" &gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:switch</td> 
   <td>与 Java 的 switch case语句类似 通常与 th:case 配合使用，根据不同的条件展示不同的内容</td> 
   <td><code>&lt;div th:switch="${name}"&gt; &lt;span th:case="a"&gt;编程帮&lt;/span&gt; &lt;span th:case="b"&gt;www.biancheng.net&lt;/span&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:fragment</td> 
   <td>模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段</td> 
   <td><code>&lt;footer th:fragment="footer"&gt;插入的内容&lt;/footer&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:insert</td> 
   <td>布局标签； 将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。</td> 
   <td><code>&lt;div th:insert="commons/bar::footer"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:replace</td> 
   <td>布局标签； 使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。</td> 
   <td><code>&lt;div th:replace="commons/bar::footer"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:selected</td> 
   <td>select 选择框选中</td> 
   <td><code>&lt;select&gt; &lt;option&gt;---&lt;/option&gt; &lt;option th:selected="${name=='a'}"&gt; 编程帮 &lt;/option&gt; &lt;option th:selected="${name=='b'}"&gt; www.biancheng.net &lt;/option&gt;&lt;/select&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:src</td> 
   <td>替换 HTML 中的 src 属性</td> 
   <td><code>&lt;img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" /&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:inline</td> 
   <td>内联属性； 该属性有 text、none、javascript 三种取值， 在 &lt;script&gt; 标签中使用时，js 代码中可以获取到后台传递页面的对象。</td> 
   <td><code>&lt;script type="text/javascript" th:inline="javascript"&gt; var name = /*[[${name}]]*/ 'bianchengbang'; alert(name)&lt;/script&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:action</td> 
   <td>替换表单提交地址</td> 
   <td><code>&lt;form th:action="@{/user/login}" th:method="post"&gt;&lt;/form&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

> **不积跬步无以至千里，趁年轻，使劲拼，给未来的自己一个交代！向着明天更好的自己前进吧！**
> 
> ![d5358fcd619443fe98143f2fd5fef762.gif][]

[168c1abc67f4402ebfc99ff077a3e4da.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/8d7a1b3c09e844758d55f401a71d6ecb.gif
[Link 1]: https://blog.csdn.net/aasd23?spm=1000.2115.3001.5343
[Java_]: https://blog.csdn.net/aasd23/category_12005462.html
[img]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/995b71073abf451e9cef366763725a2b.png
[http_localhost_8080_day09_SpringMvc01_user_test04]: http://localhost:8080/day09_SpringMvc01/user/test04
[60ad0a8adeda4da2859074a13da31759.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/0b8c04ec344a41a7b412c1b366dbeca1.png
[5b1bbc178e2b44b88c1bac5ebf33a51a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/fc6d0265cc3f4c5eba88e6cf4510a28f.png
[d5358fcd619443fe98143f2fd5fef762.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/2a3db4c270974ab4aa836e153f0e0cfe.gif