springboot整合thymeleaf进行web开发

最新推荐文章于 2021-11-14 21:46:11 发布

扶苏l

最新推荐文章于 2021-11-14 21:46:11 发布

阅读量2.9k

点赞数

分类专栏： springboot 文章标签： thymeleaf springboot整合thymeleaf springboot教程 springboot整合web

本文链接：https://blog.csdn.net/m0_43452671/article/details/89059173

版权

springboot 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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传值,域对象操作,平时使用较少,如果有小伙伴需要,请在下方留言,我会补充进来

扶苏l

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
springboot整合thymeleaf进行web开发

springboot整合thymeleaf模板引擎进行web开发在此篇中主要讲解springboot项目中如何整合thymeleaf模板引擎进行web开发暂时不涉及数据库操作,所有数据均为模拟数据如果对构建Springboot工程还不熟悉的可以查看上一篇教程初始springboot项目构建创建一个Springboot项目,在启动器勾选这几项关于这个lombok插件 : 这是...
复制链接

扫一扫