集成 Spring @MVC 与 jQuery 和 Bootstrap Michael Isvy

Michael Isvy 大家好。 我的名字叫Michael. 我是法国人。2008年我开始在SpringSource 公司工作。 培训师兼资深顾问 2008 年加入 SpringSource 曾在 20 多个国家和地区教授 Spring Core-Spring、Spring MVC、Spring 与 JPA/Hibernate、Apache Tomcat… blog.springsource.com 上的活跃博主 大家好。 我的名字叫Michael. 我是法国人。2008年我开始在SpringSource 公司工作。 我是一个IT顾问和培训经理。(我已经在20多国家教过Spring, Tomcat 和vFabric的课程。Ke4cheng2) 我去过很多国家叫Spring 有空的时候,我就在blog.springsource.com上写博客。 我常常在SpringSource博客上写一些文章

历史 2004 Spring 1.0 创立 SpringSource （原名称 Interface21） … 2008 设立法国分公司 Spring 1.0?? 我 2009 VMware 收购 SpringSource 2012 Vmware 推出众多新产品：CloudFoundry、GemFire、RabbitMQ … 你们知不知道Spring是什么时候发布的？ 我们可以讨论一下SpringSource的历史（li4shi3) 2004年：Spring 1.0 出来了。这个时候SpringSource有7个创始人.（chuang4shi3ren2) 一点儿零 2008年：SpringSource只有20个员工。(yuan2gong1). 法国 的SpringSource分公司是我跟朋友一起创建的。(ye4wu4) （ban3ben3) (chuang4jian4) 2009年: VMware 收购了SpringSource (shou1gou4) 到了2012年：我们比以前壮大了。我们现在有新的产品: Cloudfoundry, GemFire, RabbitMQ… (chan3pin3) 等等 deng3deng3 接下来 jie1xia4lai2 : et ensuite… 3

博客文章的启发 http://blog.springsource.org/2012/08/29/ 八月份的时候，我在博客上写了一篇文章。有很多人留言(liu2yan2, comment) 我很快就发现有很多人感兴趣。 我们今天要讨论的内容跟这篇文章有关。

议题 常见 Spring MVC 最佳实践 添加 jQuery (Javascript) HTML Javascript 添加 Bootstrap (CSS) 避免 JSP 粥 JSP 文件 HTML Javascript CSS Taglibs 这是今天的日程(ri4cheng2) 我们先要讨论Spring MVC的最优方法。 然后我们要用jQuery和Twitter Bootstrap的接合 最后咱们能发现JSP里边有太多技术：有HTML, JSP scriptlets, CSS, JavaScript… 都很乱。我们把这个叫做“JSP soup” (JSP 粥）。（ji4shu4) 最后咱们要讨论怎么避免(bi4mian2)JSP 粥。 我们先讨论。。 然后讨论。。。 再讨论。。。 最后讨论。。。

常见 Spring MVC 最佳实践

为什么选择 Spring MVC？ 因为简单，很多人喜欢它 为什么有人用Spring MVC? Spring MVC是一个很简单web framework.

为什么选择 Spring MVC？ InfoQ JVM Web 框架 20 强 Spring MVC 位列第一 http://www.infoq.com/research/jvm-web-frameworks 这个年有两个很大的民意测验 (min2yi4ce4yan4) 他们都说Spring MVC 是web frameworks 的第一名。

为什么选择 Spring MVC？ 来自 zeroturnaround 的调查 Spring MVC 位列第一 http://zeroturnaround.com/labs/developer-productivity-report-2012-java-tools-tech-devs-and-data/ 这个年有两个很大的民意测验 (min2yi4ce4yan4) 他们都说Spring MVC 是web frameworks 的第一名。

