thymeleaf使用小结

当前端须要将后台的数据渲染到页面上时，会有不少的渲染方式能够选择。
好比用js渲染，以下：

这种方式本人以为会使前端代码变得繁冗，并且项目过大时会比较麻烦。（新手上路，看看就行）

而最近的一次交互中使用的是thymeleaf来进行页面的渲染，感受很简洁，大大节省了代码量。

像这样简单的代码就完成了将数据渲染到页面上的操做，并且对数据的增删改查变得很是简单，上面写的是thymeleaf中的遍历。语法以下

<tr th:each="userStat:${messages.list}">

    <td th:text="${user.name}"></td>

    <td th:text="userStat.index"></td>

</tr>

其中userStat是自定义的变量名，messages.list是后台返回的object

固然，用处还远远不止对数据的输出那么简单，甚至还能对数据进行判断
像这样：

或者这样：

thymeleaf还能进行字符串的拼接，

经过这样我能够作到对后端返回的数据进行判断，从而给页面设置不一样的样式
例如经过路由判断给导航条设置颜色

th:style="${#request.getServletPath()} == '/curriculum/ht/show' ? 'color:rgb(32, 180, 229)' : ''"

也许咱们会遇到那些须要判断多个条件的状况，虽然thymeleaf里面给的有switch语句，可是有些时候确实很差用，好比我经过不一样的路由来判断是否给某个元素添加某个类，那么能够像这样：

th:class="${#request.getServletPath() == '/curriculum/ht/show' || #request.getServletPath() == '/curriculum/ht/add' || #request.getServletPath() == '/curriculum/ht/show/recycle' ? '' : 'collapsed'}"

小结就分享到这里，接下来经过学习遇到更多的经验还会继续来分享。

新手上路，凑合着看吧，还能离咋着。