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 οnfοcus="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 查看电影视图设计效果图
相关资源：敏捷开发V1.0.pptx