扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >如何对SpringBoot一键换肤
  • 566

0
分享到

如何对SpringBoot一键换肤

2024-04-02 19:04:59 566人浏览 独家记忆
摘要

今天就跟大家聊聊有关如何对SpringBoot一键换肤，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。今天和大家聊一聊 ThemeTheme，就是主题

今天就跟大家聊聊有关如何对SpringBoot一键换肤，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

如何对SpringBoot一键换肤

今天和大家聊一聊 Theme

Theme，就是主题，点一下就给网站更换一个主题，相信大家都用过类似功能，这个其实和前面所说的国际化功能很像，代码其实也很像，今天我们就来捋一捋。

考虑到有的小伙伴可能还没用过 Theme，所以这里松哥先来说下用法，然后我们再进行源码分析。

1.一键换肤

来做一个简单的需求，假设我的页面上有三个按钮，点击之后就能一键换肤，像下面这样：

如何对SpringBoot一键换肤

我们来看下这个需求怎么实现。

首先三个按钮分别对应了三个不同的样式，我们先把这三个不同的样式定义出来，分别如下：

blue.CSS：

body{     background-color: #05e1ff; }

green.css：

body{     background-color: #aaff9c; }

red.css：

body{     background-color: #ff0721; }

主题的定义，往往是一组样式，因此我们一般都是在一个 properties 文件中将同一主题的样式配置在一起，这样方便后期加载。

所以接下来我们在 resources 目录下新建 theme 目录，然后在 theme 目录中创建三个文件，内容如下：

blue.properties：

index.body=/css/blue.css

green.properties：

index.body=/css/green.css

red.properties：

index.body=/css/red.css

在不同的 properties 配置文件中引入不同的样式，但是样式定义的 key 都是 index.body，这样方便后期在页面中引入。

接下来在 springMVC 容器中配置三个 Bean，如下：

<mvc:interceptors>     <mvc:interceptor>         <mvc:mapping path="/**"/>         <bean class="org.springframework.WEB.servlet.theme.ThemeChangeInterceptor">             <property name="paramName" value="theme"/>         </bean>     </mvc:interceptor> </mvc:interceptors> <bean id="themeSource" class="org.springframework.ui.context.support.ResourceBundleThemeSource">     <property name="basenamePrefix" value="theme."/> </bean> <bean id="themeResolver" class="org.springframework.web.servlet.theme.SessionThemeResolver">     <property name="defaultThemeName" value="blue"/> </bean>

首先配置拦截器 ThemeChangeInterceptor，这个拦截器用来解析主题参数，参数的 key 为 theme，例如请求地址是  /index?theme=blue，该拦截器就会自动设置系统主题为  blue。当然也可以不配置拦截器，如果不配置的话，就可以单独提供一个修改主题的接口，然后手动修改主题，类似下面这样：

@Autowired private ThemeResolver themeResolver; @RequestMapping(path = "/01/{theme}",method = RequestMethod.GET) public String theme1(@PathVariable("theme") String themeStr, httpservletRequest request, HttpServletResponse response){     themeResolver.setThemeName(request,response, themeStr);     return "redirect:/01"; }

themeStr 就是新的主题名称，将其配置给 themeResolver 即可。

接下来配置 ResourceBundleThemeSource，这个 Bean 主要是为了加载主题文件，需要配置一个 basenamePrefix  属性，如果我们的主题文件放在文件夹中，这个 basenamePrefix 的值就是 文件夹名称.。

接下来配置主题解析器，主题解析器有三种，分别是  CookieThemeResolver、FixedThemeResolver、SessionThemeResolver，这里我们使用的是  SessionThemeResolver，主题信息将被保存在 Session 中，只要 Session  不变，主题就一直有效。这三个主题解析器松哥会在下一小节中和大家仔细分析。

配置完成后，我们再来提供一个测试页面，如下：

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>     <title>Title</title>     <link rel="stylesheet" href="<spring:theme code="index.body" />" > </head> <body> <div>     一键切换主题：<br/>     <a href="/index?theme=blue">托帕蓝</a>     <a href="/index?theme=red">多巴胺红</a>     <a href="/index?theme=green">石竹青</a> </div> <br/> </body> </html>

最关键的是：

<link rel="stylesheet" href="<spring:theme code="index.body" />" >

css 样式不直接写，而是引用我们在 properties 文件中定义的 index.body，这样将根据当前主题加载不同的 css 文件。

最后再提供一个处理器，如下：

@GetMapping(path = "/index") public  String getPage(){     return "index"; }

这个就很简单了，没啥好说的。

最后启动项目进行测试，大家就可以看到我们文章一开始给出的图片了，点击不同的按钮就可以实现背景的切换。

是不是非常 Easy!

2.原理分析

主题这块涉及到的东西主要就是主题解析器，主题解析器和我们前面所说的国际化的解析器非常类似，但是比它更简单，我们一起来分析下。

先来看下 ThemeResolver 接口：

public interface ThemeResolver {  String resolveThemeName(HttpServletRequest request);  void setThemeName(HttpServletRequest request, @Nullable HttpServletResponse response, @Nullable String themeName); }

这个接口中就两个方法：

  • resolveThemeName：从当前请求中解析出主题的名字。

  • setThemeName：设置当前主题。

ThemeResolver 主要有三个实现类，继承关系如下：

如何对SpringBoot一键换肤

接下来我们对这几个实现类来逐个分析。

2.1 CookieThemeResolver

直接上源码吧：

@Override public String resolveThemeName(HttpServletRequest request) {  String themeName = (String) request.getAttribute(THEME_REQUEST_ATTRIBUTE_NAME);  if (themeName != null) {   return themeName;  }  String cookieName = getCookieName();  if (cookieName != null) {   Cookie cookie = WebUtils.getCookie(request, cookieName);   if (cookie != null) {    String value = cookie.getValue();    if (StringUtils.hasText(value)) {     themeName = value;    }   }  }  if (themeName == null) {   themeName = getDefaultThemeName();  }  request.setAttribute(THEME_REQUEST_ATTRIBUTE_NAME, themeName);  return themeName; } @Override public void setThemeName(HttpServletRequest request, @Nullable HttpServletResponse response, @Nullable String themeName) {  if (StringUtils.hasText(themeName)) {   request.setAttribute(THEME_REQUEST_ATTRIBUTE_NAME, themeName);   addCookie(response, themeName);  } else {   request.setAttribute(THEME_REQUEST_ATTRIBUTE_NAME, getDefaultThemeName());   removeCookie(response);  } }

先来看 resolveThemeName 方法：

  • 首先会尝试直接从请求中获取主题名称，如果获取到了，就直接返回。

  • 如果第一步没有获取到主题名称，接下来就尝试从 Cookie 中获取主题名称，Cookie 也是从当前请求中提取，利用 WebUtils  工具进行解析，如果解析到了主题名称，就赋值给 themeName 变量。

  • 如果前面没有获取到主题名称，就使用默认的主题名称，开发者可以自行配置默认的主题名称，如果不配置，就是 theme。

  • 将解析出来的 theme 保存到 request 中，以备后续使用。

再来看 setThemeName 方法：

  • 如果存在 themeName 就进行设置，同时将 themeName 添加到 Cookie 中。

  • 如果不存在 themeName，就设置一个默认的主题名，同时从 response 中移除 Cookie。

可以看到，整个实现思路还是非常简单的。

2.2 AbstractThemeResolver

public abstract class AbstractThemeResolver implements ThemeResolver {  public static final String ORIGINAL_DEFAULT_THEME_NAME = "theme";  private String defaultThemeName = ORIGINAL_DEFAULT_THEME_NAME;  public void setDefaultThemeName(String defaultThemeName) {   this.defaultThemeName = defaultThemeName;  }  public String getDefaultThemeName() {   return this.defaultThemeName;  } }

AbstractThemeResolver 主要提供了配置默认主题的能力。

2.3 FixedThemeResolver

public class FixedThemeResolver extends AbstractThemeResolver {   @Override  public String resolveThemeName(HttpServletRequest request) {   return getDefaultThemeName();  }   @Override  public void setThemeName(    HttpServletRequest request, @Nullable HttpServletResponse response, @Nullable String themeName) {    throw new UnsupportedOperationException("Cannot change theme - use a different theme resolution strategy");  }  }

FixedThemeResolver 就是使用默认的主题名称，并且不允许修改主题。

2.4 SessionThemeResolver

public class SessionThemeResolver extends AbstractThemeResolver {  public static final String THEME_SESSION_ATTRIBUTE_NAME = SessionThemeResolver.class.getName() + ".THEME";  @Override  public String resolveThemeName(HttpServletRequest request) {   String themeName = (String) WebUtils.getSessionAttribute(request, THEME_SESSION_ATTRIBUTE_NAME);   return (themeName != null ? themeName : getDefaultThemeName());  }  @Override  public void setThemeName(    HttpServletRequest request, @Nullable HttpServletResponse response, @Nullable String themeName) {   WebUtils.setSessionAttribute(request, THEME_SESSION_ATTRIBUTE_NAME,     (StringUtils.hasText(themeName) ? themeName : null));  } }

resolveThemeName：从 session 中取出主题名称并返回，如果 session 中的主题名称为 null，就返回默认的主题名称。

setThemeName：将主题配置到请求中。

不想多说，因为很简单。

2.5 ThemeChangeInterceptor

最后我们再来看一看 ThemeChangeInterceptor 拦截器，这个拦截器会自动从请求中提取出主题参数，并设置到请求中，核心部分在  preHandle 方法中：

@Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)   throws ServletException {  String newTheme = request.getParameter(this.paramName);  if (newTheme != null) {   ThemeResolver themeResolver = RequestContextUtils.getThemeResolver(request);   if (themeResolver == null) {    throw new IllegalStateException("No ThemeResolver found: not in a DispatcherServlet request?");   }   themeResolver.setThemeName(request, response, newTheme);  }  return true; }

从请求中提取出 theme 参数，并设置到 themeResolver 中。

看完上述内容，你们对如何对SpringBoot一键换肤有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网node.js频道，感谢大家的支持。

--结束END--

本文标题: 如何对SpringBoot一键换肤

本文链接: https://lsjlt.com/news/81692.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何对SpringBoot一键换肤
    今天就跟大家聊聊有关如何对SpringBoot一键换肤，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。今天和大家聊一聊 ThemeTheme，就是主题...
    99+
    2024-04-02
  • js实现一键换肤效果
    本文实例为大家分享了js实现一键换肤效果的具体代码，供大家参考，具体内容如下 方法1 <!DOCTYPE html> <html lang="en"> &l...
    99+
    2024-04-02
  • Vue如何换肤
    这篇文章主要介绍了Vue如何换肤，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。先看下效果吧。本文主要分三部分：CSS 切换，图标切换和图片切...
    99+
    2024-04-02
  • 如何利用javascript换肤
    前言在网页设计中，换肤是一种常见的功能，可以让用户自由选择网页的颜色和风格，以达到更好的视觉效果和用户体验。我们可以使用 JavaScript 来实现网页的换肤功能，这篇文章将介绍如何使用 JavaScript 来实现网页的换肤功能。步骤一...
    99+
    2023-05-14
  • JS如何实现网站换肤
    这篇文章主要讲解了“JS如何实现网站换肤”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS如何实现网站换肤”吧！先看效果左侧是待选择的图片列表2、点击对应图片自动为当前网站换背景图片3、为当...
    99+
    2023-07-02
  • js如何实现网页换肤
    这篇“js如何实现网页换肤”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js如何实现网页换肤”文章吧。效果：代码：<!...
    99+
    2023-07-02
  • vue如何实现换肤功能
    今天小编给大家分享一下vue如何实现换肤功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先我们用vue-element-...
    99+
    2023-07-04
  • js+css如何实现换肤效果
    本篇内容介绍了“js+css如何实现换肤效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果图如下：需求：点击对应小圆点，下面内容颜色跟着...
    99+
    2023-07-02
  • js如何实现网页换肤功能
    小编给大家分享一下js如何实现网页换肤功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！html<!DOCTYPE&nbs...
    99+
    2024-04-02
  • 详解C#如何实现窗体换肤
    目录实践过程效果代码实践过程 效果 代码 public partial class Form1 : Form { public Form1() { ...
    99+
    2022-12-31
    C#实现窗体换肤 C#窗体换肤 C#窗体
  • 如何用php程序实现网页换肤
    本文操作环境：windows10系统、php 7、thinkpad t480电脑。使用php实现网页换肤效果的步骤及代码如下：准备几张你喜欢的皮肤图片，分别将其命名为01.jpg、02.jpg、03.jpg。创建目录images，将所有皮肤...
    99+
    2022-04-08
    php 网页
  • vue-element如何实现动态换肤存储
    目录需要实现的效果原理总结需要实现的效果 选择颜色块或者颜色选择器切换网站主题色，选择主题后保存到本地，下次打开页面是缓存的主题色 原理 根据ElementUI官网的自定义主...
    99+
    2023-05-17
    vue element element换肤存储 动态换肤存储
  • jQuery中如何基于cookie实现换肤功能
    这篇文章将为大家详细讲解有关jQuery中如何基于cookie实现换肤功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体如下：换肤，在你使用QQ、浏览器、酷狗等软件时...
    99+
    2024-04-02
  • 电脑鼠标箭头如何换皮肤外观
    这篇文章主要介绍“电脑鼠标箭头如何换皮肤外观”，在日常操作中，相信很多人在电脑鼠标箭头如何换皮肤外观问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”电脑鼠标箭头如何换皮肤外观”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-07-02
  • vue项目实现一键网站换肤效果实例(webpack-theme-color-replacer的使用)
    目录前言CSS样式覆盖 - 最简单粗暴的力工做法LESS、SCSS变量覆盖 - 学会使用工具的做法CSS变量 - 新款工具的做法webpack-theme-color-replac&...
    99+
    2023-02-13
    vue项目一键换肤功能 前端vue换肤实现 vue实现换肤功能
  • Jenkins一键打包如何部署SpringBoot应用
    小编给大家分享一下Jenkins一键打包如何部署SpringBoot应用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Jenkins简介Jenkins是开源CI&...
    99+
    2023-06-22
  • js如何实现简单的网页换肤效果
    这篇文章给大家分享的是有关js如何实现简单的网页换肤效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。中心思想：网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换，并...
    99+
    2024-04-02
  • 如何使用HTML和CSS实现网页换肤效果
    这篇文章主要为大家展示了“如何使用HTML和CSS实现网页换肤效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用HTML和CSS实现网页换肤效果”这篇文...
    99+
    2024-04-02
  • windows10切换桌面对话框快捷键是什么windows10切换桌面对话框快捷键一览
    windows10客户在使用电脑的过程中经常会碰到开启多个对话框的状况，用电脑鼠标去点一下又很麻烦，那样windows10切换桌面对话框快捷键是什么呢？要想切换窗口，按着Alt+Tab键就可以了，如果是设置分屏以后，要想转换不一样桌面上得话...
    99+
    2023-07-13
  • jquery如何修改cookie中的一个键值对
    本篇内容介绍了“jquery如何修改cookie中的一个键值对”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！创建一个 cookie在创建一个...
    99+
    2023-07-06
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作