本節書摘來自華章出版社《深入實踐spring boot》一書中的第3章，第3.4節，作者陳韶健，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
視圖設計包括清單視圖、建立視圖、檢視視圖、修改視圖和删除視圖設計等5個方面有關資料的增删查改的内容。
我們知道，視圖上的資料存取不是直接與模型打交道，而是通過控制器來處理。在視圖中對于控制器的請求，大多使用jquery的方式來實作。jquery是一個優秀的javascript程式庫，并且具有很好的相容性，幾乎相容了現有的所有浏覽器。
下面的視圖設計将以電影的視圖設計為例說明，演員的視圖設計與此類似，不再贅述。
電影的清單視圖是電影視圖的首頁，它引用了3.3節使用thymeleaf設計的頁面架構模闆layout.html，在這裡主要實作對資料的分頁查詢請求和清單資料顯示，并提供了一部電影的建立、檢視、修改和删除等超連結。
1.?分頁設計
電影的清單視圖的分頁設計使用了“jquery.pagination.js”分頁插件，編寫如代碼清單3-15所示的腳本，其中getopt定義了分頁工具條的一些基本屬性，pageaction通過“./list”調用控制器取得分頁資料清單，f?illdata函數将清單資料填充到html控件tbodycontent中。
代碼清單3-15 分頁設計的js編碼
// 分頁的參數設定
2.?清單頁面設計
電影清單的顯示頁面主要定義了清單字段的名稱和提供顯示資料内容的控件id，即tbodycontent，如代碼清單3-16所示。
代碼清單3-16 電影清單頁面html編碼
3.?清單視圖設計效果
電影資料清單視圖設計的最終顯示效果如圖3-2所示。
1.?建立對話框設計
建立電影時，在電影首頁中打開一個對話框顯示建立的操作界面，對話框設計引用了“artdialog.js”的對話框插件，然後編寫一個腳本來打開對話框，如代碼清單3-17所示。其中“./new”是連接配接控制器的請求url，注意這裡使用了相對路徑，這個url通過“$.get”請求傳回建立電影的html頁面，請求連結中的ts參數傳遞的是目前時間，這是為了保證該連結是一個全新的連結，以使浏覽器能顯示一個最新的内容頁面。
代碼清單3-17 建立電影對話框設計js編碼
2.?建立頁面設計
建立電影的頁面設計，如代碼清單3-18所示，這裡隻是部分html編碼，其中的日期控件使用“wdatepicker.js”插件來實作。對于一部電影來說，我們需要輸入名稱、劇照和日期三個屬性，其中劇照的圖檔下拉清單框使用“imageselect.js”圖檔下拉清單框插件來實作，并且為了簡化設計，劇照中的圖檔檔案使用了預先定義的檔案，這裡隻要選擇使用哪一個圖檔即可。
代碼清單3-18 建立電影頁面html編碼
3.?表單驗證與送出設計
驗證建立電影表單的送出時使用“jquery.validate.min.js”插件中的驗證方法來實作，如代碼清單3-19所示。儲存時調用經典的“$.ajax”方式利用post方法進行送出，其中headers: {"content-type": "application/x-www-form-urlencoded;charset=utf-8"}用于保證資料在傳輸過程中中文字元的正确性。在表單驗證中，隻對name和createdate兩個屬性進行簡單的非空驗證，表單的參數傳遞使用一個表單序列化函數serialize()來實作，它将表單控件上的對象序列化為一個個含有“鍵-值”對的字元串進行送出。
代碼清單3-19 建立電影中表單驗證和送出的js編碼
4.?建立視圖設計效果
建立電影的視圖設計最後的顯示效果如圖3-3所示。
1.?檢視對話框設計
在電影的首頁中單擊一部電影的檢視連結，将打開一個檢視電影的對話框，對話框的設計如代碼清單3-20所示，其中“./{id}”是提取資料的連結，它将向控制器請求資料，并以html頁面方式顯示出來。
代碼清單3-20 檢視電影對話框js編碼
2.?檢視頁面設計
電影檢視頁面的設計，即将資料展示出來的html編碼，如代碼清單3-21所示，需要注意的是，日期資料需要進行格式化，而演員表則使用thymeleaf中的一個“th:each”循環語句來輸出。
代碼清單3-21 電影檢視頁面html編碼
3.?檢視視圖的設計效果
電影檢視視圖設計最終完成的效果如圖3-4所示。
1.?修改對話框設計
在電影的首頁中修改一部電影，首先打開一個修改電影的對話框，這個對話框的設計如代碼清單3-22所示。其中通過“$.get”通路“./edit/{id}”取得資料和修改視圖的html頁面元素。
代碼清單3-22 修改電影對話框js編碼
2.?修改頁面設計
修改電影視圖的頁面設計如代碼清單3-23所示，其中劇照的下拉清單框中增加了“選中”的代碼：th:selected="${movie.photo == f?ile}"，即如果電影中的劇照與下拉框清單中的劇照相同，則選中它。
在修改界面上，還增加了“增加角色”和“選擇演員”的編輯項。為了簡化設計這裡的角色名稱我們也使用了預先定義的資料。
代碼清單3-23 修改電影頁面html編碼
3.?修改視圖的設計效果
最終完成的修改電影視圖的顯示效果如圖3-5所示。
1.?删除确認對話框
如果有删除的操作，首先要給出确認提示框，隻有使用者單擊确定後才能删除資料，否則将不做任何操作。确認提示框是調用了windows中的确認對話框，如代碼清單3-24所示。
代碼清單3-24 删除确認對話框js編碼
2.?删除确認設計效果
執行删除操作的确認效果如圖3-6所示。