深入实践Spring Boot3.4　视图设计

3.4.1 列表视图设计 电影的列表视图是电影视图的主页,它引用了3.3节使用Thymeleaf设计的页面框架模板layout.html,在这里主要实现对数据的分页查询请求和列表数据显示,并提供了一部电影的新建.查看.修改和删除等超链接. 1.?分页设计 电影的列表视图的分页设计使用了"jquery.pagination.js"分页插件,编写如代码清单3-15所示的脚本,其中getOpt定义了分页工具条的一些基本属性,pageaction通过"./list"调用控制

3.4.2 新建视图设计 1.?新建对话框设计 新建电影时,在电影主页中打开一个对话框显示新建的操作界面,对话框设计引用了"artDialog.js"的对话框插件,然后编写一个脚本来打开对话框,如代码清单3-17所示.其中"./new"是连接控制器的请求URL,注意这里使用了相对路径,这个URL通过"$.get"请求返回新建电影的HTML页面,请求链接中的ts参数传递的是当前时间,这是为了保证该链接是一个全新的链接,以使浏览器能显示一个最新的内容

3.4.3 查看视图设计 1.?查看对话框设计 在电影的主页中单击一部电影的查看链接,将打开一个查看电影的对话框,对话框的设计如代码清单3-20所示,其中"./{id}"是提取数据的链接,它将向控制器请求数据,并以HTML页面方式显示出来. 代码清单3-20 查看电影对话框js编码 function detail(id){     $.get("./"+id,{ts:new Date().getTime()},function(data){         art.

3.4.4 修改视图设计 1.?修改对话框设计 在电影的主页中修改一部电影,首先打开一个修改电影的对话框,这个对话框的设计如代码清单3-22所示.其中通过"$.get"访问"./edit/{id}"取得数据和修改视图的HTML页面元素. 代码清单3-22 修改电影对话框js编码 function edit(id){     $.get("./edit/"+id,{ts:new Date().getTime()},function(data){  

3.4.5 删除视图设计 1.?删除确认对话框 如果有删除的操作,首先要给出确认提示框,只有用户单击确定后才能删除数据,否则将不做任何操作.确认提示框是调用了Windows中的确认对话框,如代码清单3-24所示. 代码清单3-24 删除确认对话框js编码 function del(id){     if(!confirm("您确定删除此记录吗?")){         return false;     }     $.get("./delete/"+id,{ts:

3.3 使用Thymeleaf模板 完成了模型和控制器的设计之后,接下来的工作就是视图设计了.在视图设计中主要使用Thymeleaf模板来实现.在进行视图设计之前,先了解一下Thymeleaf模板的功能. Thymeleaf是一个优秀的面向Java的XML/XHTML/HTML 5页面模板,并具有丰富的标签语言和函数.使用Spring Boot框架进行界面设计,一般都会选择Thymeleaf模板.

3.3.2 Thymeleaf功能简介 在HTML页面上使用Thymeleaf标签语言,用一个简单的关键字"th"来标注.使用Thymeleaf标签语言的典型例子如下: <h3 th:text="${actor.name}"></h3> <img th:src="@{/images/logo.png}"/> 其中,th:text指定了在标签<h3>中显示的文本,它的值来自于关键字"$&qu

3.1.3 分页查询设计 对于新型的Neo4j数据库来说,由于它的资源库遵循了JPA的规范标准来设计,在分页查询方面有的地方还不是很完善,所以在分页查询中,设计了一个服务类来处理,如代码清单3-3所示.其中,使用Class<T>传入调用的实体对象,使用Pageable传入页数设定和排序字段设定的参数,使用Filters传入查询的一些节点属性设定的参数. 代码清单3-3 Neo4j分页查询服务类 @Service public class PagesService<T> {    

3.2.1 新建控制器 接收新建电影的请求,以及输入一部电影的数据后的最后提交,由新建控制器进行处理.在控制器上将执行两个操作,第一个操作将返回一个新建电影的视图,第二个操作接收界面中的输入数据,并调用数据管理模块进行保存,如代码清单3-4所示.其中,create函数将返回一个新建电影的视图,它不调用数据管理模块,save函数将需要保存的数据通过调用数据管理模块存储至数据库中,并返回一个成功标志.注意,为了简化设计,将电影剧照的图片文件做了预定义处理. 代码清单3-4 新建电影控制器 @Requ