集成 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
谢谢!
Top Related