本节书摘来自华章出版社《深入实践Spring Boot》一书中的第3章，第3.4节，作者陈韶健，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
视图设计包括列表视图、新建视图、查看视图、修改视图和删除视图设计等5个方面有关数据的增删查改的内容。我们知道，视图上的数据存取不是直接与模型打交道，而是通过控制器来处理。在视图中对于控制器的请求，大多使用jQuery的方式来实现。jQuery是一个优秀的JavaScript程序库，并且具有很好的兼容性，几乎兼容了现有的所有浏览器。下面的视图设计将以电影的视图设计为例说明，演员的视图设计与此类似，不再赘述。
电影的列表视图是电影视图的主页，它引用了3.3节使用Thymeleaf设计的页面框架模板layout.html，在这里主要实现对数据的分页查询请求和列表数据显示，并提供了一部电影的新建、查看、修改和删除等超链接。1.?分页设计电影的列表视图的分页设计使用了“jquery.pagination.js”分页插件，编写如代码清单3-15所示的脚本，其中getOpt定义了分页工具条的一些基本属性，pageaction通过“./list”调用控制器取得分页数据列表，f?illData函数将列表数据填充到HTML控件tbodyContent中。代码清单3-15 分页设计的js编码// 分页的参数设置
var getOpt = function(){ var opt = { items_per_page: 10, // 每页记录数 num_display_entries: 3, // 中间显示的页数，默认为10 current_page:0, // 当前页 num_edge_entries:1, // 头尾显示的页数，默认为0 link_to:"javascript:void(0)", prev_text:"上页", next_text:"下页", load_first_page:true, show_total_info:true , show_first_last:true, first_text:"首页", last_text:"尾页", hasSelect:false, callback: pageselectCallback // 回调函数 } return opt; } // 分页开始 var currentPageData = null ; var pageaction = function(){ $.get('./list?t='+new Date().getTime(),{ name:$("#name").val() },function(data){ currentPageData = data.content; $(".pagination").pagination(data.totalElements, getOpt()); }); } var pageselectCallback = function(page_index, jq, size){ if(currentPageData!=null){ fillData(currentPageData); currentPageData = null; }else $.get('./list?t='+new Date().getTime(),{ size:size,page:page_index,name:$("#name").val() },function(data){ fillData(data.content); }); } // 填充分页数据 function fillData(data){ var $list = $('#tbodyContent').empty(); $.each(data,function(k,v){ var html = "" ; html += '<tr> ' + '<td>'+ (v.id==null?'':v.id) +'</td>' + '<td>'+ (v.name==null?'':v.name) +'</td>' + '<td>'+ (v.createDate==null?'': getSmpFormatDateByLong(v.create Date,true)) +'</td>' ; html += '<td><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick= "detail(\''+ v.id+'\')">查看</a><a class="c-50a73f mlr-6" href= "javascript:void(0)" onclick="edit(\''+ v.id+'\')">修改</a><a class="c-50a73f mlr-6" href="javascript:void(0)" onclick="del(\''+ v.id+'\')">删除</a></td>' ; html +='</tr>' ; $list.append($(html)); }); } // 分页结束2.?列表页面设计电影列表的显示页面主要定义了列表字段的名称和提供显示数据内容的控件ID，即tbodyContent，如代码清单3-16所示。代码清单3-16 电影列表页面HTML编码
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" layout:decorator="fragments/layout"> <head> <title>电影管理</title> <link th:href="@{/scripts/pagination/pagination.css}" rel="stylesheet" type="text/css" /> <link th:href="@{/scripts/artDialog/default.css}" rel="stylesheet" type="text/css" /> <link th:href="@{/scripts/My97DatePicker/skin/WdatePicker.css}" rel="stylesheet" type="text/css" /> <link th:href="@{/styles/index.css}" rel="stylesheet" type="text/css"/> <script th:src="@{/scripts/pagination/jquery.pagination.js}"></script> <script th:src="@{/scripts/jquery.smartselect-1.1.min.js}"></script> <script th:src="@{/scripts/My97DatePicker/WdatePicker.js}"></script> <script th:src="@{/scripts/movie/list.js}"></script> </head> <body> <div class="locationLine" layout:fragment="prompt"> 当前位置：首页 > <em >电影管理</em> </div> <div class="statisticBox w-782" layout:fragment="content"> <form id="queryForm" method="get"> <div class="radiusGrayBox782"> <div class="radiusGrayTop782"></div> <div class="radiusGrayMid782"> <div class="dataSearchBox forUserRadius"> <ul> <li> <label class="preInpTxt f-left">电影名称</label> <input type="text" class="inp-list f-left w-200" place holder="按电影名称搜索" id="name" name="name"/> </li> <li> <a href="javascript:void(0)" class="blueBtn-62X30 f-right" id="searchBtn">查询</a> </li> </ul> </div> </div> </div> </form> <div class="newBtnBox"> <input type="hidden" id="m_ck" /> <a id="addBtn" class="blueBtn-62X30" href="javascript:void(0)">新增</a> </div> <div class="dataDetailList mt-12"> <table id="results" class="dataListTab"> <thead> <tr> <th>ID</th> <th>电影</th> <th>出版日期</th> <th>操作</th> </tr> </thead> <tbody id="tbodyContent"> </tbody> </table> <div class="tableFootLine"> <div class="pagebarList pagination"/> </div> </div> </div> </body> </html>3.?列表视图设计效果电影数据列表视图设计的最终显示效果如图3-2所示。
1.?新建对话框设计新建电影时，在电影主页中打开一个对话框显示新建的操作界面，对话框设计引用了“artDialog.js”的对话框插件，然后编写一个脚本来打开对话框，如代码清单3-17所示。其中“./new”是连接控制器的请求URL，注意这里使用了相对路径，这个URL通过“$.get”请求返回新建电影的HTML页面，请求链接中的ts参数传递的是当前时间，这是为了保证该链接是一个全新的链接，以使浏览器能显示一个最新的内容页面。代码清单3-17 新建电影对话框设计js编码
function create(){ $.get("./new",{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.?新建页面设计新建电影的页面设计，如代码清单3-18所示，这里只是部分HTML编码，其中的日期控件使用“WdatePicker.js”插件来实现。对于一部电影来说，我们需要输入名称、剧照和日期三个属性，其中剧照的图片下拉列表框使用“imageselect.js”图片下拉列表框插件来实现，并且为了简化设计，剧照中的图片文件使用了预先定义的文件，这里只要选择使用哪一个图片即可。代码清单3-18 新建电影页面HTML编码
<link th:href="@{/styles/imageselect.css}" rel="stylesheet" type="text/css" /> <script th:src="@{/scripts/imageselect.js}"></script> <script th:src="@{/scripts/movie/new.js}"></script> <form id="saveForm" action="./save" method="post"> <table class="addNewInfList"> <tr> <th>名称</th> <td><input class="inp-list w-200 clear-mr f-left" type="text" id= "name" name="name" maxlength="120" /></td> <th>剧照</th> <td width="240"> <select name="photo" id="photo"> <option th:each="file:${files}" th:value="${file}" th:text="${file}"> </option> </select> </td> </tr> <tr> <th>日期</th> <td> <input onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" type="text" class="inp-list w-200 clear-mr f-left" id="createDate" name="createDate"/> </td> </tr> </table> <div class="bottomBtnBox"> <a class="btn-93X38 saveBtn" href="javascript:void(0)">确定</a> <a class="btn-93X38 backBtn" href="javascript: closeDialog()">返回</a> </div> </form> <script type="text/javascript"> $(document).ready(function(){ $('select[name=photo]').ImageSelect({dropdownWidth:425}); }); </script>3.?表单验证与提交设计验证新建电影表单的提交时使用“jquery.validate.min.js”插件中的验证方法来实现，如代码清单3-19所示。保存时调用经典的“$.ajax”方式利用POST方法进行提交，其中headers: {"Content-type": "application/x-www-form-urlencoded;charset=UTF-8"}用于保证数据在传输过程中中文字符的正确性。在表单验证中，只对name和createDate两个属性进行简单的非空验证，表单的参数传递使用一个表单序列化函数serialize()来实现，它将表单控件上的对象序列化为一个个含有“键-值”对的字符串进行提交。代码清单3-19 新建电影中表单验证和提交的js编码
$(function(){ $('#saveForm').validate({ rules: { name :{required:true}, createDate :{required:true} },messages:{ name :{required:"必填"}, createDate :{required:"必填"} } }); $('.saveBtn').click(function(){ if($('#saveForm').valid()){ $.ajax({ type: "POST", url: "./save", data: $("#saveForm").serialize(), headers: {"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"}, success: function (data) { if (data == 1) { alert("保存成功"); pageaction(); closeDialog(); } else { alert(data); } }, error:function(data){ var e; $.each(data,function(v){ e += v + " "; }); alert(e); } }); }else{ alert('数据验证失败，请检查！'); } }); });4.?新建视图设计效果新建电影的视图设计最后的显示效果如图3-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所示。
1.?修改对话框设计在电影的主页中修改一部电影，首先打开一个修改电影的对话框，这个对话框的设计如代码清单3-22所示。其中通过“$.get”访问“./edit/{id}”取得数据和修改视图的HTML页面元素。代码清单3-22 修改电影对话框js编码
function edit(id){ $.get("./edit/"+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.?修改页面设计修改电影视图的页面设计如代码清单3-23所示，其中剧照的下拉列表框中增加了“选中”的代码：th:selected="${movie.photo == f?ile}"，即如果电影中的剧照与下拉框列表中的剧照相同，则选中它。在修改界面上，还增加了“增加角色”和“选择演员”的编辑项。为了简化设计这里的角色名称我们也使用了预先定义的数据。代码清单3-23 修改电影页面HTML编码
3.?修改视图的设计效果 最终完成的修改电影视图的显示效果如图3-5所示。1.?删除确认对话框如果有删除的操作，首先要给出确认提示框，只有用户单击确定后才能删除数据，否则将不做任何操作。确认提示框是调用了Windows中的确认对话框，如代码清单3-24所示。代码清单3-24 删除确认对话框js编码
function del(id){ if(!confirm("您确定删除此记录吗？")){ return false; } $.get("./delete/"+id,{ts:new Date().getTime()},function(data){ if(data==1){ alert("删除成功"); pageaction(); }else{ alert(data); } }); }2.?删除确认设计效果执行删除操作的确认效果如图3-6所示。
相关资源：敏捷开发V1.0.pptx