SpringBoot结合Thymeleaf

2019-01-15 19:07:00     

Spring boot不建议使用jsp开发web,本例子展示如何使用spring boot和Thymeleaf开发web项目。通过@URL 外部引用css 文件和 js 文件,Thymeleaf 的基本表达式,以及include的包含关系等

pom.xml

加入thymeleaf支持、servlet支持、tomcat支持、热部署等相关依赖

<parent>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-parent</artifactId>
	<version>1.5.9.RELEASE</version>
</parent>
<dependencies>
	<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>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-tomcat</artifactId>
	</dependency>
	<!-- servlet依赖. -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>javax.servlet-api</artifactId>
	</dependency>
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
	</dependency>
	<!-- tomcat的支持. -->
	<dependency>
		<groupId>org.apache.tomcat.embed</groupId>
		<artifactId>tomcat-embed-jasper</artifactId>
	</dependency>
	<!-- 热部署 -->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-devtools</artifactId>
		<optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
	</dependency>
</dependencies>
<properties>
	<java.version>1.8</java.version>
</properties>
<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
	</plugins>
</build>

Application.java

该类作为程序启动入口

package top.bounds;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

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

Product.java

准备实体类,用于页面上显示数据

package top.bounds.pojo;

public class Product {
	private int id;
	private String name;
	private int price;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getPrice() {
		return price;
	}

	public void setPrice(int price) {
		this.price = price;
	}

	public Product(int id, String name, int price) {
		super();
		this.id = id;
		this.name = name;
		this.price = price;
	}

}

HelloController.java

控制层类,与前端交互的部分,访问地址 hello, 跳转到 hello.html ,准备了 一个html片段和 一个 Product对象

package top.bounds.controller;

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

import top.bounds.pojo.Product;

@Controller
public class HelloController {

	@RequestMapping("/hello")
	public String hello(Model m) {
		String htmlContent = "<p style='color:red'> 红色文字</p>";
		Product currentProduct = new Product(5, "product e", 200);
		m.addAttribute("htmlContent", htmlContent);
		m.addAttribute("currentProduct", currentProduct);
		return "hello";
	}
}

application.properties

配置thymeleaf

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#缓存设置为false, 这样修改之后马上生效,便于调试
spring.thymeleaf.cache=false
#上下文
server.context-path=/thymeleaf

include.html

模板文件默认放在 templates目录下,在 src/main/resources下新建目录 templates, 然后新建文件include.html.然后里面用 th:fragment 标记代码片段,footer1 是不带参数的,footer2是带参数的。这两种情况也是包含业务经常会用到的做法

<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footer1"> 
   <p >All Rights Reserved</p>
</footer>
<footer th:fragment="footer2(start,now)"> 
   <p th:text="|${start} - ${now} All Rights Reserved|"></p>
</footer>
</html>

hello.html

把控制器(controller)中准备的数据展示出来,

  • 声明当前文件是 thymeleaf, 里面可以用th开头的属性<html xmlns:th="http://www.thymeleaf.org">
  • 通过@URL 外部引用css 文件和 js 文件,直接通过浏览器打开 hello.html,访问的是src路径,通过服务端打开hello.html,访问的是th:src路径
  • 包含其他页面 <div th:replace="include::footer1" ></div> 其中<div th:replace="include::footer2(2015,2018)" ></div> 是带参数的
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>hello</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" media="all" href="../static/css/style.css" th:href="@{/css/style.css}" />
		<script type="text/javascript" src="../static/js/thymeleaf.js" th:src="@{/js/thymeleaf.js}"></script>
		<script>
			/* 模拟js的引用 */
			testFunction();
		</script>
	</head>
	<body>

		<div class="showing">
			<h2>显示 转义和非转义的 html 文本</h2>
			<p th:text="${htmlContent}"></p>
			<p th:utext="${htmlContent}"></p>
		</div>

		<div class="showing">
			<h2>显示对象以及对象属性</h2>
			<p th:text="${currentProduct}"></p>
			<p th:text="${currentProduct.name}"></p>
			<p th:text="${currentProduct.getName()}"></p>
		</div>

		<div class="showing" th:object="${currentProduct}">
			<h2>*{}方式显示属性</h2>
			<p th:text="*{name}"></p>
		</div>

		<div class="showing">
			<h2>算数运算</h2>
			<p th:text="${currentProduct.price+999}"></p>
		</div>
		<div class="showing">
			<div th:replace="include::footer1"></div>
			<div th:replace="include::footer2(2015,2018)"></div>
		</div>
	</body>
</html>

style.css

静态资源(css、js、图片等)默认放在resources/static下面。如果要修改默认存放目录,可以通过设置属性 spring.mvc.static-path-pattern来实现,在 src/main/resources下新建目录 static/css, 然后新建文件style.css

@CHARSET "UTF-8";

div.showing {
	width: 80%;
	margin: 20px auto;
	border: 1px solid grey;
	padding: 30px;
}

h2 {
	text-decoration: underline;
	font-size: 0.9em;
	color: gray;
}

thymeleaf.js

src/main/resources下新建目录 static/js, 然后新建文件thymeleaf.js

function testFunction(){
    alert("test Thymeleaf.js!");
}

重启测试

重新运行 Application,然后访问地址测试 :http://127.0.0.1:8080/thymeleaf/hello

ps:本篇博客源码下载链接:https://pan.baidu.com/s/1r1hpcpKgmUp2kkc0ciYtoQ 密码:9yca

SpringBoot结合Mybatis

自己搭建了下Spring boot+Mybatis,比原来的Spring+SpringMVC+Mybatis简单好多。其实只用Spring boot也可以开发,但是对于多表多条件分页查询,Spring boot就有点力不从心了,所以把Mybatis整合进去,不得不说,现在的框架搭建真的是方便

Thymeleaf 基本用法总结

Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。 Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

 发表评论