SpringBoot【整合Thymeleaf】

简介: SpringBoot中推荐使用的前端模板框架是Thymeleaf,所以本文来介绍下怎样整合Thymeleaf。


 SpringBoot中推荐使用的前端模板框架是Thymeleaf,所以本文来介绍下怎样整合Thymeleaf。

整合Thymeleaf

创建项目

1.创建一个maven项目,然后配置相关的内容

image.png

2.添加相关的依赖

<!-- 添加父类的依赖 -->
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.4.RELEASE</version>
</parent>
<dependencies>
  <!-- 添加相关的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

3.创建存放视图的templates目录以及application.properties

目录位置:src/main/resources/templates

templates:该目录是安全的。意味着该目录下的内容是不允许外界直接访问的。

image.png

Thymeleaf基本使用

1.Thymeleaf 特点:

 thymeleaf是一种模板语言,可以动态或者静态显示文本内容,Thymelaef 是通过他特定语法对 html 的标记做渲染。具体语法介绍下篇文章单独介绍

2.编写controller

/**
 * @program: springboot-thymeleafnew
 * @description: Thymeleaf入门案例
 * @author: 波波烤鸭
 * @create: 2019-05-15 09:52
 */
@Controller
public class DemoController {
    @RequestMapping("/show")
    public String showInfo(Model model){
        model.addAttribute("msg","Thymeleaf入门案例...");
        return "index";
    }
}

3.创建视图页面

 在我们刚刚创建的templates目录下创建index.html页面,在头部引入

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

内容如下:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf入门案例</title>
</head>
<body>
    <h1>Thymeleaf入门案例:</h1>
        <span th:text="hello"></span>
        <hr>
        <span th:text="${msg}}"></span>
</body>
</html>

4.创建启动类

 在com.dpb.springboot目录下创建启动类

/**
 * @program: springboot-thymeleafnew
 * @description: 启动类
 * @author: 波波烤鸭
 * @create: 2019-05-15 09:58
 */
@SpringBootApplication
public class Start {
    public static void main(String[] args) {
        SpringApplication.run(Start.class,args);
    }
}

5.访问测试

image.png

搞定~下篇介绍Thymeleaf的具体语法


相关文章
|
JSON JavaScript 数据可视化
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)
779 0
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)
|
缓存 JavaScript 前端开发
SpringBoot——Thymeleaf中的th:inline(内敛文本text、内敛脚本javascript)
SpringBoot——Thymeleaf中的th:inline(内敛文本text、内敛脚本javascript)
2166 0
SpringBoot——Thymeleaf中的th:inline(内敛文本text、内敛脚本javascript)
|
缓存 编解码 移动开发
SpringBoot 整合 Thymeleaf|学习笔记
快速学习 SpringBoot 整合 Thymeleaf
152 0
SpringBoot 整合 Thymeleaf|学习笔记
|
安全 前端开发 Java
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(三)
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(三)
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(三)
|
移动开发 安全 前端开发
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(二)
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(二)
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(二)
|
开发框架 安全 Java
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(一)
狂神说SpringBoot:SpringSecurity笔记及thymeleaf静态资源(一)
|
XML 移动开发 前端开发
Springboot整合Thymeleaf
Springboot整合Thymeleaf
137 0
|
消息中间件 JSON 前端开发
SpringBoot2.x系列教程08--SpringBoot中整合Thymeleaf动态模板
前言 在前面的章节中,壹哥 带各位利用SpringBoot实现了SSM整合,发现现在SSM整合变得的非常简单,通过几个配置就能搭建出一个项目开发环境。但是在之前的案例中,我们并没有提供UI界面,那么在SpringBoot中如何整合UI界面呢?使用JSP展示页面,还是用HTML展示页面,或者还有其他方案? 在今天的内容里,壹哥 会带大家学习如何在SpringBoot中展示UI界面,这样大家以后就可以把数据信息在页面上渲染展示了。 一. Web开发方式简介 SpringBoot作为一个简化项目开发的利器,其实它为我们提供了一套完整的Web开发方案,从前端到后端,再到数据库、定时任务、消息队列等都
227 0
|
Dubbo Java 应用服务中间件
SpringBoot——借助Maven多模块管理实现集成SSM、Dubbo、Thymeleaf的汇总案例
SpringBoot——借助Maven多模块管理实现集成SSM、Dubbo、Thymeleaf的汇总案例
SpringBoot——借助Maven多模块管理实现集成SSM、Dubbo、Thymeleaf的汇总案例
SpringBoot——Thymeleaf中的表达式基本对象、表达式功能对象
SpringBoot——Thymeleaf中的表达式基本对象、表达式功能对象
SpringBoot——Thymeleaf中的表达式基本对象、表达式功能对象