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'}"

小結就分享到這裏，接下來經過學習遇到更多的經驗還會繼續來分享。

新手上路，湊合着看吧，還能離咋着。