本系列文章主要索引如下:
【Spring MVC】Spring Boot 框架开发Web项目之一 前期准备
【Spring MVC】Spring Boot框架开发Web项目之二 Hello Spring Boot
【Spring MVC】Spring Boot框架开发Web项目之三 第一个页面
【Spring MVC】Spring Boot框架开发Web项目之四 将数据传递给视图
【Spring MVC】Spring Boot框架开发Web项目之五 使用Webjars实现质感设计
【Spring MVC】Spring Boot框架开发Web项目之六 表单数据提交
【Spring MVC】Spring Boot框架开发Web项目之七 日期的使用和输出日志
【Spring MVC】Spring Boot框架开发Web项目之八 表单校验
【Spring MVC】Spring Boot 框架开发Web项目之九 Spring Boot项目的打包和部署
【Spring MVC】Spring Boot 框架开发Web项目之十 整合MongoDB
现在我们已经搭建好了Web框架,下面我们开始将第一个页面插入到我们的应用中来。
工具
IntelliJ IDEA 16
JDK 1.8
Maven 3.5
Tomcat 1.8
第一个页面
视图通常会与某种模板方言关联,这种模板允许遍历模型中的内容,流行的模板方言包括JSP、FreeMarker、Thymeleaf。在此,我们将使用Thymeleaf,Thymeleaf是一个模板引擎,它的成功在很大程度上要归因于对用户友好的语法(它几乎就是HTML)以及扩展的便利性。
关于Thymeleaf与Spring集成有一个很好的入门指南,参见:http://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html
1、添加Thymeleaf模板引擎
闲言少叙,下面我们开始将thymeleaf依赖添加到项目中,这样我们就能启动Thymeleaf模板引擎了,Maven环境下添加如下:
打开pom.xml,编辑如下图所示
2、添加页面
现在讲第一个页面添加到项目中,在src/main/resources/templates中新建一个HTML页面,并将其命名为resultPage.html,添加后目录结构如下
打开resultPage.html,编辑文件
3、修改Controller类
此时HelloController类必须要导航至我们新建的视图,而不是再展示简单的文本。为了完成该功能,我们需要移除@CRestController注解。这样做完之后,如果再次返回字符串的话,就会高数Spring MVC要将这个字符串隐射为视图名,而不是在响应中直接展现特定的模型。
我们的控制器将会变为如下所示
4、测试运行
现在,控制器会将用户的请求转移到resultPage的视图中,ViewResolver接口会将这个名字与我们的视图进行关联。
启动应用并访问: http://localhost:8080/he
我们将看到页面
说明:
th:text的值放在两个竖线中间,这意味着文本中所有的值都会连接在一起。
如果没有添加两个竖线则访问时会出现如下异常
对于Web设计人员来说,Thymeleaf有一项很大的优势,那就是在服务器没有运行的时候,模板中所有的动态内容都可以采用一个默认值(如resultPage.html中的 <span>标签中的文本“hello html”)。资源URL可以采用相对的路径来指定,每个标签都可以包含占位符,在前面的样例中,如果是在应用的上下中,那么文本“hello html”不会显示,但是如果直接再Web浏览器中打开这个文件的话,那么它就会显示“hello html”,而不会显示“hello thymeleaf”了。
网友评论