基于spring来检测访问Web页面的设备是很简单的,在这个经验中我们讲到过。通常不同的设备访问我们是通过响应式设计来统一处理各种设备的尺寸的。但是如果希望针对不同的设备,显示不同的内容呢? Spring对于这一点同样提供了很好的支持,来看看如何实现。
准备工作
我们通过一个简单的例子来演示,基于Spring MVC来实现一个简单的HTTP GET请求,访问的地址是:
http://localhost:8080/greeting
- 如果从桌面浏览器访问这个地址,则返回的页面中显示:
Say hello from desktop
- 如果从手机浏览器访问这个地址:则返回的页面中显示
Say hello from mobile
- 如果从平板电脑访问这个地址:则返回的页面中显示
Say hello from tablets
先该准备好开发环境:
- IDE+Java环境(JDK 1.7或以上版本)
- Maven 3.0+(Eclipse和Idea IntelliJ内置,如果使用IDE并且不使用命令行工具可以不安装)
Maven POM文件的设置
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.tianmaying.mobilecontent</groupId>
<artifactId>content-for-multiple-device</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>content-for-multiple-device</name>
<description>Demo of serving different content for desktop, mobile and tablet device</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.2.5.RELEASE</version>
<relativePath/>
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mobile</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
创建Properties文件
Spring Boot能够针对不同设备渲染不同的视图(View),只需要在应用的Properties文件中中稍加配置即可。在src/main/resources/application.properties文件(没有这个文件,则自己创建这个文件)中增加一行:
spring.mobile.devicedelegatingviewresolver.enabled: true
针对一个请求,LiteDeviceDelegatingViewResolver
通过DeviceResolverHandlerInterceptor
识别出的Device
类型来判断返回哪种视图进行响应(桌面、手机还是平板),这一部分大家参考Spring如何识别设备的经验。
在这个例子中, LiteDeviceDelegatingViewResolver
会将请求代理给ThymeleafViewResolver
,作为Spring自身提供的正牌ViewResolver
,相比传统的视图技术如JSP,Velocity等,有不少过人之处,大家可以回顾一下Thymeleaf的介绍以及如何在Spring MVC中使用Thymeleaf。默认情况下,Spring Boot去到**mobile/和tablet/**文件下去寻找移动端和平板端对应的视图进行渲染。当然你也可以在属性文件中进行设置,约定大于配置,没有特别需求用约定就好了。
创建Controller
Spring Boot的请求都是通过Controller的处理的。Controller的实现非常简单:
- 通过
@Controller
标注一个普通的类 - 通过
@RequestMapping
标注一个方法,设置该方法响应的URL地址和方法( 如@RequestMapping(method=GET
) - 在方法中填入Model,返回视图的名称
SayHelloController
package com.tianmaying.mobilecontent;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class SayHelloController {
@RequestMapping("/sayHello")
public String greeting() {
return "sayHello";
}
}
创建视图
最后让我们来创建Thymeleaf的视图模板,这里没什么模型的数据需要填充,只需要显示一句话即可:
sayHello.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'Say hello from desktop'" />
</body>
</html>
接下来我们创建存放移动端模板和平板端模板的目录:
└── src
└── main
└── resources
└── templates
└── greeting.html
└── mobile
└── greeting.html
└── tablet
└── greeting.html
在mobile和tablet目录下的HTML文件,内容大多是一样的,唯一不同的就是<p>
标签,分别为:
<p th:text="'Say hello from mobile'" />
<p th:text="'Say hello from tablet'" />
测试
最后我们通过main()
函数将这个SpringBootApplication
Run起来:
App.Java
package com.tianmaying.mobilecontent;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}
大家从不同的设备上访问http://localhost:8080/sayHello就能看到效果了。
相关推荐
页面使用响应式框架:Materialize(前台)和Layui(后台),支持电脑、平板、手机等所有主流设备访问。 技术栈 前端主要技术栈 CSS框架:Materialize(前台)、Layui(后台) JS框架:Vue(前台
同时,系统还支持设备的预约和申请功能,帮助管理者更好地安排设备的使用时间和资源分配。 系统的后端采用SSM框架,这是一个流行的Java Web开发框架组合。Spring框架提供了IoC(控制反转)和AOP(面向切面编程)等...
功能 用户管理:支持用户注册、登录、修改密码等操作;...响应式布局:使用Bootstrap框架实现响应式布局,适配不同设备,提高用户体验; 日志管理:使用Log4j框架记录系统日志,方便开发者查找问题和优化系统;
总之,这个基于Spring Boot的智能家居系统是一个利用现代Java技术和开发最佳实践构建的系统,它提供了一套完整的解决方案,以满足现代家庭对于智能化、自动化和高效能源管理的需求。通过这个系统,用户可以方便地...
同时,系统还支持设备的预约和申请功能,帮助管理者更好地安排设备的使用时间和资源分配。 系统的后端采用SSM框架,这是一个流行的Java Web开发框架组合。Spring框架提供了IoC(控制反转)和AOP(面向切面编程)等...
设备管理:系统提供了设备的添加、删除、修改等基本操作,同时支持设备的分类管理,方便用户对设备进行统一管理。 故障报修:用户可以通过系统提交设备故障报修申请,填写故障描述、上传故障图片等信息,同时支持...
基于Spring Boot的医药管理系统是一个针对药店或药房管理药品、销售、库存及客户信息的综合应用程序。该系统利用了Java开发平台,特别是Spring Boot框架,以及MySQL作为后端数据库,以实现快速开发和易于部署的...
系统功能: 这套工厂车间管理系统可能包括了生产计划管理、设备监控、员工排班、库存管理、质量控制、报表统计等模块,以帮助提高生产效率、减少浪费、确保产品质量,并提供数据分析支持决策。数据库: 系统可能使用...
基于Spring Boot框架开发的景区民宿预约系统是一个现代化的、高效的在线预订平台,旨在为游客提供便捷的民宿查找、预定和支付服务。这个系统针对旅游景区的住宿需求进行了专门设计,集成了多项功能以提升用户体验和...
基于SSM(Spring+SpringMVC+MyBatis)和Vue.js的远程家庭健康监测系统是一个集成了多种技术的医疗信息化系统,旨在帮助用户实现远程健康监测和管理。该系统主要由以下模块组成: 用户管理模块:包括用户的注册、登录...
其中使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持,Spring做管理,管理Struts和Hibernate。 WebStorage HTML新增的本地存储解决...
前端页面使用HTML、CSS和JavaScript技术,具有响应式设计,适应不同尺寸的设备。页面包括登录、注册、赛事管理、评分管理、成绩查询等功能。同时,还支持Excel文件上传和下载,方便用户批量导入和导出数据。 后端...
江苏融汇房地产营销策划有限公司宣传网站是一个基于Java的Web应用程序,采用SSM(Spring + Spring MVC + MyBatis)框架来实现后端逻辑,并结合Vue.js技术构建前端页面,旨在为该公司提供一个专业、直观的在线宣传...
2. 前端:采用HTML、CSS和JavaScript进行页面布局和交互设计,使用Bootstrap框架实现响应式布局,使系统在不同设备上都能正常显示。 3. 服务器:使用Tomcat作为Web服务器,部署项目并提供访问服务。 4. 安全:使用...
《基于Spring Boot的线上阅读系统》是一个旨在提供便捷的在线阅读体验的创新项目。该系统采用了现代化的Spring Boot后端框架,致力于为用户提供丰富的数字图书馆和个性化阅读服务。 该系统的主要目标是打破时间和...
9. **响应式设计**:支持在不同设备上访问,如电脑、平板和手机等,提供一致的用户体验。 通过这个系统,用户可以便捷地创建和管理个人博客,分享知识、经验和见解。同时,多用户的功能让不同的用户在平台上拥有...
本项目是一个基于SSM(Spring, SpringMVC, MyBatis)框架开发的客户关系管理系统,旨在为企业提供全面、高效、便捷的客户管理解决方案。系统前端采用了响应式设计,确保在各种设备上的良好展示;后端则利用Java的...
该资源是一个基于Spring Boot和MySQL的党员教育和管理系统的完整源代码,压缩包格式。该系统采用了当前流行的Java Web开发技术,结合了Spring Boot框架和MySQL数据库,为党员教育和管理工作提供了一个高效、便捷的...
前端系统支持响应式设计,能够适配各种屏幕大小,保证用户无论在电脑还是移动设备上均有良好的使用体验。使用Vue Router进行页面路由处理,Vuex进行状态管理,提高了项目的维护性和模块化程度。 2.2 后端模块 后端...
- 提供了代码生成器,只需编写30%左右代码,其余的代码交给系统自动生成,可快速完成开发任务 - 后台系统支持MySQL、Oracle、SQL Server、PostgreSQL等主流数据库,客户端系统仅支持MySQL **具有如下特点** -...