深入实践Spring Boot3.4.3　查看视图设计

3.4.3　查看视图设计

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编码

<div class="addInfBtn">

    <h3 class="itemTit"><span>电影信息</span></h3>

    <table class="addNewInfList">

        <tr>

            <th>名称</th>

            <td width="240"><input class="inp-list w-200 clear-mr f-left" type=

"text" th:value="${movie.name}" id="name" name="name" maxlength="16" /></td>

            <th>日期</th>

            <td>

                <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"/>

            </td>

        </tr>

        <tr>

            <th>剧照</th>

            <td width="240">

                <img th:src="${movie.photo}"/>

            </td>

            <th>演员表</th>

            <td width="240">

                <ul>

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

name}+' 饰 '+${role.name}"></li>

                </ul>

            </td>

        </tr>

    </table>

    <div class="bottomBtnBox">

        <a class="btn-93X38 backBtn" href="javascript:closeDialog(0)">返回</a>

    </div>

</div>

3.?查看视图的设计效果

电影查看视图设计最终完成的效果如图3-4所示。

图3-4　查看电影视图设计效果图