页面静态化--Thymeleaf (5)

这里要使用两个指令：th:switch 和 th:case

<div th:switch="${user.role}"> <p th:case="'admin'">用户是管理员</p> <p th:case="'manager'">用户是经理</p> <p th:case="*">用户是别的玩意</p> </div>

需要注意的是，一旦有一个th:case成立，其它的则不再判断。与java中的switch是一样的。

另外th:case="*"表示默认，放最后。

页面：

4.10.JS模板

模板引擎不仅可以渲染html，也可以对JS中的进行预处理。而且为了在纯静态环境下可以运行，其Thymeleaf代码可以被注释起来：

<script th:inline="javascript"> const user = /*[[${user}]]*/ {}; const age = /*[[${user.age}]]*/ 20; console.log(user); console.log(age) </script>

在script标签中通过th:inline="javascript"来声明这是要特殊处理的js脚本

语法结构：

const user = /*[[Thymeleaf表达式]]*/ "静态环境下的默认值";

因为Thymeleaf被注释起来，因此即便是静态环境下， js代码也不会报错，而是采用表达式后面跟着的默认值。

看看页面的源码：

我们的User对象被直接处理为json格式了，非常方便。

控制台：