1 / 48

集成 Spring @MVC 与 jQuery 和 Bootstrap

集成 Spring @MVC 与 jQuery 和 Bootstrap. Michael Isvy. Michael Isvy. 培训师兼资深顾问 2008 年加入 SpringSource 曾在 20 多个国家和地区教授 Spring Core-Spring 、 Spring MVC 、 Spring 与 JPA/Hibernate 、 Apache Tomcat… blog.springsource.com 上的活跃博主. 历史. 2004. Spring 1.0. ….

dobry
Download Presentation

集成 Spring @MVC 与 jQuery 和 Bootstrap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 集成 Spring @MVC 与 jQuery 和 Bootstrap Michael Isvy

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

  3. 历史 2004 Spring 1.0 … 创立 SpringSource （原名称 Interface21） 设立法国分公司 2008 Spring 1.0?? 我 VMware 收购SpringSource 2009 2012 Vmware 推出众多新产品：CloudFoundry、GemFire、RabbitMQ … 3

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

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

  6. 常见Spring MVC 最佳实践

  7. 为什么选择 Spring MVC？ 因为简单，很多人喜欢它

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

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

  10. 如何使用 Spring MVC？ @Controller publicclassUserController { @RequestMapping(value="/users/", method=RequestMethod.POST) public ModelAndView createUser(User user) { //... } } publicclassUserController extendsSimpleFormController { public ModelAndView onSubmit(Object command) { //... } } 已过时!! 哪种方式更恰当？

  11. 通过 Spring MVC 验证 classDiningValidator extendsValidator { publicvoidvalidate(Object target, Errors errors) { if((DiningForm)target) .merchantNumber.matches("[1-9][0-9]*") ) errors.rejectValue("merchantNumber", "numberExpected"); } } 非首选方式！ 程序验证？

  12. 通过 Spring MVC 验证 importjavax.validation.constraints.*; public classDining { @Pattern(regexp="\\d{16}") privateString creditCardNumber; @Min(0) privateBigDecimal monetaryAmount; @NotNull privateDate date; } POJO Bean 验证 (JSR 303) 注释

  13. 通过 Spring MVC 验证 importjavax.validation.Valid; … @Controller publicclassUserController { @RequestMapping("/user") publicString update(@ValidUser user, BindingResult result) { if (result.hasErrors()) { return "rewards/edit"; } // continue on success... } } 控制器 Bean 验证 (JSR 303)

  14. 表示层 <c:urlvalue="/user.htm"var="formUrl"/> <form:formmodelAttribute="user"action="${formUrl}"> <labelclass="control-label">Enter your first name:</label> <form:inputpath="firstName"/> <form:errorspath="firstName"/> ... <buttontype="submit">Save changes</button> </form:form> JSP 表单标记库

  15. JSP 最佳实践！！

  16. 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:outvalue="${user.firstName}"/></td> <td><c:outvalue="${user.lastName}"/></td> </tr> 3 不错！

  17. Jar 文件最佳实践 Webjars 简介

  18. 它好用吗？ 版本号!!!

  19. 最佳实践 <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 或 Gradle 管理版本号

  20. 版本号？ <linkhref="/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！

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

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

  23. 使用 Webjars <dependency> <groupId>org.webjars</groupId> <artifactId>jquery-ui</artifactId> <version>1.9.1</version> </dependency> <mvc:resourcesmapping="/webjars/**"location="classpath:/META-INF/resources/webjars/"/> <link rel="stylesheet"href="/webjars/jquery-ui/1.9.1/js/jquery-ui-1.9.1.custom.js"> . js 文件在 jar 文件内！ pom.xml 内部 Spring 配置 JSP 内部

  24. 添加 jQuery

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

  26. 为什么选择 jQuery？

  27. Jquery 用户界面

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

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

  30. jqueryui 日期选择器 <script> $( "#startDate").datepicker({ dateFormat: "yy-m-dd"}); $( "#endDate").datepicker({ dateFormat: "yy-m-dd"}); </script> … <form:inputpath="startDate"/> <form:inputpath="endDate"/> JSP 文件

  31. 添加 jQuery 数据表

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

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

  34. Spring MVC 中的数据表 <datatables:tabledata="${userList}"id="dataTable"row="user"> <datatables:columntitle="First Name" property="firstName"sortable="true"/> <datatables:columntitle="Last Name" property="lastName"sortable="true"/> </datatables:table> JSP 文件 JSP 文件内部

  35. Bootstrap 我们来谈谈 CSS…

  36. 为什么选择 Bootstrap？ 我们来谈谈 Bootstrap！ 网页设计师从此不再哭泣，泪水成往事！

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

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

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

  40. JSP 文件 避免 JSP 粥 HTML Javascript CSS Taglibs

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

  42. JSP 自定义标记 • 您驾驭 JSP 的最佳帮手！ • 轻松将100 行代码转换为10 行代码！

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

  44. 表单字段：无自定义标记 <divclass="control-group"id="${lastName}"> <labelclass="control-label">${lastNameLabel}</label> <divclass="controls"> <form:inputpath="${name}"/> <spanclass="help-inline"> <form:errorspath="${name}"/> </span> </div> </div> CSS div 标签 表单输入 错误消息（如果有） JSP

  45. 使用自定义标记 <%@taglibprefix="form"uri="http://www.spring…org/tags/form"%> <%@attributename="name"required="true"rtexprvalue="true"%> <%@attributename="label"required="true"rtexprvalue="true"%> <divclass="control-group"id="${name}"> <labelclass="control-label">${label}</label> <divclass="controls"> <form:inputpath="${name}"/> <spanclass="help-inline"> <form:errorspath="${name}"/> </span> </div> </div> inputField.tag • 先创建一个标记（或 tagx）文件

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

  47. 总结 • 考虑对静态文件使用 WebJars • http://www.webjars.org/ • 将 Spring MVC 与 jQuery 集成很简单 • 考虑使用 DataTables4J • http://datatables4j.github.com/docs/ • Bootstrap 酷毙了！ • JSP 自定义标记可助您一臂之力

  48. 谢谢！

More Related