# springboot-base-four

**Repository Path**: springbook_foundation/springboot-base-four

## Basic Information

- **Project Name**: springboot-base-four
- **Description**: springboot集成thymeleaf  thymeleaf语法说明
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## [thymeleaf官网](https://www.thymeleaf.org/)
## [本项目地址](https://gitee.com/springbook_foundation/springboot-base-three)

### Thymeleaf是一个适用于Web和独立环境的现代服务器端Java模板引擎。
### Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示的HTML，也可以用作静态原型，从而在开发团队中实现更强大的协作。

### 通过Spring Framework模块，与您喜欢的工具的大量集成，以及插入您自己的功能的能力，Thymeleaf是现代HTML5 JVM Web开发的理想选择 - 尽管它可以做得更多。


### 基础maven包
1. spring-boot-starter-parent springboot 启动父包
2. spring-boot-starter-web 开启web服务
3. spring-boot-starter-test 测试类包
4. spring-boot-maven-plugin plugin插件 能够将Spring Boot应用打包为可执行的jar或war文件
5. spring-boot-starter-thymeleaf thymeleaf模板引擎开发包

### springBoot项目 目录结构


```
│ pom.xml
└─src
    └─main
        ├─java
        │  └─com
        │      └─base
        │          │  Application.java
        │          │
        │          ├─config
        │          │      WebMvcConfig.java
        │          │
        │          └─controller
        │                  IndexController.java
        │
        └─resources
            │  application.yml ## springboot配置文件
            │
            ├─static ## 静态资源目录（js,css,image）
            └─templates 
                    index.html thymeleaf文件
```


### pom.xml 配置如下

```
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>springboot-base</groupId>
    <artifactId>springboot-base-four</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.10.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <!-- Build args -->
        <argline>-server -Xms64m -Xmx256m -XX:PermSize=64m -XX:MaxPermSize=128m -Dfile.encoding=UTF-8
            -Djava.net.preferIPv4Stack=true
        </argline>
    </properties>

    <repositories>
        <repository>
            <id>aliyun-releases</id>
            <url>http://maven.aliyun.com/nexus/content/groups/public</url>
        </repository>
    </repositories>

    <!-- 设定插件仓库 -->
    <pluginRepositories>
        <pluginRepository>
            <id>aliyun-repos</id>
            <url>http://maven.aliyun.com/nexus/content/groups/public</url>
        </pluginRepository>
    </pluginRepositories>

    <dependencies>
        <!--开启web服务-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--测试类包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- thymeleaf模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>



    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>
```

### application.yml 配置如下


```bash
spring:
  application:
    # 服务名
    name: base
  # thymeleaf
  thymeleaf:
    cache: false
    # 文件编码类型
    encoding: UTF-8
    check-template-location: true
    mode: HTML5
    # 模板目录
    prefix: classpath:/templates
    # 模板后缀
    suffix: .html
    servlet:
      content-type: text/html
server:
 # 服务端口
  port: 8004
```
### 数据模型示例 IndexController.java


```
package com.base.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.*;

/**
 * 开发公司：个人
 * 版权：个人
 * <p>
 * IndexController
 *
 * @author 刘志强
 * @created Create Time: 2019/5/23
 */
@Controller
public class IndexController {

    // 重定向至首页
    @GetMapping("/")
    public void root(HttpServletResponse httpServletResponse) throws IOException {
        httpServletResponse.sendRedirect("/index");
    }

    @GetMapping("/index")
    public ModelAndView index(ModelMap modelMap) {
        modelMap.put("userName","刘志强");
        modelMap.put("url","https://www.baidu.com/img/bd_logo1.png");
        modelMap.put("date",new Date());
        Map<String,Object> map = new HashMap<>();
        map.put("userName","刘志强");
        map.put("age","12");
        modelMap.put("map",map);
        List<Map> list = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            Map<String,Object> objectMap = new HashMap<>();
            objectMap.put("userName","刘志强" + i);
            objectMap.put("age", i);
            list.add(objectMap);
        }
        modelMap.put("list",list);
        return new ModelAndView("/index", modelMap);
    }
}
```

### 模板表达式示例 index.ftl

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<h1>字符串属性给元素赋值</h1>
<div>
    th:'元素属性'="${'modelMap对象属性'}"
</div>
<p th:text="${userName}" />
<input th:value="${userName}" />
<img th:src="${url}" />
<h1>date格式化</h1>
<input th:value="${#dates.format(date, 'yyyy-MM-dd hh:mm:ss')}" />

<h1>對象</h1>
<p>名字:<span th:text="${map.userName}"></span></p>
<p>年龄:<span th:text="${map.age}"></span></p>
<p>名字:年龄:<span th:text="${map.userName + '：' + map.age}"></span></p>

<h1>循环</h1>
<div th:each="map,mapStat :${list}">
    <p th:text="'第' + ${mapStat.count} + '个用户'" />
    <p>名字:<span th:text="${map.userName}"></span></p>
    <p>年龄:<span th:text="${map.age}"></span></p>
    <p>名字:年龄:<span th:text="${map.userName + '：' + map.age}"></span></p>
</div>


<h1>判断1</h1>
<div th:switch="${userName}">
    <p th:case="'刘志强'">存在刘志强</p>
    <p th:case="'王妍'">存在王妍</p>
    <p th:case="*">不存在任何人</p>
</div>

<h1>判断2</h1>
<span th:if="${userName} == '刘志强'" th:text="${userName}">  </span><br />


<h1>判断3</h1>
<span th:text="${userName == '王妍' ? '王妍' : '刘志强'}">  </span><br />
</body>
<script th:inline="javascript">
    // 赋值给js对象
    var map = /*[[${map}]]*/null;
    alert(JSON.stringify(map));
</script>
</html>
```