Spring MVC j Query Bootstrap Michael Isvy Michael

集成 Spring @MVC 与 j. Query 和 Bootstrap Michael Isvy

Michael Isvy • 培训师兼资深顾问 – 2008 年加入 Spring. Source – 曾在 20 多个国家和地区教授 Spring • Core-Spring、Spring MVC、Spring 与 JPA/Hibernate、 Apache Tomcat… • blog. springsource. com 上的活跃博主 2

历史 2004 Spring 1. 0 … 创立 Spring. Source （原名称 Interface 21） 2008 设立法国分公司 我 3 Spring 1. 0? ? 2009 VMware 收购 Spring. Source 2012 Vmware 推出众多新产品：Cloud. Foundry、Gem. Fire、 Rabbit. MQ …

博客文章的启发 http: //blog. springsource. org/2012/08/29/ 4

议题 • • 5 常见 Spring MVC 最佳实践 添加 j. Query (Javascript) 添加 Bootstrap (CSS) 避免 JSP 粥 HTML Javascript CSS Taglibs JSP 文件

为什么选择 Spring MVC？ • Info. Q JVM Web 框架 20 强 – Spring MVC 位列第一 http: //www. infoq. com/research/jvm-web-frameworks

为什么选择 Spring MVC？ • 来自 zeroturnaround 的调查 – Spring MVC 位列第一 http: //zeroturnaround. com/labs/developer-productivity-report-2012 -java-toolstech-devs-and-data/

如何使用 Spring MVC？ • 哪种方式更恰当？ public class User. Controller extends Simple. Form. Controller { @Controller public class User. Controller { @Request. Mapping(value="/users/", method=Request. Method. POST) public Model. And. View create. User(User user) { //. . . } public Model. And. View on. Submit(Object command) { //. . . } } } 已过时!! 10

通过 Spring MVC 验证 • 程序验证？ class Dining. Validator extends Validator { public void validate(Object target, Errors errors) { if ((Dining. Form)target). merchant. Number. matches("[1 -9][0 -9]*") ) errors. reject. Value("merchant. Number", "number. Expected"); } } 非首选方式！ 11

通过 Spring MVC 验证 • Bean 验证 (JSR 303) 注释 import javax. validation. constraints. *; public class Dining { @Pattern(regexp="\d{16}") private String credit. Card. Number; @Min(0) private Big. Decimal monetary. Amount; @Not. Null private Date date; } 12 POJO

通过 Spring MVC 验证 • Bean 验证 (JSR 303) import javax. validation. Valid; … @Controller public class User. Controller { @Request. Mapping("/user") public String update(@Valid User user, Binding. Result result) { if (result. has. Errors()) { return "rewards/edit"; } // continue on success. . . } } 控制器

表示层 • 表单标记库 <c: url value="/user. htm" var="form. Url" /> <form: form model. Attribute="user" action="${form. Url}"> <label class="control-label">Enter your first name: </label> <form: input path="first. Name"/> <form: errors path="first. Name"/>. . . <button type="submit">Save changes</button> </form: form> 14 JSP

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

最佳实践 • 通过 Maven 或 Gradle 管理版本号 <dependency> <group. Id>org. springframework</group. Id> <artifact. Id>spring-webmvc</artifact. Id> <version>3. 1. 3. RELEASE</version> </dependency> <group. Id>junit</group. Id> <artifact. Id>junit</artifact. Id> <version>4. 10</version> <scope>test</scope> </dependency> 19 Maven POM 文件 pom. xml

版本号？ <link href="/bootstrap/css/bootstrap. css" rel="stylesheet"/> <script src="/js/add. This. js"></script> <script src="/js/jquery-ui. js"></script> <script src="/js/jquery. data. Tables. js"></script> <script src="/js/jquery. js"></script> JSP 文件 我们来谈谈 Webjars！ 20

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

Webjars <dependency> <group. Id>org. webjars</group. Id> <artifact. Id>jquery-ui</artifact. Id> <version>1. 9. 1</version> </dependency> pom. xml

使用 Webjars • pom. xml 内部 <dependency> <group. Id>org. webjars</group. Id> <artifact. Id>jquery-ui</artifact. Id> <version>1. 9. 1</version> </dependency> Spring 配置 <mvc: resources mapping="/webjars/**" location="classpath: /METAINF/resources/webjars/"/> • JSP 内部 <link rel="stylesheet" href="/webjars/jquery-ui/1. 9. 1/js/jquery-ui-1. 9. 1. custom. js"> . js 文件在 jar 文件内！ 23

添加 j. Query

jqueryui 日期选择器 <script> $( "#start. Date" ). datepicker({ date. Format: "yy-m-dd" }); $( "#end. Date" ). datepicker({ date. Format: "yy-m-dd" }); </script> … <form: input path="start. Date" /> <form: input path="end. Date" /> JSP 文件 30

Spring MVC 中的数据表 • 您甚至不需要自己编写 Javascript！ • 只需借助 Data. Tables 4 J – http: //datatables 4 j. github. com/docs/ <dependency> <group. Id>com. github. datatables 4 j</group. Id> <artifact. Id>datatables 4 j-core-impl</artifact. Id> <version>0. 7. 0</version> </dependency> pom. xml

Spring MVC 中的数据表 • JSP 文件内部 <datatables: table data="${user. List}" id="data. Table" row="user"> <datatables: column title="First Name" property="first. Name" sortable="true" /> <datatables: column title="Last Name" property="last. Name" sortable="true" /> </datatables: table> JSP 文件 34

Bootstrap 我们来谈谈 CSS…

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

避免 JSP 粥 HTML Javascript CSS Taglibs JSP 文件

表单字段：无自定义标记 JSP <div class="control-group" id="${last. Name}"> <label class="control-label">${last. Name. Label}</label> <div class="controls"> <form: input path="${name}"/> <span class="help-inline"> <form: errors path="${name}"/> </span> </div> CSS div 标签 表单输入 错误消息（如果有）

使用自定义标记 • 先创建一个标记（或 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> input. Field. tag

使用自定义标记 • 自定义标记调用 包含自定义标记的 文件夹 <html xmlns: custom="urn: jsptagdir: /WEB-INF/tags/html" …> … <custom: input. Field name="first. Name" label="Enter your first name: " /> <custom: input. Field name="last. Name" label="Enter your last name: " /> </html> JSP 文件 JSP 不再是 JSP 粥！ 1 行代码， 而不是 9 行！

总结 • 考虑对静态文件使用 Web. Jars – http: //www. webjars. org/ • 将 Spring MVC 与 j. Query 集成很简单 – 考虑使用 Data. Tables 4 J – http: //datatables 4 j. github. com/docs/ – Bootstrap 酷毙了！ – JSP 自定义标记可助您一臂之力 47