1. 程式人生 > >ModelAndView繫結資料模型配合Thymeleaf渲染資料用法學習

ModelAndView繫結資料模型配合Thymeleaf渲染資料用法學習

分開介紹,大致說一下ModelAndView ModelAndView是Spring MVC裡面重要的組成部分。分為兩部分Model和View,Model是後端的返回值,View指的檢視。先回憶一下當用戶向伺服器傳送請求時,Spring MVC處理請求的過程: 1. DispatcherServlet捕獲前端請求; 2. DispatcherServlet對請求URL進行解析,得到請求資源識別符號(URI)。然後根據該URI,呼叫HandlerMapping獲得該Handler是配置的所有相關的物件(包括Handler物件以及Handler物件對應的攔截器),最後以HandlerExecutionChain物件的形式返回 3. 由HandleMapping定位到具體的(Handler)controller,controller將處理使用者請求。 4.一旦controller處理完使用者請求,則返回ModelAndView物件給DispatcherSevlet前端控制 4. 根據返回的ModelAndView,選擇一個適合的ViewResolver(必須是已經註冊到Spring容器中的ViewResolver)返回給DispatcherServlet 。 5. ViewResolver 結合Model和View,來渲染檢視 6. 將渲染結果返回給客戶端。

回憶完mvc的過程,應該大致可以明白ModelAndView負責哪一部分了,簡單來說就是負責繫結模型資料轉發到相應頁面

ModelAndView共有三個作用

其一:ModelAndView 實現後臺與前端頁面資料互動;

其二:可以用於重定向與轉發到指定頁面,

其三:可以儲存資料繼而渲染到頁面

接下來就用一段程式碼看一下ModelAndView的幾個常用的用法。

@RequestMapping(value="/games",method =RequestMethod.GET )
   //返回型別設為ModelAndView,這裡是無參構造舉例說明。
    public ModelAndView GamesPage(){
        ModelAndView modelAndView = new ModelAndView();//例項化一個View的ModelAndView物件
        modelAndView.setViewName("games");//轉發到games.html
        modelAndView.addObject("games",gamesMapper.getAllGames());//封裝資料,用於前端頁面渲染,這裡我返回的是一個List。當然Map,Set等資料結構也是可以的。
        return modelAndView;//返回ModelAndView物件
    }

說完ModelAndView,我們再看一下thymeleaf,這個東西是完全可以代替JSP的。thymeleaf最大的優勢字尾為html,就是隻需要瀏覽器就可以展現頁面, 還有就是thymeleaf可以很好的和spring整合。因為Spring boot中配置JSP相當麻煩,並且也沒有很好的契合,對於習慣JSP的大佬們來說十分頭疼,不過Springboot支援thymeleaf模板引擎,這個習慣了也是相當好用的。 那配置這個模板引擎呢,之前在部落格中詳細說過了配置依賴,就不再贅述,直接上H5頁面。 首先是引用名稱空間 <html xmlns:th="http://www.thymeleaf.org">

在html中引入此名稱空間,可避免編輯器出現html驗證爆紅看著不舒服,雖然加不加名稱空間對Thymeleaf的功能沒有任何影響。 接下來看一下常用標籤 最常用輸出標籤是 th:text 用來將內容輸出到所在標籤的body中 程式碼舉例<li th:text="${game.id}"></li> 意思是li的內容是game.id這個資料,用${}來選擇 另外還可以選擇變數輸出

<p>Today is: <span th:text="${today}">25 September 2018</span></p>
 <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">25 September 2018</span>

這裡的${today} 用來引用 today 變數,第二個是輸出不同的日期模式

其次還有輸出URL,輸出布林表示式

 <a href="games/list.html" th:href="@{/games/list}">Games List</a>--輸出URL

<div th:if="${user.isAdmin()} == false"> --輸出布林表示式 其他語法自行百度 這裡再說兩個,一個是迴圈,一個是分支

<ul th:each="game : ${games}">
        <li th:text="${game.id}"></li>
        <li th:text="${game.name}"></li>
        <li th:text="${game.type}"></li>
        <li><img th:src="${game.image}"/></li>
        <li th></li>
    </ul>

結合上面ModelAndView的程式碼段來看 ,games是我的list資料集合,game相當於是我的一個引用,可以用這種方式遍歷輸出。

接下來說分支結構 先說明一下th:if和th:unless 只有在th:if中條件成立時才顯示: th:unless於th:if恰好相反,只有表示式中的條件不成立,才會顯示其內容。 第二個是判斷使用者型別,不同型別不一樣的顯示

 <a href="comments.html"  th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a>
 <a href="comments.html"  th:href="@{/product/comments(prodId=${prod.id})}"   th:if="${not #lists.isEmpty(prod.comments)}">view</a>

<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>    --預設的 case 相當於default
</div>

後期還會學習其他的資料模型繫結的方法,再分享大家學習經驗,謝謝閱覽。