自学SpringBoot--03视图层技术--SpringBoot整合Thymeleaf

最新推荐文章于 2020-08-13 13:49:00 发布

等我下课

最新推荐文章于 2020-08-13 13:49:00 发布

阅读量177

点赞数

分类专栏： Java springBoot 文章标签： java spring spring boot

本文链接：https://blog.csdn.net/qq_41911570/article/details/103799208

版权

Java 同时被 2 个专栏收录

24 篇文章 24 订阅

订阅专栏

springBoot

6 篇文章 0 订阅

订阅专栏

SpringBoot

SpringBoot整合Thymeleaf创建入门项目

创建项目

在这里插入图片描述
版本我们使用的是1.5.10.RELEASE

点击finish

修改pom文件添加坐标

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.10.RELEASE</version>
  </parent>
  <groupId>com.bjsxt</groupId>
  <artifactId>10-spring-boot-view-thymeleaf</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <dependencies>
  	<!-- springboot的启动器 -->
	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-web</artifactId>
  	</dependency>
  	<!-- thymeleaf的启动器 -->
	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-thymeleaf</artifactId>
  	</dependency>
  </dependencies>
 
</project>

在这里插入图片描述

创建存放视图的目录

目录位置：src/main/resources/templates
templates详细说明：该目录是安全的。意味着该目录下的内容是不允许外界直接访问的。
在这里插入图片描述

SpringBoot整合Thymeleaf基本使用

Thymeleaf特点

Thymeleaf是通过它特点语法对html的标记做渲染。

编写Controller

在这里插入图片描述

package com.bjsxt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Thymeleaf入门案例
 * @author ouyang
 *
 */
@Controller
public class DemoController {
	@RequestMapping("/show")
	public String showInfo(Model model) {
		model.addAttribute("msg","Thymeleaf 第一个案例");
		return "index";
	}
}

创建视图 .html

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thymeleaf入门</title>
</head>
<body>
	<span th:text="Hello"></span>
	<hr/>
	<span th:text="${msg}"></span>
</body>
</html>

编写启动类

在这里插入图片描述

package com.bjsxt;

import javax.servlet.annotation.WebFilter;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;

@SpringBootApplication
public class App {
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

启动项目
在这里插入图片描述
控制台正常
页面

异常

在这里插入图片描述

这时出现异常 “元素类型 “meta” 必须由匹配的结束标记 “” 终止。”
说明什么问题呢？
Thymeleaf在做页面渲染的时候，它要求html的标记必须遵守语法严谨的形式，有开始必须要有结束。

解决异常方式一：

我们加上结束标记，再试。
在这里插入图片描述

解决异常方式二

修改thymeleaf版本到3.0以上
修改thymeleaf-layout-dialect版本到2.0以上

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.10.RELEASE</version>
  </parent>
  <groupId>com.bjsxt</groupId>
  <artifactId>10-spring-boot-view-thymeleaf</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <!-- 修改Thymeleaf版本  -->
  <properties>
  	<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
  	<thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
  </properties>
  
  <dependencies>
  	<!-- springboot的启动器 -->
	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-web</artifactId>
  	</dependency>
  	<!-- thymeleaf的启动器 -->
	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-thymeleaf</artifactId>
  	</dependency>
  </dependencies>
 
</project>

在这里插入图片描述

等我下课

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
自学SpringBoot--03视图层技术--SpringBoot整合Thymeleaf

SpringBootSpringBoot整合Thymeleaf创建入门项目创建项目版本我们使用的是1.5.10.RELEASE点击finish修改pom文件添加坐标<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xs...
复制链接

扫一扫

专栏目录