如何使用 Spring MVC？ 哪种方式更恰当？ 已过时!! @Controller public class UserController { @RequestMapping(value="/users/", method=RequestMethod.POST) public ModelAndView createUser(User user) { //... } } public class UserController extends SimpleFormController { public ModelAndView onSubmit(Object command) { //... } } 已过时!! Next: show quickly what we have in the code.

通过 Spring MVC 验证 程序验证？ 非首选方式！ class DiningValidator extends Validator { public void validate(Object target, Errors errors) { if ((DiningForm)target) .merchantNumber.matches("[1-9][0-9]*") ) errors.rejectValue("merchantNumber", "numberExpected"); } 非首选方式！

通过 Spring MVC 验证 POJO Bean 验证 (JSR 303) 注释 import javax.validation.constraints.*; public class Dining { @Pattern(regexp="\\d{16}") private String creditCardNumber; @Min(0) private BigDecimal monetaryAmount; @NotNull private Date date; } POJO

通过 Spring MVC 验证 控制器 Bean 验证 (JSR 303) @Controller import javax.validation.Valid; … @Controller public class UserController { @RequestMapping("/user") public String update(@Valid User user, BindingResult result) { if (result.hasErrors()) { return "rewards/edit"; } // continue on success... } 控制器 Go into app and run 2 ways: correct and not correct. way

表示层 JSP 表单标记库 <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 最佳实践！！

没有 html 转义符：有遭受跨站脚本攻击的危险 JSP：哪种方法更好？ <tr> <td> <%=user.getFirstName() %></td> <td> <%=user.getLastName() %> </td> </tr> 1 不好：若使用 taglibs 会更好 jsp 文件 <tr> <td> ${user.firstName} </td> <td> ${user.lastName} </td> </tr> 2 没有 html 转义符：有遭受跨站脚本攻击的危险 <tr> <td> <c:out value="${user.firstName}"/> </td> <td> <c:out value="${user.lastName}"/> </td> </tr> 3 不错！

Jar 文件最佳实践 Webjars 简介

它好用吗？ 版本号!!!

最佳实践 通过 Maven 或 Gradle 管理版本号 Maven POM 文件 pom.xml <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>3.1.3.RELEASE</version> </dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.10</version> <scope>test</scope> Maven POM 文件 pom.xml

版本号？ 我们来谈谈 Webjars！ JSP 文件 <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 文件 我们来谈谈 Webjars！ Show a folder which does not contain any version number

Webjars 允许 CSS 和 JS 库导入为 Maven 库 jQuery、jQuery-ui、bootstrap、backbonejs… http://www.webjars.org/

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

使用 Webjars pom.xml 内部 Spring 配置 JSP 内部 . js 文件在 jar 文件内！ <dependency> <groupId>org.webjars</groupId> <artifactId>jquery-ui</artifactId> <version>1.9.1</version> </dependency> <mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/> . js 文件在 jar 文件内！ <link rel="stylesheet" href="/webjars/jquery-ui/1.9.1/js/jquery-ui-1.9.1.custom.js"> Possibly: show that we can outsource from a variable

添加 jQuery

jQuery 是什么？ Javascript 框架 非常简单的核心，拥有数以百计的插件 数据表 jQuery UI（日期选择器、表单交互…）

为什么选择 jQuery？ Demo jQuery

Jquery 用户界面

Jqueri 用户界面 最流行的 jQuery 插件之一 自动完成 日期选择器 拖放 滑块 … 我们从日期开始！ Demo

您在 Java 中如何使用日期？ 不错！ java.util.Date Joda Time JSR 310: 日期和时间 API 仅适用于简单情况 不错！ 与 Spring MVC 完美集成 尚不可用可能在 2013 年 Demo: server side

jqueryui 日期选择器 JSP 文件 <script> $( "#startDate" ).datepicker({ dateFormat: "yy-m-dd" }); $( "#endDate" ).datepicker({ dateFormat: "yy-m-dd" }); </script> … <form:input path="startDate" /> <form:input path="endDate" /> Demo: JSP (avec ou sans jQuery) JSP 文件

添加 jQuery 数据表

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

Spring MVC 中的数据表 您甚至不需要自己编写 Javascript！ 只需借助 DataTables4J http://datatables4j.github.com/docs/ <dependency> <groupId>com.github.datatables4j</groupId> <artifactId>datatables4j-core-impl</artifactId> <version>0.7.0</version> </dependency> pom.xml

Spring MVC 中的数据表 JSP 文件内部 <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 完美集成 Demo

Bootstrap 是什么？ 1 2 3 Github 上最流行的项目！ https://github.com/popular/starred

Bootstrap 主题 数以百计的主题 让您的网站看起来与众不同！ 既有免费的，也有商业化的 例如：www.bootswatch.com/

避免 JSP 粥 JSP 文件 HTML Javascript CSS Taglibs

避免 JSP 粥 我们的应用程序现在在浏览器中看起来还不错 实际上怎么样？ 我们可以做得更好！ Show code

JSP 自定义标记 您驾驭 JSP 的最佳帮手！ 轻松将 100 行代码转换为 10 行代码！ 离不开的朋友

自定义标记 自定义标记是 Java EE 的一部分 .tag 和 .tagx 文件 创建于 2004 年 并非新功能！

表单字段：无自定义标记 JSP CSS div 标签 表单输入 错误消息（如果有） <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> CSS div 标签 表单输入 错误消息（如果有） 离不开的朋友

使用自定义标记 inputField.tag 先创建一个标记（或 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> 离不开的朋友

使用自定义标记 1 行代码， JSP 而不是 9 行！ 自定义标记调用 包含自定义标记的 文件夹 JSP 文件 不再是 JSP 粥！ <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 文件 JSP 1 行代码， 而不是 9 行！ 离不开的朋友 不再是 JSP 粥！

总结 考虑对静态文件使用 WebJars 将 Spring MVC 与 jQuery 集成很简单 http://www.webjars.org/ 将 Spring MVC 与 jQuery 集成很简单 考虑使用 DataTables4J http://datatables4j.github.com/docs/ Bootstrap 酷毙了！ JSP 自定义标记可助您一臂之力 这是今天的日程(ri4cheng2) 我们先要讨论Spring MVC的最优方法。 以后我们要用jQuery和Twitter Bootstrap 最后我们能发现JSP里边有太多技术：有HTML, JSP scriptlets, CSS, JavaScript… 都很乱。我们叫这个“JSP soup” (JSP 粥）。 最后咱们要讨论怎么避免(bi4mian2)JSP 粥。 我们先讨论。。 然后讨论。。。 在讨论。。。 最后讨论。。。

谢谢！