SpringBoot整合视图层技术

在目前的企业级应用开发中,前后端分离是趋势,但是视图层技术还占有一席之地。Spring Boot对视图层技术提供了很好的支持,官方推荐使用的模板引擎是Thymeleaf,不过像FreeMarker也支持,JSP 技术在这里并不推荐使用。

Thymeleaf

配置

引入jar包:

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

spring boot配置:

#thymeleaf start

spring.thymeleaf.mode=HTML5

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.content-type=text/html

#开发时关闭缓存,不然没法看到实时页面

spring.thymeleaf.cache=false

#thymeleaf end

页面引入:

<html xmlns:th="http://www.thymeleaf.org">

标签的使用

引入url

<a th:href="@{http://blog.csdn.net/u012706811}">绝对路径</a>

<a th:href="@{/}">相对路径</a>

<a th:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>

当要写动态链接时括号属性如:@{user(id=${user.id})()..} 相等于 user?id=1&..

th:action

<form id="form" th:action="@{/login}">...</form>

th:href

<a th:href="@{/logout}" ></a>

th:src

<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"

th:text

<td th:text="${username}" ></td>

th:value

<option th:value="Adult">Adult</option>
<input type="hidden" th:value="${msg}" />

th:include

th:replace

th:fragment

声明定义该属性的div为模板片段,常用与头文件、页尾文件的引入。常与th:include,th:replace一起使用。

例如:

声明模板片段/WEBINF/templates/footer. html

<div th: fragment=" copy" >
© 2011 The Good Thymes Virtual Grocery
</div>

引入模板片段

<div th: include=" /templates/footer : : copy" ></div>
<div th: replace=" /templates/footer : : copy" ></div>

th:if

<div th:if="${rowStat.index} == 0">... do something ...</div>

th:each

<form id="login-form" th:action="@{/addStudent}"

th:object="${stuReqBean}" method="POST">

<div class="student" th:each="stuIter,rowStat:${stuReqBean.students}">

<input type="text" class="firstName" value=""

th:field="*{students[__${rowStat.index}__].firstName}"></input>

<input type="text" class="school" value=""

th:field="*{students[__${rowStat.index}__].school}"></input>

...

</div>

</form>

上面的例子中通过选择表达式*{}既能将表单绑定到后台的StudentRequestBean中的集合属性students,也能将Servlet上下文中的StudentRequestBean中的List类型的students变量回显,回显时通过th:each进行遍历。

注意1:绑定集合属性元素下标的用法*{students[__${rowStat.index}__].firstName}

注意2:如果List<Student> students为null,页面将无法显示表单,后台必须给students初始化一个值,即:

List<Student > stus = new ArrayList<Student >();

stus .add(new Student ());

StudentRequestBean.setStudents(stus );

注意3:stuIter代表students的迭代器

th:object

<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...</form>

th:field

<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...
<input type="text" value="" th:field="*{username}"></input>
<input type="text" value="" th:field="*{user[0].username}"></input>
</form>

SpringBoot_整合视图层技术的更多相关文章

  1. Spring Boot 整合视图层技术

    这一节我们主要学习如何整合视图层技术: Jsp Freemarker Thymeleaf 在之前的案例中,我们都是通过 @RestController 来处理请求,所以返回的内容为json对象.那么如 ...

  2. Spring Boot 整合视图层技术,application全局配置文件

    目录 Spring Boot 整合视图层技术 Spring Boot 整合jsp Spring Boot 整合freemarker Spring Boot 整合视图层技术 Spring Boot 整合 ...

  3. SpringBoot视图层技术

    一.SpringBoot整合jsp 在maven的dependencies的依赖中除了springBoot启动器还要添加对jstl和jsp的依赖. <dependencies> <d ...

  4. SpringBoot整合持久层技术--(一)JdbcTemplate

    简介: JdbcTemplate是Spring提供的一套JDBC模板框架,利用AOP技术解决直接使用JDBC带来的重复代码问题.它没有MyBatis使用那么灵活,但是却比直接使用JDBC方便得多.Sp ...

  5. SpringBoot整合持久层技术--(三)Spring Data JPA

    简介: JPA(java Persistence API)和SpringData是两个范畴的概念.spring data jpa是spring公司下的spring data项目的一个模块. sprin ...

  6. SpringBoot整合持久层技术--(二)MyBatis

    简介: 原名iBatis,SpringBoot中使用MyBatis: pom.xml <dependency> <groupId>org.springframework.boo ...

  7. Spring Boot 整合Web 层技术(整合Servlet)

    1 整合Servlet 方式一1.1通过注解扫描完成Servlet 组件的注册      1.1.1创建Servlet /*** 整合Servlet 方式一*/@WebServlet(name = & ...

  8. SpringBoot整合持久层技术-创建项目

    新建项目 Pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&q ...

  9. springboot整合持久层技术(mysql驱动问题)

    java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized or represents more tha ...

随机推荐

  1. wsgiref — WSGI Utilities and Reference Implementation nginx

    from wsgiref.util import setup_testing_defaults, request_urifrom wsgiref.simple_server import make_s ...

  2. 连通图(Tarjan算法) 专题总结

    一.题目类型: 1.有向图的强连通分量: POJ1236 Network of Schools HDU1269 迷宫城堡 2.割点 & 割边: UESTC - 900 方老师炸弹 UVA315 ...

  3. I.MX6 MAC Address 导致的系统崩溃

    /**************************************************************************** * I.MX6 MAC Address 导致 ...

  4. Mybatis中用到的设计模式

    Mybatis中用到至少用到以下设计模式, Builder模式,例如SqlSessionFactoryBuilder.XMLConfigBuilder.XMLMapperBuilder.XMLStat ...

  5. 优化Laravel的分页LIMIT和OFFSET调用

    在分页系统中使用limit和offset是很常见的,它们通常也会和ORDER BY一起使用.索引对排序较有帮助,如果没有索引就需要大量的文件排序. 一个常见的问题是偏移量很大,比如查询使用了LIMIT ...

  6. 小程序-demo:知乎日报

    ylbtech-小程序-demo:知乎日报 1.返回顶部 0.         1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存 ...

  7. jsDoc 使用及配置!

    原文地址:http://www.cnblogs.com/hxling/archive/2012/11/27/2791067.html jsDoc 说白了就是帮助你生成JS的文档,但有个前提,就是你编写 ...

  8. 一步一步学Vue(六)

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  9. PCB 合拼遍历(全排序+旋转90度) 基本遍历方法

    分享一下PCB合拼的组合的遍历方法,在分享之前先纠正一下 PCB拼板之多款矩形排样算法实现--学习  时间复杂度计算错误  一.PCB 合拼(全排序+旋转90度)的时间复杂度是多少? 二.合拼遍历(全 ...

  10. bzoj 2876: [Noi2012]骑行川藏【拉格朗日乘数法+二分】

    详见: http://blog.csdn.net/popoqqq/article/details/42366599 http://blog.csdn.net/whzzt/article/details ...