使用Spring Boot开发一个Spring Mobile程序

1. 概述

Spring Mobile是一个基于Spring Web MVC框架扩展的一个针对不同移动终端的应用开发框架。通过它我们在适配不同终端方面，就不用费劲心思了。

在本文中，我们就来学习下Spring Mobile这个框架。

2.  Spring Mobile的主要功能

• 自动设备检测:  Spring Mobile在 server端内置了一个设备解析器的抽象层。它会分析所有过来的请求，然后侦测到设备信息，比如，设备的类型，操作系统等等。
  

• 网站偏好管理：使用网站偏好管理，Spring Mobile允许用户选择移动/平板电脑/网站的视图。 这是比较不赞成的技术，因为通过使用DeviceDelegatingViewresolver，我们可以根据设备类型跳转到对应的视图层，而不需要来自用户端的任何输入。
  

• 站点切换器：站点切换器能够根据用户的设备类型（比如：手机，平板，浏览器等等）将用户自动切换到最合适的视图。
  

• 设备感知视图管理器：通常，根据设备类型，我们将用户请求转发到特定站点，以处理特定设备。 Spring Mobile的View Manager使开发人员能够灵活地将所有视图以预定义的格式显示出来，Spring Mobile将根据设备类型自动管理不同的视图。

  
  

3. 上代码

让我们使用Spring Boot来创建一个Spring Mobile程序吧，前端我们使用Freemarker模板引擎，基本功能就是服务端捕获到设备信息。

3.1. Maven 依赖

加个spring-mobile-device依赖：

<dependency>
    <groupId>org.springframework.mobile</groupId>
    <artifactId>spring-mobile-device</artifactId>
</dependency>

3.2. 创建 Freemarker 模板

首先，使用Freemarker创建一个index页面。不要忘记把Freemarker的依赖也加入pom.xml，然后Freemarker就自动配置好了。

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

由于我们想要侦测到发送设备的信息，然后去路由请求，所以我们就需要单独创建三个独立的Freemarker文件针对不同的设备类型。

在src/main/resources/templates目录下创建两个文夹“mobile”和“tablet”，然后创建对应的Freemarker文件，最后的结构像下面这样：

现在，我们在index.ftl加入以下的HTML：

另外两个index分别把h1改成对应的设备类型。

3.3. 开启 DeviceDelegatingViewresolver

开启 Spring Mobile 的 DeviceDelegatingViewresolver 服务, 只需要在application.properties里加个property就可以了：

站点偏好设置默认是开启的，如果你想关闭的话，可以把下面的值设为false：

3.4. 创建 Controller

现在创建一个Controller来处理过来的请求。直接使用@GetMapping来处理请求:

两个事情需要特别注意：

• 在映射方法中，有个参数是Device。我们通过org.springframework.mobile.device.Device来传递设备信息的，这样的功能是通过DeviceDelegatingViewresolver来搞定的，就是我们在prpperties文件中加了那个配置后就启动开启了。
  

• 另外Device这个类还有两个内置方法 isMobile(), isTablet()，还有一个方法getDevicePlatform()。使用这些方法我们就可以捕获到所有的设备信息，然后根据这些做接下来的事情。
  

3.5. Java Config

Spring Boot启动类：

4. 见证奇迹的时刻

启动我们的main函数。

这里我们使用Chrome的开发者Console工具来模拟不同类型的设备。

快捷键：ctrl + shift + i 或  F12

默认情况下，如果我们访问localhost:8080，那么Spring Web会侦测到我们的设备是浏览器。结果如下：

现在，我们打开chrome浏览器的console面板开始表演吧，点击一下顶部的第二个那个图标，现在浏览器已经变成了一个手机的样子。

左边的顶部有个下拉选择菜单，Responsive。我们可以选择不同型号的手机来模拟不同的设备。

这里我们就选择iPhone 6 Plus来模拟吧。

现在我们刷新一下，这时候我们页面变成了下面这样：

发现页面内容已经变成了mobile的页面。这就是因为DeviceDelegatingViewresolver已经检测到了我们的这次请求是来自一个移动设备。而且在我们的服务端还打印出来了操作系统的信息：

同样的，我们现在模拟一个平板电脑，选择iPad，结果如下：

现在，我们将看看“网站偏好设置”功能是否按预期工作。

要模拟用户想要以移动友好方式查看网站的实时场景，只需在默认网址末尾添加以下网址参数即可：

 ?site_preference=mobile

一旦刷新，视图应该自动移动到移动视图，即下面的文本将显示到mobile版本界面：

以模拟平板电脑偏好的相同方式，只需在默认网址末尾添加以下网址参数即可：

 ?site_preference=tablet

就像上次一样，视图应该自动刷新到平板电脑视图：

请注意，默认网址将保持不变，如果用户再次通过默认网址，用户将被重定向到基于设备类型的相应视图。

5. 总结

我们刚刚创建了一个Web应用程序并实现了跨平台功能。 从生产率的角度来看，这是一个巨大的性能提升。 Spring Mobile消除了许多前端脚本来处理跨浏览器行为，从而缩短了开发时间。