知識庫 / Spring RSS 訂閱

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

3.2. 創建 Freemarker 模板

首先，讓我們使用 Freemarker 創建我們的索引頁面。請務必添加必要的依賴項以啓用 Freemarker 的自動配置。

由於我們試圖檢測發送者的設備並相應地路由請求，因此我們需要創建三個單獨的 Freemarker 文件來解決這個問題：一個用於處理移動請求，另一個用於處理平板電腦請求，最後一個（默認）用於處理普通瀏覽器請求。

我們需要在 src/main/resources/templates 目錄下創建兩個名為 <em >mobile</em > 和 <em >tablet</em > 的文件夾，並將 Freemarker 文件放入其中。最終結構應如下所示：

└── src
    └── main
        └── resources
            └── templates
                └── index.ftl
                └── mobile
                    └── index.ftl
                └── tablet
                    └── index.ftl

現在，讓我們將以下 HTML 放在 index.ftl 文件中：

<h1>You are into browser version</h1>

根據設備類型，我們會在 <h1> 標籤內的內容進行更改。

3.3. 啓用 DeviceDelegatingViewresolver 服務

為了啓用 Spring Mobile 的 DeviceDelegatingViewresolver 服務，我們需要將以下屬性放入 application.properties 文件中：

spring.mobile.devicedelegatingviewresolver.enabled: true

<div>
 <p>站點偏好功能默認情況下在您包含 Spring Mobile starter 時啓用。但是，可以通過將以下屬性設置為 false 來禁用它：</p>
</div>

spring.mobile.sitepreference.enabled: true

<div>
  <h1>Introduction</h1>
  <p>This document provides an overview of the new API. It covers the key features, usage examples, and troubleshooting tips.</p>
  <h2>Key Features</h2>
  <ul>
    <li><strong>Authentication:</strong> Supports OAuth 2.0</li>
    <li><strong>Data Storage:</strong> Uses a NoSQL database</li>
    <li><strong>API Versioning:</strong> Implements semantic versioning</li>
  </ul>
  <pre>
    <code>
      function calculateSum(a, b) {
        return a + b;
      }
    </code>
  </pre>
  <p>To use the API, you'll need to obtain an API key.  Please refer to the <a href="https://example.com/docs/api-key">API Key Documentation</a> for more details.</p>
  <h2>Troubleshooting</h2>
  <h3>Common Issues</h3>
  <ol>
    <li><strong>Connection Errors:</strong> Check your network connection.</li>
    <li><strong>Authentication Errors:</strong> Verify your API key is valid.</li>
  </ol>
</div>

3.4. 添加 Freemarker 屬性

為了使 Spring Boot 能夠找到並渲染我們的模板，我們需要將以下內容添加到我們的 <em >application.properties</em >> 中：

spring.freemarker.template-loader-path: classpath:/templates
spring.freemarker.suffix: .ftl

3.5. 創建控制器

現在我們需要創建一個 Controller 類來處理傳入的請求。我們將使用簡單的 @GetMapping 註解來處理請求：

@Controller
public class IndexController {

    @GetMapping("/")
    public String greeting(Device device) {
		
        String deviceType = "browser";
        String platform = "browser";
        String viewName = "index";
		
        if (device.isNormal()) {
            deviceType = "browser";
        } else if (device.isMobile()) {
            deviceType = "mobile";
            viewName = "mobile/index";
        } else if (device.isTablet()) {
            deviceType = "tablet";
            viewName = "tablet/index";
        }
        
        platform = device.getDevicePlatform().name();
        
        if (platform.equalsIgnoreCase("UNKNOWN")) {
            platform = "browser";
        }
     	
        return viewName;
    }
}

以下是一些需要注意的事項：

• 在handler mapping方法中，我們傳遞了 org.springframework.mobile.device.Device。這是與每個請求關聯的注入設備信息。這由 DeviceDelegatingViewresolver 負責，該配置已在 apllication.properties 中啓用。
• org.springframework.mobile.device.Device 包含一些內置方法，例如 isMobile(), isTablet(), getDevicePlatform() 等。通過使用這些方法，我們可以捕獲所需的所有設備信息並使用它們。

3.6. Java 配置

為了在 Spring Web 應用程序中啓用設備檢測，我們需要添加一些配置：

@Configuration
public class AppConfig implements WebMvcConfigurer {

    @Bean
    public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor() { 
        return new DeviceResolverHandlerInterceptor(); 
    }

    @Bean
    public DeviceHandlerMethodArgumentResolver deviceHandlerMethodArgumentResolver() { 
        return new DeviceHandlerMethodArgumentResolver(); 
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) { 
        registry.addInterceptor(deviceResolverHandlerInterceptor()); 
    }

    @Override
    public void addArgumentResolvers(List<HandlerMethodArgumentResolver> argumentResolvers) {
        argumentResolvers.add(deviceHandlerMethodArgumentResolver()); 
    }
}

我們已經快完成了。最後一步是創建一個 Spring Boot 配置類，以啓動應用程序：

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

4. 測試應用程序

啓動應用程序後，它將在 http://localhost:8080 上運行。

我們將使用 Google Chrome 開發者控制枱 來模擬不同類型的設備。可以通過按下 ctrl + shift + i 或按下 F12 啓用它。

默認情況下，如果打開主頁，我們可以看到 Spring Web 檢測到設備是桌面瀏覽器。 預期結果如下：

現在，在控制枱面板上，點擊頂部左側的第二個圖標。 這將啓用瀏覽器的移動視圖。

我們可以看到瀏覽器頂部左角出現一個下拉菜單。 在下拉菜單中，可以選擇不同類型的設備類型。 要模擬移動設備，請從下拉菜單中選擇 Nexus 6P 並刷新頁面。

刷新頁面後，我們會注意到頁面的 內容已更改，因為 DeviceDelegatingViewresolver 已經檢測到上一個請求來自移動設備。因此，它將模板中的 mobile 文件夾內的 index.ftl 文件傳遞給它。

結果如下：

同樣，我們將模擬平板電腦版本。 像上次一樣，從下拉菜單中選擇 iPad 並刷新頁面。 內容將更改，並且應該被視為平板電腦視圖：

現在，我們將檢查 Site Preference 功能是否按預期工作。

要模擬用户以移動友好方式查看網站的實時場景，請在默認 URL 的末尾添加以下 URL 參數：

?site_preference=mobile

刷新後，視圖應自動切換到移動視圖，即“您正在使用移動版本”的文本將被顯示。

同樣，為了模擬平板設備偏好，只需在默認 URL 的末尾添加以下 URL 參數：

?site_preference=tablet

與上次類似，視圖應自動刷新為平板視圖。

請注意，默認 URL 將保持不變，如果用户再次通過默認 URL 訪問，則用户將被重定向到根據設備類型對應的視圖。

5. 結論

我們已經創建了一個Web應用程序並實現了跨平台功能。從生產力角度來看，它具有顯著的性能提升。<strong>Spring Mobile 通過消除大量的前端腳本來處理跨瀏覽器行為，從而減少了開發時間。</strong>