springboot整合thymeleaf进行web开发
springboot整合thymeleaf模板引擎进行web开发
在此篇中主要讲解springboot项目中如何整合thymeleaf模板引擎进行web开发
暂时不涉及数据库操作,所有数据均为模拟数据
如果对构建Springboot工程还不熟悉的可以查看上一篇教程初始springboot
项目构建
- 创建一个Springboot项目,在启动器勾选这几项
关于这个lombok插件 : 这是一个自动化的代码生成插件,可以用注解来代替那些重复的代码,比如getter/setter toString…
- 实体类 这里用到的就是lombok的注解,可以省略很多冗余的代码
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
}
- 然后就是service 和 controller,简单的代码,相信大家都没什么问题
@Service
public class UserService {
public List<User> selAllUsers() {
List<User>users = new ArrayList<>();
users.add(new User(1,"张三","123"));
users.add(new User(2,"李四","321"));
users.add(new User(3,"王五","213"));
return users;
}
}
@Controller
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/show")
public String showUsers(Model model){
List<User>users = userService.selAllUsers();
model.addAttribute("users",users);
return "index";
}
}
这里用的是controller注解,不是用json输出了
返回的是 index;当这个控制器被访问,他就会去templates下去找一个叫index.html的文件
关于templates这个文件夹 : 这是一个安全的文件夹,所谓安全就是说不能直接通过url访问到里面的内容
原因 : templates里面放的一般都是模板页面,需要经过模板引擎渲染才有效果的,而直接访问没有经过渲染
- 接下来在templates文件下新建一个html文件 把命名空间改为
xmlns:th="http://www.thymeleaf.org"
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>xx</title>
</head>
<body>
<div >
<table border="1">
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr th:each="user:${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.password}"></td>
</tr>
</table>
</div>
</body>
</html>
- 启动访问
http://localhost:8080/show
可以看到能够成功访问
当然页面的样式全无,毫无美感可言,如果你熟悉前端样式的话,这些都不是问题,和html中写样式是一样的
关于Thymeleaf模板引擎
1.Spring Boot 推荐使用 Thymeleaf 来代替 Jsp
2.Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 JSP,Velocity,FreeMaker 等
3.与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用
4.Thymeleaf 是与众不同的,因为它使用了自然的模板技术。这意味着 Thymeleaf 的模板语法并不会破坏文档的结构,模板依旧是有效的XML文档。模板还可以用作工作原型,Thymeleaf 会在运行期替换掉静态值
5.由于 Thymeleaf 使用了 XML DOM 解析器,因此它并不适合于处理大规模的 XML 文件。
-
语法 这里列举部分语法,更多语法可以查阅官方文档
- 变量输出与字符串
语法 | 作用 |
---|---|
th : text | 在页面输出值 |
th : value | 可以将一个值放到input |
$(#strings.isEmpty(key)) | 判断字符串是否为空 |
$(#strings.contains(key,‘T’)) | 判断字符串是否包含指定的子串, |
$(#strings.startWith(key,‘T’)) | 判断字符串是否以指定字符串开头 |
$(#strings.endWith(key,‘T’)) | 判断字符串是否以指定字符串结尾, |
$(#strings.length(key)) | 判断字符串长度 |
$(#strings.indexOf(key,‘T’)) | 子串在指定串中的索引位置 |
$(#strings.substring(key,index)) | 截取指定串从index索引到最后 |
$(#strings.substring(key,index1,index2)) | 截取指定串从index1索引到index2 |
$(#strings.toUpperCase(key)) | 切换指定字符串为大写 |
$(#strings.toLowerCase(key)) | 切换指定字符串为小写 |
调用内置对象# ,大部分内置对象都是s结尾 strings numbers dates
语法 | 作用 |
---|---|
$(#dates.format(key)) | 格式化日期.默认浏览器语言格式标准 |
$(#dates.format(key,‘yyyy/mm/dd’)) | 自定义格式格式化日期 |
$(#dates.year(key)) | 取日期的年份,月份 month 日期 day 同理 |
-
条件判断 : 在user类下再添加一个sex属性
效果如下: -
迭代遍历已经在table里呈现过了
-
迭代遍历map
我们在controller里添加一个方法,返回一个map到model对象
@GetMapping("/map")
public String map(Model model){
Map<String,Object> map = new HashMap<>();
map.put("1",new User(4,"孙行者","123","男"));
map.put("2",new User(5,"者行孙","123","男"));
map.put("3",new User(6,"行者孙","123","女"));
model.addAttribute("map",map);
return "index";
}
- 在index.html中添加如下代码
<div>map的遍历</div>
<table border="1">
<tr>
<th>id</th>
<th>username</th>
<th>password</th>
<th>sex</th>
</tr>
<tr th:each="node:${map}">
<td th:each="entry : ${node}" th:text="${entry.value.id}"></td>
<td th:each="entry : ${node}" th:text="${entry.value.username}"></td>
<td th:each="entry : ${node}" th:text="${entry.value.password}"></td>
<td th:each="entry : ${node}" th:text="${entry.value.sex}"></td>
</tr>
</table>
- 访问
http://localhost:8080/map
即完成了map的遍历
map的遍历本质就是先对map遍历,依次获取map的value
然后对value遍历,获取相应的包含内容
总结
- 此篇的相关源码在github链接
- 以上就是thymeleaf常用的语法,还有url表达式,url传值,域对象操作,平时使用较少,如果有小伙伴需要,请在下方留言,我会补充进来