springboot--整合thymeleaf--实例01,返回一个list,用循环方式做屏显

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/matrixbbs/article/details/90670086

表现层的技术

  • JSP+EL+JSTL
  • HTML
  • Thymeleaf
  • Freemarker
  • 等等

Thymeleaf框架

  • 是一个表现层的模板引擎
  • 有能务展示和处理数据
  • 界面节点和程序逻辑可以被共享,让界面、业务、技术等人员都能参考到项目中来
  • 支持6种模板处理模式
  • HTML
  • XML
  • TEXT
  • JAVASCRIPT
  • CSS
  • RAW

使用过程

  • 1 添加依赖包
  • 2 处理HTML串,让其成为最后输出、被渲染过的HTML
    • 资源文件处理
    • 变量处理
    • 遍历集合处理
  • 3 设置前后缀
  • 4 编写模板文件,即HTML文件

在SpringBoot中整合Thymeleaf

  • 1 在构建时,添加Thymeleaf模块
  • 2 配置Thymeleaf参数
  • 3 CSS静态资源读取目录
  • 4 编写控制器和模板

具体实现及源码

1 项目结构

在这里插入图片描述

2 编写配置

spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

3 编写流转对象

package com.fhzheng.demo;

public class User {

	private String id;
	private String name;
	
	public User() {
		// TODO Auto-generated constructor stub
	}
	
	public User(String id,String name) {
		this.id = id;
		this.name = name;
	}
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

注意,这里由于使用的原因,需要编写一个带有参数的构造器

4 编写启动器和控制器

  • 4.1通过注解方式,将启动器和控制器合到一个类中
  • 4.2编写一个模拟查询返回用户组的方法,并在控制器中引用它【充当的是业务组件】
    • 在控制器中,记录一个model,用作数据流转
    • 在控制器中,返回一个user串,用于模板查找相应的视图模板,即user.html【加上前后缀,就可以对应到具体的文件】
package com.fhzheng.demo;

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

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@SpringBootApplication
@Controller
public class SpringWebThymeleaf01Application {

	public static void main(String[] args) {
		SpringApplication.run(SpringWebThymeleaf01Application.class, args);
	}
	
	@RequestMapping("/users")
	public String listUsers(Model model) {
		model.addAttribute("users",queryUsers());
		return "user";
	}

	private List<User> queryUsers(){
		List<User> users = new ArrayList<User>();
		users.add(new User("001","userA"));
		users.add(new User("002","userB"));
		return users;
	}
	
	
}

5 创建视图模板

<html>
<head></head>
<body>
	<div>
	<table>
		<tr><th>学号</th><th>姓名</th></tr>		
		<tr th:each = "user:${users}">
			<td th:text = "${user.id}"></td>
			<td th:text = "${user.name}"></td>
		</tr>
	</table>
	</div>
</body>
</html>

6 启动并访问,查看结果

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页