SpringBoot整合Spring Mobile框架实现终端页面的分离

前言

做了一款基于WEB端的系统，又想着可以在手机上打开；即使做了页面样式和自动缩放的兼容，但是在手机巴掌大的地方，依旧拥挤不堪，页面上元素多一点，就惨不忍睹，无法入眼。无意中看到有Spring Mobile这么一个框架，这个框架到底是用来干什么的呢，忍不住了解了一下。

Spring Mobile 简介，来自官方的介绍
Spring Mobile是一个框架，它提供了检测向您的Spring web站点发出请求的设备类型的功能，并提供基于该设备的替代视图。与所有Spring项目一样，Spring Mobile的真正强大之处在于它可以很容易地进行扩展。

通过这个介绍，可以了解到Spring Mobile是检测终端设备类型的框架，根据终端类型匹配到具体的页面，和Spring其他框架一样，容易扩展，插拔式的，接下来就看看这款框架在SpringBoot中如何使用的，由于这款框架已停止更新，所以整合SpringBoot的demo在网上几乎找不到。

首先，在pom中引入SpringBoot整合Spring Mobile的架包；这个demo用到了web和thymeleaf框架，顺带一起引入。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- SpringBoot与Spring mobile框架的整合 -->
<dependency>
     <groupId>org.springframework.mobile</groupId>
    <artifactId>spring-mobile-starter</artifactId>
     <version>2.0.0.M3</version>
    <type>pom</type>
</dependency>

只引入SpringBoot整合Spring Mobile的这一个架包还不够，还需要引入repository，不然会报错，这里使用的是SpringBoot2.1.5;

<repositories>
        <repository>
            <id>spring-milestones</id>
            <name>Spring Milestones</name>
            <url>https://repo.spring.io/libs-milestone</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

第二步，测试代码，通过不同终端的调用，判断终端的类型；

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.mobile.device.Device;
import org.springframework.mobile.device.site.SitePreference;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * 判断终端设备
 * @author 程就人生
 * @Date 2020年5月13日上午11:40:29
 */
@RestController
@RequestMapping("/index")
public class IndexController {

    private static final Logger logger = LoggerFactory.getLogger(IndexController.class);

    /**
     * 使用device判断请求的终端类型
     * @param device
     */
    @RequestMapping
    public void index(Device device) {
        //手机
        if (device.isMobile()) {
            logger.info("Hello mobile user!");
        } else if (device.isTablet()) {
            //平板
            logger.info("Hello tablet user!");
        } else {
            //PC
            logger.info("Hello desktop user!");
        }
    }
    
    /**
     * 使用SitePreference判断请求的终端类型
     * @param sitePreference
     */
    @RequestMapping("/test")
    public void home(SitePreference sitePreference) {
        //手机
        if (sitePreference == SitePreference.MOBILE) {
            logger.info("Site preference is mobile");
        } else if (sitePreference == SitePreference.TABLET) {
            //平板
            logger.info("Site preference is tablet");
        } else {
            //其他
            logger.info("no site preference");
        }
    }

}

这里在Controller层，增加了Device接口或SitePreference枚举类来判断终端的类型；

第三步，测试，使用手机或浏览器输入url地址，查看日志打印的类型；
PC浏览器输入：http://localhost:8080/index
手机使用的是WiFi，使用微信或浏览器，输入：http://192.168.10.6:8080/index

测试结果图

第一个输出，是使用PC端浏览器输入的，第二个是在微信里打开的，第三个是用手机浏览器打开的。

如果每个页面对请求的终端都这样判断，在Controller层里需要修改的代码也是相当多的，有没有办法，统一设置，根据文件夹区分一下跳转的页面？答案是可以的，下面就来看看怎么做？

第四步，在配置文件里加入开启页面跳转的配置；

#根据终端类型，自动跳转到对应的文件夹，Controller层代码无需任何修改；
spring.mobile.devicedelegatingviewresolver.enabled=true

源文件配置文件夹

第五步，增加Controller层代码；

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

/**
 * 自动配置，根据终端类型跳往至对应的页面
 * @author 程就人生
 * @Date
 */
@RestController
public class IndexController2 {

    private static final Logger log = LoggerFactory.getLogger(IndexController2.class);

    /**
     * 使用device判断请求的终端类型
     * @param device
     * @return
     */
    @RequestMapping("/index2")
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView("index");  
        log.info("直接到位到指定的页面！");
        return modelAndView;
    }

}

第六步，增加页面代码；
正常情况下，页面代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>欢迎页面</title>
</head>
<body>
<h5 >电脑访问</h5>
</body>
</html>

手机页面代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>手机访问欢迎页面</title>
</head>
<body>
<h1>手机访问</h1>
</body>
</html>

页面文件结构如图所示

最后，测试；

电脑端的浏览器访问

微信访问

手机浏览器访问

总结
Spring Mobile在2018时就停止更新了，网上关于SpringBoot整合SpringMoblie的例子非常少，今天再回顾时，居然找不到spring-mobile-starter的出处了，又努力了一把，终于把它翻出来了。
spring-mobile-starter引用地址：
https://mvnrepository.com/artifact/org.springframework.mobile
待点开spring-mobile-starter的pom文件时，才发现，这里使用的是spring-mobile-autoconfigure框架，而不是spring-mobile-device的；按照时间来排序，spring-mobile-starter的版本才是最新更新的。

maven引入地址参考

参考资料：
https://spring.io/projects/spring-mobile#overview