集成 Spring @MVC 与 jQuery 和 Bootstrap

Michael Isvy

• 培训师兼资深顾问– 2008 年加入 SpringSource

– 曾在 20 多个国家和地区教授 Spring• Core-Spring 、 Spring MVC 、 Spring 与

JPA/Hibernate 、 Apache Tomcat…

• blog.springsource.com 上的活跃博主

Michael Isvy

2

历史

3

2004

2008 设立法国分公司

2009 VMware 收购 SpringSource

2012 Vmware 推出众多新产品：CloudFoundry 、 GemFire 、 RabbitMQ …

我

Spring 1.0

创立 SpringSource （原名称 Interface21 ）

…

Spring 1.0??

博客文章的启发

4

http://blog.springsource.org/2012/08/29/

JSP 文件

• 常见 Spring MVC 最佳实践• 添加 jQuery (Javascript)• 添加 Bootstrap (CSS)• 避免 JSP 粥

议题

5

HTMLJavascriptCSSTaglibs

常见 Spring MVC 最佳实践

• 因为简单，很多人喜欢它

为什么选择 Spring MVC ？

• InfoQ JVM Web 框架 20 强– Spring MVC 位列第一

为什么选择 Spring MVC ？

http://www.infoq.com/research/jvm-web-frameworks

• 来自 zeroturnaround 的调查– Spring MVC 位列第一

为什么选择 Spring MVC ？

http://zeroturnaround.com/labs/developer-productivity-report-2012-java-tools-tech-devs-and-data/

• 哪种方式更恰当？

如何使用 Spring MVC ？

10

