深入实践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　查看电影视图设计效果图