集成 Spring @MVC 与 jQuery 和 Bootstrap - PowerPoint PPT Presentation

spring @mvc jquery bootstrap n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
集成 Spring @MVC 与 jQuery 和 Bootstrap PowerPoint Presentation
Download Presentation
集成 Spring @MVC 与 jQuery 和 Bootstrap

play fullscreen
1 / 48
集成 Spring @MVC 与 jQuery 和 Bootstrap
650 Views
Download Presentation
dobry
Download Presentation

集成 Spring @MVC 与 jQuery 和 Bootstrap

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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. 谢谢!