使用 Bootstrap 和 Spring MVC 实现响应式 Web 设计 已翻译 100%

简介

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

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

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

响应式Web设计

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

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

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

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

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

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

Spring MVC和Twitter Bootstrap

整体的数据流如下图所示。（图丢了！！！）

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

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

$('#searchResults').click(function(){
var origin =  $("#origin option:selected").val();
var destination = $("#destination option:selected").val();
var startDate= $("#startDate").val();
var endDate = $("#endDate").val();

$.get("resources/datatemplates/flightList.html", function (template){
$.get("/air/searchResultsJson?leavingFrom=" + origin + "&goingTo=" + destination + "&startDate=" + startDate + "&endDate=" + endDate, function (data){
$("#dataRegion").html("");
$.tmpl(template, data).appendTo("#dataRegion");
});
});
return false;
}

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

<tr>
<td>${startTime}</td>
<td>${startAirport}</td>
<td>${endTime}</td>
<td><a href="#" onclick="return getDetails('${endAirport}')">${endAirport}</a></td>
</tr>

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

@RequestMapping(value = "searchResultsJson", method = RequestMethod.GET)
public @ResponseBody
List searchResultsJson(@RequestParam String leavingFrom,
@RequestParam String goingTo, @RequestParam String startDate,
@RequestParam String endDate) {
Form form = new Form();

form.setOrigin(leavingFrom);
form.setDestination(goingTo);
form.setStartDate(startDate);
form.setReturnDate(endDate);

return locationService.selectFlights(form);
}

结论

我在本博文中演示了如何创建能够适应并运行于任何设备之上的Web应用。另外还展示了从基于Spring MVC的web应用中返回JSon响应的方法。

我希望该文能够帮到你。