SpringBoot视图解析与模板引擎

我不是女神ヾ 2023-10-11 20:28 53阅读 0赞

**目录**

1、视图解析

1、视图解析原理流程

2、模板引擎-Thymeleaf

1、thymeleaf简介

2、基本语法

3、设置属性值-th:attr

4、迭代

5、条件运算

6、属性优先级

3、thymeleaf使用

1、引入Starter

2、自动配置好了thymeleaf

3、页面开发

4、构建后台管理系统

1、项目创建

2、静态资源处理

3、路径构建

4、模板抽取

5、页面跳转

6、数据渲染

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

视图解析：**SpringBoot默认不支持 JSP，需要引入第三方模板引擎技术实现页面渲染。**

### 1、视图解析 ###

![10717df4d99c494da40ab54eb7aa0a5c.png][]

#### 1、视图解析原理流程 ####

![f2d920a0535c4cbd8eb0eb8722138845.png][]

![ef9735db80192965fed1a517e6c59510.png][]

![1ef7008fe27b58bd90cbb63f9c2fc2a6.png][]

![970eb1a25b2de970831bc6e01d162ca7.png][]

![028cefd095c030d3cc60b9ddd6f8ce61.png][]

### 2、模板引擎-Thymeleaf ###

#### 1、thymeleaf简介 ####

官网文档：[Documentation - Thymeleaf][]

Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text.

**简而言之：现代化、服务端Java模板引擎**

#### 2、基本语法 ####

**1、表达式**

<table> 
 <tbody> 
  <tr> 
   <td> <p>表达式名字</p> </td> 
   <td> <p>语法</p> </td> 
   <td> <p>用途</p> </td> 
  </tr> 
  <tr> 
   <td> <p>变量取值</p> </td> 
   <td> <p>${...}</p> </td> 
   <td> <p>获取请求域、session域、对象等值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>选择变量</p> </td> 
   <td> <p>*{...}</p> </td> 
   <td> <p>获取上下文对象值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>消息</p> </td> 
   <td> <p>#{...}</p> </td> 
   <td> <p>获取国际化等值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>链接</p> </td> 
   <td> <p>@{...}</p> </td> 
   <td> <p>生成链接</p> </td> 
  </tr> 
  <tr> 
   <td> <p>片段表达式</p> </td> 
   <td> <p>~{...}</p> </td> 
   <td> <p>jsp:include 作用，引入公共页面片段</p> </td> 
  </tr> 
 </tbody> 
</table>

**2、字面量**

文本值: **'one text'** **,** **'Another one!'** **,…**数字: **0** **,** **34** **,** **3.0** **,** **12.3** **,…**布尔值: **true** **,** **false**

空值: **null**

变量： one，two，.... 变量不能有空格

**3、文本操作**

字符串拼接: **+**

变量替换: **|The name is $\{name\}|**

**4、数学运算**

运算符: + , - , \* , / , %

**5、布尔运算**

运算符: **and** **,** **or**

一元运算: **!** **,** **not**

**6、比较运算**

比较: **>** **,** **<** **,** **>=** **,** **<=** **(** **gt** **,** **lt** **,** **ge** **,** **le** **)**等式: **==** **,** **!=** **(** **eq** **,** **ne** **)**

**7、条件运算**

If-then: **(if) ? (then)**

If-then-else: **(if) ? (then) : (else)**

Default: (value) **?: (defaultvalue)**

**8、特殊操作**

无操作： \_

#### 3、设置属性值-th:attr ####

设置单个值

设置多个值

以上两个的代替写法 th:xxxx

所有h5兼容的标签写法

[Tutorial: Using Thymeleaf][Tutorial_ Using Thymeleaf]

#### 4、迭代 ####

<tr th:each="prod : ${prods}">
            <td th:text="${prod.name}">Onions</td>
            <td th:text="${prod.price}">2.41</td>
            <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
      <td th:text="${prod.name}">Onions</td>
      <td th:text="${prod.price}">2.41</td>
      <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>

#### 5、条件运算 ####

<div th:switch="${user.role}">
      <p th:case="'admin'">User is an administrator</p>
      <p th:case="#{roles.manager}">User is a manager</p>
      <p th:case="*">User is some other thing</p>
    </div>

#### 6、属性优先级 ####

![62aca7a79bb5709a3dad558f05616676.png][]

###       3、thymeleaf使用 ###

####    1、引入Starter ####

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>

#### 2、自动配置好了thymeleaf ####

@Configuration(proxyBeanMethods = false)
    @EnableConfigurationProperties(ThymeleafProperties.class)
    @ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
    @AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
    public class ThymeleafAutoConfiguration { }

