《SpringBoot2从入门到工程实战》第十二篇:模板引擎-Thymeleaf

SpringBoot官方推荐的模板引擎为Thymeleaf,所以我们在这个系列中只介绍Thymeleaf模板引擎。

本章示例工程名称:springboot_worker_thymeleaf

代码地址:https://github.com/stamhe/SpringBoot-Work-Example

目录结构如下:

pom.xml的内容:

<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>com.stamhe</groupId>
  <artifactId>springboot_worker_thymeleaf</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>springboot_worker_thymeleaf</name>
  <url>http://maven.apache.org</url>


	<properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
    </properties>
  
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.7.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    
      <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    
        <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>
    
        <dependency>
          <groupId>junit</groupId>
          <artifactId>junit</artifactId>
          <scope>test</scope>
        </dependency>
    </dependencies>
    <!-- 
    使用Spring Boot微服务搭建框架,在eclipse和Idea下能正常运行,但是在打成jar包部署或者直接使用java -jar命令的时候,
    提示了xxxxxx.jar中没有主清单属性.
    添加 spring-boot-maven-plugin然后再执行mvn install 或者 mvn clean package 即可解决.
    -->
    <build>
      <plugins>
          <plugin>
              <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-maven-plugin</artifactId>
          </plugin>
      </plugins>
     </build>
</project>

App.java的内容:

package com.stamhe.springboot;

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

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

UserModel.java的内容:

package com.stamhe.springboot.model;

public class UserModel {
	private Long id;
	private String name;
	
	public Long getId() {
		return id;
	}
	public void setId(Long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

HelloController.java的内容:

package com.stamhe.springboot.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.stamhe.springboot.model.UserModel;

@Controller
@RequestMapping("/hello")
public class HelloController {

	// http://localhost:8080/hello/world.html
	@RequestMapping("/world.html")
	public String worldAction(HttpServletRequest request)
	{
		UserModel u1 = new UserModel();
		u1.setId(1L);
		u1.setName("u1");
		

		UserModel u2 = new UserModel();
		u2.setId(2L);
		u2.setName("u2");
		
		List<UserModel> list = new ArrayList<UserModel>();
		list.add(u1);
		list.add(u2);
		
		request.setAttribute("listUser", list);
		
		// 返回的 world 默认映射到 src/main/resources/templates/world.html
		return "world";
	}
	
	@RequestMapping("/world2.html")
	public ModelAndView world2Action()
	{
		UserModel u1 = new UserModel();
		u1.setId(1L);
		u1.setName("u1");
		
		UserModel u2 = new UserModel();
		u2.setId(2L);
		u2.setName("u2");
		
		List<UserModel> list = new ArrayList<UserModel>();
		list.add(u1);
		list.add(u2);
		
		Map<String, String> map = new HashMap<String, String>();
		map.put("HE", "QUAN");
		map.put("STAM", "HE");
		
		ModelAndView view = new ModelAndView();
        // 设置跳转的视图 默认映射到 src/main/resources/templates/world2.html
        view.setViewName("world2");
        // 设置属性
        view.addObject("listUser", list);
        view.addObject("mapUser", map);
        
        return view;
	}
}

world.html的内容:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
</head>
<body>
<h6>Thymeleaf 模板引擎</h6>
<table border="1" bgcolor="#f0ffff">
    <thead>
    <tr>
        <th>用户ID</th>
        <th>用户名</th>
    </tr>
    </thead>
    <tbody th:each="user : ${listUser}">
    <tr>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

world2.html的内容:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
</head>
<body>
<h6>Thymeleaf 模板引擎</h6>
<table border="1" bgcolor="#f0ffff">
	<thead>
    <tr>
        <th>用户ID</th>
        <th>用户名</th>
    </tr>
    </thead>
    <tbody th:each="user : ${listUser}">
    <tr>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
    </tr>
    </tbody>
    
    
    <tbody th:each="user : ${mapUser}">
    <tr>
        <td th:text="${user.key}"></td>
        <td th:text="${user.value}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

application.properties的内容:

# prefix:指定模板所在的目录
spring.thymeleaf.prefix = classpath:/templates/
# check-tempate-location: 检查模板路径是否存在
spring.thymeleaf.check-template-location  = true
# cache: 是否缓存,开发模式下设置为false,避免改了模板还要重启服务器,线上设置为true,可以提高性能。
spring.thymeleaf.cache = false
# 模板文件的后缀
spring.thymeleaf.suffix = .html
spring.thymeleaf.encoding = UTF-8
spring.thymeleaf.content-type = text/html
spring.thymeleaf.mode = HTML5

访问下面的连接就可以看到效果了

http://localhost:8080/hello/world.html

http://localhost:8080/hello/world2.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

code

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据