溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何對SpringBoot一鍵換膚

發布時間:2021-09-17 14:18:32 來源:億速云 閱讀:183 作者:柒染 欄目:web開發

今天就跟大家聊聊有關如何對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一鍵換膚有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業資訊頻道,感謝大家的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女