public class UserController extends SimpleFormController {

public ModelAndView onSubmit(Object command) { //... }

}

@Controllerpublic class UserController {

@RequestMapping(value="/users/", method=RequestMethod.POST) public ModelAndView createUser(User user) { //... }

}

已过时 !!

• 程序验证？

通过 Spring MVC 验证

11

class DiningValidator extends Validator { public void validate(Object target, Errors errors) { if ((DiningForm)target) .merchantNumber.matches("[1-9][0-9]*") ) errors.rejectValue("merchantNumber", "numberExpected"); }}

非首选方式！

• Bean 验证 (JSR 303) 注释

通过 Spring MVC 验证

12

import javax.validation.constraints.*;public class Dining { @Pattern(regexp="\\d{16}") private String creditCardNumber;

@Min(0) private BigDecimal monetaryAmount;

@NotNull private Date date;}

POJO

• Bean 验证 (JSR 303)

通过 Spring MVC 验证

import javax.validation.Valid;…@Controllerpublic class UserController {

@RequestMapping("/user") public String update(@Valid User user, BindingResult result) { if (result.hasErrors()) { return "rewards/edit"; } // continue on success... }}

控制器

• 表单标记库

表示层

14

<c:url value="/user.htm" var="formUrl" /><form:form modelAttribute="user" action="${formUrl}"> <label class="control-label">Enter your first name:</label> <form:input path="firstName"/> <form:errors path="firstName"/> ... <button type="submit">Save changes</button></form:form>

JSP

JSP 最佳实践！！

15

JSP ：哪种方法更好？

16

<tr> <td> <%=user.getFirstName() %></td> <td> <%=user.getLastName() %> </td></tr>

<tr> <td> ${user.firstName} </td> <td> ${user.lastName} </td></tr>

<tr> <td> <c:out value="${user.firstName}"/> </td> <td> <c:out value="${user.lastName}"/> </td></tr>

不好：若使用 taglibs 会更好不好：若使用 taglibs 会更好

没有 html 转义符：有遭受跨站脚本攻击的危险

没有 html 转义符：有遭受跨站脚本攻击的危险

不错！不错！

jsp 文件

Jar 文件最佳实践Webjars 简介

它好用吗？

18

版本号 !!!版本号 !!!

最佳实践

19

• 通过 Maven 或 Gradle 管理版本号<dependency> <groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId><version>3.1.3.RELEASE</version>

</dependency><dependency> <groupId>junit</groupId>

<artifactId>junit</artifactId><version>4.10</version><scope>test</scope>

</dependency>

Maven POM 文件 pom.xml

Maven POM 文件 pom.xml

版本号？

20

我们来谈谈 Webjars ！我们来谈谈 Webjars ！

<link href="/bootstrap/css/bootstrap.css" rel="stylesheet"/>

<script src="/js/addThis.js"></script><script src="/js/jquery-ui.js"></script><script src="/js/jquery.dataTables.js"></script><script src="/js/jquery.js"></script>

JSP 文件

• 允许 CSS 和 JS 库导入为 Maven 库– jQuery 、 jQuery-ui 、 bootstrap 、 backbonejs…

– http://www.webjars.org/

Webjars

Webjars

<dependency> <groupId>org.webjars</groupId> <artifactId>jquery-ui</artifactId> <version>1.9.1</version></dependency>

pom.xml

使用 Webjars

23

• pom.xml 内部 Spring 配置

• JSP 内部

<dependency> <groupId>org.webjars</groupId> <artifactId>jquery-ui</artifactId> <version>1.9.1</version></dependency>

<link rel="stylesheet" href="/webjars/jquery-ui/1.9.1/js/jquery-ui-1.9.1.custom.js">

<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>

. js 文件在 jar 文件内！. js 文件在 jar 文件内！

添加 jQuery

• Javascript 框架• 非常简单的核心，拥有数以百计的插件

– 数据表– jQuery UI （日期选择器、表单交互…）

jQuery 是什么？

为什么选择 jQuery ？

Jquery 用户界面

• 最流行的 jQuery 插件之一– 自动完成– 日期选择器– 拖放– 滑块– …

• 我们从日期开始！

Jqueri 用户界面

• java.util.Date

• Joda Time

• JSR 310: 日期和时间 API

您在 Java 中如何使用日期？

29

仅适用于简单情况仅适用于简单情况

不错！不错！

尚不可用可能在 2013 年尚不可用可能在 2013 年

与 Spring MVC 完美集成与 Spring MVC 完美集成

jqueryui 日期选择器

30

<script> $( "#startDate" ).datepicker({ dateFormat: "yy-m-dd" }); $( "#endDate" ).datepicker({ dateFormat: "yy-m-dd" });</script>…<form:input path="startDate" /><form:input path="endDate" />

JSP 文件

添加 jQuery

数据表

• jQuery 数据表插件• 单击、排序、滚动、下一页 / 上一页…• http://datatables.net/

jQuery 数据表

• 您甚至不需要自己编写 Javascript ！• 只需借助 DataTables4J

– http://datatables4j.github.com/docs/

Spring MVC 中的数据表

<dependency><groupId>com.github.datatables4j</groupId><artifactId>datatables4j-core-impl</artifactId><version>0.7.0</version>

</dependency>

pom.xml

• JSP 文件内部

Spring MVC 中的数据表

34

<datatables:table data="${userList}" id="dataTable" row="user"><datatables:column title="First Name"

property="firstName" sortable="true" />

<datatables:column title="Last Name" property="lastName" sortable="true" />

</datatables:table>

JSP 文件

Bootstrap

我们来谈谈 CSS…

• 网页设计师从此不再哭泣，泪水成往事！

为什么选择 Bootstrap ？

我们来谈谈 Bootstrap ！我们来谈谈 Bootstrap ！

• 原名为“ Twitter Bootstrap”• 始于 2011• 字体、表单、按钮、图表、导航以及其他界面组件• 可与 jQuery 完美集成

Bootstrap 是什么？

• Github 上最流行的项目！

Bootstrap 是什么？

https://github.com/popular/starred

• 数以百计的主题– 让您的网站看起来与众不同！– 既有免费的，也有商业化的

• 例如： www.bootswatch.com/

Bootstrap 主题

避免 JSP 粥

JSP 文件

HTMLJavascriptCSSTaglibs

• 我们的应用程序现在在浏览器中看起来还不错

• 实际上怎么样？– 我们可以做得更好！

避免 JSP 粥

• 您驾驭 JSP 的最佳帮手！

• 轻松将 100 行代码转换为 10 行代码！

JSP 自定义标记

• 自定义标记是 Java EE 的一部分– .tag 和 .tagx 文件

• 创建于 2004 年– 并非新功能！

自定义标记

43

表单字段：无自定义标记

<div class="control-group" id="${lastName}"><label class="control-label">${lastNameLabel}</label><div class="controls">

<form:input path="${name}"/><span class="help-inline">

<form:errors path="${name}"/></span>

</div></div>

CSS div标签表单输入

错误消息（如果有）

JSP

• 先创建一个标记（或 tagx ）文件

使用自定义标记

<%@ taglib prefix="form" uri="http://www.spring…org/tags/form" %><%@ attribute name="name" required="true" rtexprvalue="true" %><%@ attribute name="label" required="true" rtexprvalue="true" %><div class="control-group" id="${name}">

<label class="control-label">${label}</label><div class="controls">

<form:input path="${name}"/><span class="help-inline">

<form:errors path="${name}"/></span>

</div></div>

inputField.tag

• 自定义标记调用

使用自定义标记包含自定义标记的文件夹

<html xmlns:custom="urn:jsptagdir:/WEB-INF/tags/html" …> … <custom:inputField name="firstName" label="Enter your first name:" /> <custom:inputField name="lastName" label="Enter your last name:" /></html>

JSP 文件

1 行代码，而不是 9 行！

不再是 JSP 粥！

• 考虑对静态文件使用 WebJars– http://www.webjars.org/

• 将 Spring MVC 与 jQuery 集成很简单– 考虑使用 DataTables4J – http://datatables4j.github.com/docs/

– Bootstrap 酷毙了！– JSP 自定义标记可助您一臂之力

总结

47

谢谢！