转自：https://segmentfault.com/a/1190000011149325

前言

Spring-boot-starter-web集成了Tomcat以及Spring MVC，会自动配置相关东西，Thymeleaf是用的比较广泛的模板引擎

1.引入依赖

<dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-thymeleaf</artifactId>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

2.在一个名为application.propertiesde 的文件中配置Thymeleaf

server.port=8080

spring.thymeleaf.cache=false

spring.thymeleaf.prefix=classpath:/templates/

spring.thymeleaf.check-template-location=true

spring.thymeleaf.suffix=.html

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.content-type=text/html

spring.thymeleaf.mode=HTML5

3.文件结构

4.Controller

package com.dlp.Controller;

import com.dlp.model.Person;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;

import java.util.List;

/**

 * Created by Administrator on 2017/9/6.

 */

@Controller

public class HelloController {

    @RequestMapping(value = "/index")

    public String index(Model  model)

    {

        Person single = new Person("hyj",21);

        List<Person> people = new ArrayList<Person>();

        Person p1 = new Person("dlp",21);

        Person p2 = new Person("tq",21);

        Person p3 = new Person("mk",21);

        people.add(p1);

        people.add(p2);

        people.add(p3);

        model.addAttribute("singlePerson",single);

        model.addAttribute("people",people);

        return "index";

    }

    }

这里使用@Controller而不用@RESTController是因为这里返回一个页面而不是一个值，如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面，配置的视图解析器InternalResourceViewResolver不起作用，返回的内容就是Return 里的内容。

5.Model类

package com.dlp.model;

/**

 * Created by Administrator on 2017/9/6.

 */

public class Person {

    private String name;

    private Integer age;

    public Person()  {

        super();

    }

    public Person(String name,Integer gae) {

        super();

        this.name=name;

        this.age=gae;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name=name;

    }

    public Integer getAge() {

        return age;

    }

    public Integer setAge(Integer age) {

        return age;

    }

}

6.index页面

<!DOCTYPE HTML>

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

<head>

    <meta content="text/html;charset=UTF-8"/>

    <meta name="viewport" content="width=device-width,initial-scale=1"/>

    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>

    <link th:href="@{/bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>

</head>

<body>

<div class="panel panel-primary">

   <div class="panel-heading">

       <h3 class="panel-title">访问model</h3>

   </div>

    <div class="panel-body">

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

    </div>

</div>

<div th:if="${not #lists.isEmpty(people)}">

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h3 class="panel-title">列表</h3>

        </div>

        <div class="panel-body">

            <ul class="list-group">

                <li class="list-group-item" th:each="person : ${people}">

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

                    <span th:text="${person.age}"></span>

                    <button class="btn" th:onlick="'getName(\''+${person.name}+'\');'">获得名字</button>

                </li>

            </ul>

        </div>

    </div>

</div>

<script th:src="@{/jquery/jquery-3.2.1.min.js}"></script>

<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

<script th:inline="javascript">

    var single = [[${singlePerson}]];

    console.log(single.name+"/"+single.age);

    function getName(name) {

        console.log(name);

    }

</script>

</body>

</html>

xmlns:th="http://www.thymeleaf.org"命名空间，将镜头转化为动态的视图，需要进行动态处理的元素使用“th:”前缀；两个link引入bootstrap框架，通过@{}引入web静态资源（括号里面是资源路径）访问model中的数据通过${}访问，案例

7.运行

Springboot 之 引入Thymeleaf的更多相关文章

  1. springboot 引入 thymeleaf 模板

    第一步pom中: <!-- 引入 thymeleaf 模板依赖 --> <dependency> <groupId>org.springframework.boot ...

  2. springboot引入thymeleaf

    springboot引入thymeleaf 1.Thymeleaf使用 @ConfigurationProperties(prefix = "spring.thymeleaf") ...

  3. SpringBoot入门之Thymeleaf的使用

    在.net的MVC3 或更高版本等支持 Razor 的框架里使用cshtml,Razor是一种简单的编程语法,用于在网页中嵌入服务器端代码.在使用springboot开发mvc时也有与.net类似的视 ...

  4. 8.SpringBoot 模板引擎 Thymeleaf

    1.模板引擎原理 JSP.Velocity.Freemarker.Thymeleaf 都是模板引擎.SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: Thymeleaf模板引擎 ...

  5. SpringBoot框架 之 Thymeleaf

    目录 Thymeleaf 添加启动器 创建模板文件夹 基本使用 综合使用 Thymeleaf 介绍 SpringBoot并不推荐使用jsp Thymeleaf 是一个跟 Velocity.FreeMa ...

  6. SpringBoot 同时整合thymeleaf html、vue html和jsp

    问题描述 SpringBoot如何同时访问html和jsp SpringBoot访问html页面可以,访问jsp页面报错 SpringBoot如何同时整合thymeleaf html.vue html ...

  7. 【SpringBoot】SpringBoot/MyBatis/MySql/thymeleaf/Log4j整合工程

    工程下载地址:https://files.cnblogs.com/files/xiandedanteng/MMSpringWeb20191027-1.rar 工程目录结构如图: 1.创建工程 有些网文 ...

  8. 7 — 简单了解springboot中的thymeleaf

    1.官网学习地址 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 2.什么是thymeleaf? 一张图看明白: 解读: ...

  9. Idea中SpringBoot引入thymeleaf没有提示

    问题描述: 最近使用Idea搭建SpringBoot时,用到了 thymeleaf,但是出现了点问题:输入th: 代码有没有提示. 解决方法: <html lang="en" ...

随机推荐

  1. 苹果双系统win8.1遇到的一些问题

    MacBook air是一款不错的电脑,详细没研究就不叙述好与坏了.只此记录自己使用这款笔记本遇到的问题. 一.安装双系统win8.1 1.下载镜像文件—>拷贝到ios内存中,一个8GU盘.ht ...

  2. RunLoop相关知识

    RunLoop,翻译过来是运行环路.我们在创建命令行项目和创建ios项目时,发现命令行项目当最后一行代码执行完后项目就自动退出了,而ios项目确可以一直运行,知道用户手动点击退出按钮.这就是因为ios ...

  3. 使用cookies查询商品详情

    易买网项目完工,把一些新知识记录下来,以便以后查阅,也方便他人借阅.介绍使用cookies查询商品详情. 第一步:建立商品实体类. 第二步:连接Oracle数据库. 第三步:使用三层架构. 效果图如下 ...

  4. Python-通过configparser读写配置文件

    Python读写配置文件: 1.创建配置文件(文件名以.conf或.ini结束的文件表示配置文件) 2.导入所需模块 OS, configparser >>> import os & ...

  5. BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会 树形DP + 带权重心

    Description Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 N(1<=N<=100,0 ...

  6. https证书安装无效的主要原因

    https证书的作用是为了确认服务端身份,但网络上充满了无效的证书,浏览器对使用无效证书的访问,给出危险.不安全警告,将是否选择继续访问由用户选择,而大多数用户是无法区分这是配置还是真的存在安全问题. ...

  7. Nginx服务器部署SSL证书手机不信任解决方法

    在wosign申请证书并按指南正确部署证书后,如果发现PC浏览器访问正常,手机或safari浏览器提示证书不受信任,那肯定是在文件传输解压过程中导致证书文件中出现空格.乱码之类的情况,这里教您轻松四步 ...

  8. C#第五节课

    switch语句 using System;using System.Collections.Generic;using System.Linq;using System.Text;using Sys ...

  9. [bzoj3029] 守卫者的挑战 (概率期望dp)

    传送门 Description 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过."我,Nizem,是黑魔法圣殿的守 ...

  10. 16._source元数据