二、博客系统,Spring Boot + ThymeLeaf 模板

ThymeLeaf 官网:https://www.thymeleaf.org/

一、ThymeLeaf 介绍

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf’s main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

With modules for Spring Framework, a host of integrations with your favourite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.

thymxml 是一个面向 web 和独立环境的现代服务器端 Java 模板引擎。

thymfor 的主要目标是为您的开发工作流程带来优雅的自然模板——可以在浏览器中正确显示的 HTML,也可以作为静态原型,从而在开发团队中进行更强的协作。

有了 Spring 框架的模块,与您最喜欢的工具的集成,以及插入您自己的功能的能力,thymluf 是现代 HTML5 JVM web 开发的理想选择——尽管它可以做的更多。

Natural templates

HTML templates written in Thymeleaf still look and work like HTML, letting the actual templates that are run in your application keep working as useful design artifacts.

在 Thymeleaf 编写的 HTML 模板可以像 HTML 一样运行,让自然模板在你的应用中使用是非常有用的设计。

Integrations galore

Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework.

可以使用你喜欢的工具和框架 Eclipse, IntelliJ IDEA, Spring, Play, 甚至 Model-View-Controller API for Java EE 8 来写 Thymeleaf。

二、ThymeLeaf 应用

  1. 创建 SpringBoot 项目, 选择 Thymeleaf 和 Web 依赖
    324647e8d19c465d9ed63e6f7bd2f049_QQ20180716192924.jpg

fd6616e74b4e4f13bd794010494d5f66_QQ20180716193436.jpg

2. 创建 UserController 和 User 类
ed73e50283e944068b1890673d22ce6d_QQ20180716211234.jpg

package com.pigplay.demo.controller;

import java.util.ArrayList;
import java.util.List;

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

import com.pigplay.demo.model.User;

@Controller
@RequestMapping("/user")
public class UserController {
	
	@RequestMapping("/list")
    public String  listUser(Model model) {
        List<User> userList = new ArrayList<User>();
        for (int i = 0; i <10; i++) {
            userList.add(new User(i, "zhangsan" + i, "123456" + i));
        }
        
        model.addAttribute("userList", userList);
        return "/user/list";
    }
}


package com.pigplay.demo.model;

public class User {
	private Integer id;
	private String userName;
	private String passWord;
	
	public User(Integer id, String userName, String passWord) {
		super();
		this.id = id;
		this.userName = userName;
		this.passWord = passWord;
	}
	
	public User(){};
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassWord() {
		return passWord;
	}
	public void setPassWord(String passWord) {
		this.passWord = passWord;
	}
}


3. 创建 ThymeLeaf 模板
54adba3c8f644432b36ee3e7b3b9aa5e_QQ20180716211536.jpg

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
  <h1>用户列表</h1>
  <div>
     <ul>
      <li>
             <span>id</span>-
             <span>用户名</span>-
             <span>密码</span>
         </li>
         
         <li th:each="user:${userList}">
             <span th:text="${user.id}"></span>-
             <span th:text="${user.userName}"></span>-
             <span th:text="${user.passWord}"></span>
         </li>
     </ul>
   </div>
</body>
</html>

4. 覆盖 ThymeLeaf 的默认配置
51646d2b196748b5ab59d22f8373ae06_QQ20180716211724.jpg

#thymelea模板配置,禁用缓存
spring.thymeleaf.cache=false

5. 启动工程
a61940dfad0c46e0a3dbd1bacd0c7b5e_QQ20180716211852.jpg

6. 浏览器中输入http://127.0.0.1:8080/user/list
35cbcb7fadbf41339b5e008159c387cc_QQ20180716211947.jpg

作者:8595250
原创链接: 二、博客系统,Spring Boot + ThymeLeaf 模板
来源:猪玩派
码云:博客 demo