前言
使用thymeleaf,生成动态页面。
关于动态页面和静态页面:
- 动态资源(数据):通过程序生成的数据,比如:验证码。
- 静态资源(数据):事先准备好的,不会变的。比如图片,html页面等。
本版本需求:在一个页面上显示所有注册用户的信息。
该页面上展示的用户数据来源于user.dat。该文件随着用户做注册修改等操作在随时变化,因此展示注册用户的页面不可能是事先准备好的不变的内容。因此该页面上的用户数据是程序每次根据请求该页面时生成并体现到页面中。
thymeleaf是一个用于生成动态页面的框架,可以在html代码中添加少量的标签即可和程序生成的数据进行结合,生成一个含有这些数据并且样子还是该html代码样子的页面。
实现:
1:组建页面上要使用的数据.
2:创建显示数据的静态页面.
3:用thymeleaf将数据绑定到页面上生成一个含有动态数据的页面并最终响应给客户端展示.
步骤:
1:由于之前都是静态页面是通过实体文件响应客户端,但是动态页面不必要这么复杂,可以直接以一组字节响应给客户端即可,下面是对Response类的改动:
在响应正文相关信息下添加byte数组类型的属性data
2:定义一个业务处理类:UserListServlet,并实现sercice方法.
3:定义一个表示用户信息的类:User,该类每一个实例用于表示一个用户.
4:在webapps/myweb目录下新建一个静态页面:userList.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
<center>
<h1>用户列表</h1>
<table border="1">
<tr>
<td>用户名</td>
<td>密码</td>
<td>昵称</td>
<td>年龄</td>
</tr>
<tr th:each="user : ${users}">
<td th:text="${user.username}">张三</td>
<td th:text="${user.password}">123456</td>
<td th:text="${user.nickname}">阿三</td>
<td th:text="${user.age}">22</td>
</tr>
<tr th:remove="all">
<td>李四</td>
<td>555666</td>
<td>老四</td>
<td>33</td>
</tr>
</table>
</center>
</body>
</html>
5:service方法中读取user.dat文件中的所有数据,并利用thymeleaf将数据绑定到userList.html中生成含有所有用户信息的页面并响应.
由于是Tomcat的底层,所以下面的代码会手动创建thymeleaf模板解析器
/**
* 展示所有用户信息
*
* 将user.dat文件中所有用户读取出来并利用thymeleaf结合
* 静态页面userList.html产生一个所有用户信息的页面并
* 响应给客户端。
* @Author JIANG
*/
public class UserListServlet {
public void service(HttpRequest request, HttpResponse response) {
System.out.println("UserListServlet:开始处理...");
//1.从user.dat中读取所有用户信息
/*
* 将User.dat文件中所有用户信息读取出来并以User对象形式保存每一个员工信息。
* 最终将这些User对象存入一个List集合
*/
List<User> list = new ArrayList<>();
try (RandomAccessFile raf = new RandomAccessFile("user.dat","r")){
for (int i = 0;i<raf.length()/100;i++) {
byte[] data = new byte[32];
raf.read(data);
String username = new String(data,"UTF-8").trim();
raf.read(data);
String password = new String(data, "UTF-8").trim();
raf.read(data);
String nickname = new String(data, "UTF-8").trim();
int age = raf.readInt();
list.add(new User(username,password,nickname,age));
}
} catch (IOException e) {
e.printStackTrace();
}
System.out.println(list.size());
//2.使用thymeleaf结合静态页面和数据生成动态页面
//模板解释器,用来设置模板的基本信息
FileTemplateResolver re = new FileTemplateResolver();
//模板类型是html文件
re.setTemplateMode("html");
//模板文件字符集,就是页面的字符集
re.setCharacterEncoding("UTF-8");
//初始化模板引擎
TemplateEngine te = new TemplateEngine();
te.setTemplateResolver(re);
//准备的数据
//Context用于保存所有需要与页面结合的动态数据
Context context = new Context();
//将保存所有用户信息的List集合存入Context
context.setVariable("users",list);
//利用thymeleaf模板引擎将userList.html与数据结合
/*
* process方法会将给定的页面与context中的数据结合并将
* 动态数据绑定到页面中,该方法有返回值,返回的就是生成
* 好的html代码内容(一个String对象)
*/
String html = te.process("./webapps/myweb/userList.html",context);
System.out.println(html);
//3.将动态页面响应给客户端
try {
response.setData(html.getBytes("UTF-8"));
response.putHeader("Content-Type","text/html");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
System.out.println("UserListServlet:处理完毕!");
}
}
此版本实现了第一个动态页面,利用了thymeleaf模板解析器将数据和页面绑定,再通过字节数组一同响应给客户端,第一次实现了一个简单的同步请求,在下一个版本中将再做一个动态页面。