使用 Bootstrap 和 Spring MVC 实现响应式 Web 设计-优快云博客

响应式Web设计是一种创建Web应用程序的新方法。一旦采用响应式Web设计创建出应用程序，那么该Web应用程序将能轻而易举地运行于包括移动和手持设备在内的任意设备之上。Twitter公司开源了他们的Twitter Bootstrap框架，该框架支持响应式Web设计（Responsive Web Design，简称RWD）。Kickstrap是Twitter Bootstrap的一个变种。我将在本博文中演示，如何创建一个基于Spring MVC的应用，该应用采用jquery-tmpl创建了基于RWD的JSON。

我们将要涉及的用例（use case）是一个简单的航班订票系统。在该系统中给定始发地、目的地、始发和到达日期，将返回所有航班。当选定某一航班后，将在目标位置列出所有的交易。

着急的人可以先到 @ Github上获得代码和步骤。

fbm
翻译于 1年前

1人顶

顶翻译的不错哦!

响应式Web设计

有三个关键的技术特性，是响应式Web设计的核心：

灵活的基于网格的布局：在移动设备上查看页面时，如果设备的朝向从横向改为竖向时，页面布局会自动地调整并在新布局中展开内容进行显示，这就是灵活的基于网格的布局。在Twitter Bootstrap中，可以使用如下的CSS标签（tag）来实现：

`1`	`<div class="row-fluid"><!-- put some HTML stuff --></div>`

灵活的图像：动态调整图像的尺寸

媒介查询：这个是CSS3的特性，该特性可以通过查询媒介设备将适当的CSS返回给浏览器。使用到的HTML标签如下例所示：

 
          1<!-- for iPad, this is how the media query looks like -->
 
          2 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
 
          3 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

fbm
翻译于 1年前

0人顶

顶翻译的不错哦!

Spring MVC和Twitter Bootstrap

整体的数据流如下图所示。

使用Spring MVC和Twitter Bootstrap进行响应式Web设计

在这个例子中，我们采用Twitter Bootstrap和JQuery-tmpl创建了一个单页Web站点。在前端，数据是用以下的方式提交的：

 
          01 $('#searchResults').click(function(){ 
 
          02 var origin =&nbsp; $("#origin option:selected").val(); 
 
          03 var destination = $("#destination option:selected").val(); 
 
          04 var startDate= $("#startDate").val(); 
 
          05 var endDate = $("#endDate").val(); 
 
          06 
 
          07 $.get("resources/datatemplates/flightList.html", function (template){ 
 
          08 $.get("/air/searchResultsJson?leavingFrom=" + origin + "&goingTo=" + destination + "&startDate="+ startDate + "&endDate=" + endDate, function (data){ 
 
          09 $("#dataRegion").html(""); 
 
          10 $.tmpl(template, data).appendTo("#dataRegion"); 
 
          11});
 
          12});
 
          13 return false; 
 
          14}

这里执行了JQuery，获得了以JSon对象形式存储的航班列表。

JQuery-tmpl插件用来绑定flightList.html，从而实现单页面Web站点设计。flightList.html文件内容如下所示：

 
          1 <tr> 
 
          2 <td>${startTime}</td> 
 
          3 <td>${startAirport}</td> 
 
          4 <td>${endTime}</td> 
 
          5 <td><a href="#" onclick="return getDetails('${endAirport}')">${endAirport}</a></td> 
 
          6 </tr>

在 Spring MVC侧，需要添加Maven依赖并调用相关方法，可从该链接获得更详细的讲解。

控制器（controller）的代码如下所示：

 
          01 @RequestMapping(value = "searchResultsJson", method = RequestMethod.GET) 
 
          02 public @ResponseBody 
 
          03 List searchResultsJson(@RequestParam String leavingFrom, 
 
          04 @RequestParam String goingTo, @RequestParam String startDate, 
 
          05 @RequestParam String endDate) { 
 
          06 Form form = new Form(); 
 
          07 
 
          08form.setOrigin(leavingFrom);
 
          09form.setDestination(goingTo);
 
          10form.setStartDate(startDate);
 
          11form.setReturnDate(endDate);
 
          12 
 
          13 return locationService.selectFlights(form); 
 
          14}