深入實踐Spring Boot3.4.3 檢視視圖設計

<b>3.4.3　檢視視圖設計</b>

1.?檢視對話框設計

在電影的首頁中單擊一部電影的檢視連結，将打開一個檢視電影的對話框，對話框的設計如代碼清單3-20所示，其中“./{id}”是提取資料的連結，它将向控制器請求資料，并以html頁面方式顯示出來。

代碼清單3-20　檢視電影對話框js編碼

function detail(id){

    $.get("./"+id,{ts:new

date().gettime()},function(data){

        art.dialog({

            lock:true,

            opacity:0.3,

            title: "檢視資訊",

            width:'750px',

            height: 'auto',

            left: '50%',

            top: '50%',

            content:data,

            esc: true,

            init: function(){

                artdialog = this;

            },

            close: function(){

                artdialog = null;

            }

        });

    });

}

2.?檢視頁面設計

電影檢視頁面的設計，即将資料展示出來的html編碼，如代碼清單3-21所示，需要注意的是，日期資料需要進行格式化，而演員表則使用thymeleaf中的一個“th:each”循環語句來輸出。

代碼清單3-21　電影檢視頁面html編碼

&lt;div

class="addinfbtn"&gt;

    &lt;h3

class="itemtit"&gt;&lt;span&gt;電影資訊&lt;/span&gt;&lt;/h3&gt;

    &lt;table

class="addnewinflist"&gt;

        &lt;tr&gt;

            &lt;th&gt;名稱&lt;/th&gt;

            &lt;td

width="240"&gt;&lt;input class="inp-list w-200 clear-mr

f-left" type=

"text"

th:value="${movie.name}" id="name" name="name"

maxlength="16" /&gt;&lt;/td&gt;

            &lt;th&gt;日期&lt;/th&gt;

            &lt;td&gt;

                &lt;input  onfocus="wdatepicker({datefmt:'yyyy-mm-dd

hh:mm:ss'})" type="text" class="inp-list w-200 clear-mr

f-left" th:value="${movie.createdate} ?

${#dates.format(movie.createdate,'yyyy-mm-dd hh:mm:ss')} :''"

id="createdate" name="createdate"/&gt;

            &lt;/td&gt;

        &lt;/tr&gt;

            &lt;th&gt;劇照&lt;/th&gt;

            &lt;td width="240"&gt;

                &lt;img

th:src="${movie.photo}"/&gt;

            &lt;th&gt;演員表&lt;/th&gt;

                &lt;ul&gt;

                    &lt;li

th:each="role:${movie.roles}" th:text="${role.actor.

name}+' 飾 '+${role.name}"&gt;&lt;/li&gt;

                &lt;/ul&gt;

    &lt;/table&gt;

    &lt;div class="bottombtnbox"&gt;

        &lt;a class="btn-93x38

backbtn" href="javascript:closedialog(0)"&gt;傳回&lt;/a&gt;

    &lt;/div&gt;

&lt;/div&gt;

3.?檢視視圖的設計效果

電影檢視視圖設計最終完成的效果如圖3-4所示。

圖3-4　檢視電影視圖設計效果圖