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