深入实践Spring Boot3.3　使用Thymeleaf模板

3.3.1 Thymeleaf配置 要使用Thymeleaf模板,首先,必须在工程的Maven管理中引入它的依赖:"spring-boot-starter-thymeleaf",如代码清单3-9所示. 代码清单3-9 Thymeleaf依赖配置 <dependency>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-t

3.6 小结 本章介绍了使用MVC的多层结构方式,以及在Spring Boot进行Web界面设计的方法,并且使用Thymeleaf模板设计了一个Web应用的页面框架.Web界面设计的一些细节,更多的是使用了HTML编码和JavaScript脚本,而HTML离不开CSS的支持,JavaScript更是借助于jQuery及其各种插件的功能.读者如需深入了解这方面的知识和技术,可查找相关的知识进行学习和研究.这里主要使用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.4.1 列表视图设计 电影的列表视图是电影视图的主页,它引用了3.3节使用Thymeleaf设计的页面框架模板layout.html,在这里主要实现对数据的分页查询请求和列表数据显示,并提供了一部电影的新建.查看.修改和删除等超链接. 1.?分页设计 电影的列表视图的分页设计使用了"jquery.pagination.js"分页插件,编写如代码清单3-15所示的脚本,其中getOpt定义了分页工具条的一些基本属性,pageaction通过"./list"调用控制

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

3.5 运行与发布 本章实例工程的完整代码可以通过IDEA从GitHub中检出:https://github.com/chenfromsz/spring-boot-ui.git.Spring Boot需要一个启动程序作为应用的入口,在webui模块中,我们设计了一个入口程序,如代码清单3-25所示.使用这个入口程序,就可以调试和发布工程了. 代码清单3-25 Web应用启动主程序 package com.test.webui;   import org.springframework.boot.

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

3.1 模型设计 数据管理模块实现了MVC中模型的设计,主要负责实体建模和数据库持久化等方面的功能.在本章的实例中,将使用上一章的Neo4j数据库的例子,对电影数据进行管理.回顾一下,有两个节点实体(电影和演员)和一个关系实体(角色).其中,关系实体体现了节点实体之间的关系,即一个演员在一部电影中扮演一个角色.实体建模和持久化与上一章的实现差不多.只不过为了适应本章的内容,电影节点实体和角色关系实体的建模在属性上做了些许调整.另外针对Neo4j数据库的分页查询也做了一些调整和优化.

3.1.2 关系实体建模 电影实体对应的角色关系实体建模的关系类型也同样做了调整而改为"扮演",如代码清单3-2所示. 代码清单3-2 角色关系实体建模 @JsonIdentityInfo(generator=JSOGGenerator.class) @RelationshipEntity(type = "扮演") public class Role {     @GraphId     Long id;     String name;     @StartNod