表现层的技术
- 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>