自动配好的策略  
●1、所有thymeleaf的配置值都在 ThymeleafProperties  
●2、配置好了 SpringTemplateEngine  
●3、配好了 ThymeleafViewResolver  
●4、我们只需要直接开发页面

public static final String DEFAULT_PREFIX = "classpath:/templates/";
    
    	public static final String DEFAULT_SUFFIX = ".html";  //xxx.html

#### 3、页面开发 ####

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1 th:text="${msg}">哈哈</h1>
    <h2>
        <a href="www.atguigu.com" th:href="${link}">去百度</a>  <br/>
        <a href="www.atguigu.com" th:href="@{link}">去百度2</a>
    </h2>
    </body>
    </html>

### 4、构建后台管理系统 ###

#### 1、项目创建 ####

thymeleaf、web-starter、devtools、lombok

#### 2、静态资源处理 ####

自动配置好，我们只需要把所有静态资源放到 static 文件夹下

#### 3、路径构建 ####

th:action="@\{/login\}"

#### 4、模板抽取 ####

文档：[Tutorial: Using Thymeleaf][Tutorial_ Using Thymeleaf 1]

![06c68fb508ff4182a849c40fda595a45.png][]

**th:insert/replace/include**

**区别：**

![5f1f18fe32e743479039ea25ed553fcd.png][]

![5c75c173596443bdb1ae9f9942bf1238.png][]

#### 5、页面跳转 ####

@PostMapping("/login")
        public String main(User user, HttpSession session, Model model){
    
            if(StringUtils.hasLength(user.getUserName()) && "123456".equals(user.getPassword())){
                //把登陆成功的用户保存起来
                session.setAttribute("loginUser",user);
                //登录成功重定向到main.html;  重定向防止表单重复提交
                return "redirect:/main.html";
            }else {
                model.addAttribute("msg","账号密码错误");
                //回到登录页面
                return "login";
            }
    
        }

#### 6、数据渲染 ####

@GetMapping("/dynamic_table")
        public String dynamic_table(Model model){
            //表格内容的遍历
            List<User> users = Arrays.asList(new User("zhangsan", "123456"),
                    new User("lisi", "123444"),
                    new User("haha", "aaaaa"),
                    new User("hehe ", "aaddd"));
            model.addAttribute("users",users);
    
            return "table/dynamic_table";
        }

<table class="display table table-bordered" id="hidden-table-info">
            <thead>
            <tr>
                <th>#</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
            </thead>
            <tbody>
            <tr class="gradeX" th:each="user,stats:${users}">
                <td th:text="${stats.count}">Trident</td>
                <td th:text="${user.userName}">Internet</td>
                <td >[[${user.password}]]</td>
            </tr>
            </tbody>
            </table>

[10717df4d99c494da40ab54eb7aa0a5c.png]: https://img-blog.csdnimg.cn/10717df4d99c494da40ab54eb7aa0a5c.png
[f2d920a0535c4cbd8eb0eb8722138845.png]: https://img-blog.csdnimg.cn/f2d920a0535c4cbd8eb0eb8722138845.png
[ef9735db80192965fed1a517e6c59510.png]: https://img-blog.csdnimg.cn/img_convert/ef9735db80192965fed1a517e6c59510.png
[1ef7008fe27b58bd90cbb63f9c2fc2a6.png]: https://img-blog.csdnimg.cn/img_convert/1ef7008fe27b58bd90cbb63f9c2fc2a6.png
[970eb1a25b2de970831bc6e01d162ca7.png]: https://img-blog.csdnimg.cn/img_convert/970eb1a25b2de970831bc6e01d162ca7.png
[028cefd095c030d3cc60b9ddd6f8ce61.png]: https://img-blog.csdnimg.cn/img_convert/028cefd095c030d3cc60b9ddd6f8ce61.png
[Documentation - Thymeleaf]: https://www.thymeleaf.org/documentation.html
[Tutorial_ Using Thymeleaf]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes
[62aca7a79bb5709a3dad558f05616676.png]: https://img-blog.csdnimg.cn/img_convert/62aca7a79bb5709a3dad558f05616676.png
[Tutorial_ Using Thymeleaf 1]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf
[06c68fb508ff4182a849c40fda595a45.png]: https://img-blog.csdnimg.cn/06c68fb508ff4182a849c40fda595a45.png
[5f1f18fe32e743479039ea25ed553fcd.png]: https://img-blog.csdnimg.cn/5f1f18fe32e743479039ea25ed553fcd.png
[5c75c173596443bdb1ae9f9942bf1238.png]: https://img-blog.csdnimg.cn/5c75c173596443bdb1ae9f9942bf1238.png