查看原文
其他

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

贺卓凡 ImportSource 2019-07-13

1. 概述


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

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


2.  Spring Mobile的主要功能


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

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

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

  • 设备感知视图管理器:通常,根据设备类型,我们将用户请求转发到特定站点,以处理特定设备。 Spring MobileView 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消除了许多前端脚本来处理跨浏览器行为,从而缩短了开发时间。


    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存