Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to change skin with one click on SpringBoot. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

I'll talk to you about Theme today.

Theme, that is, the theme, click to change a theme to the website, I believe we have all used similar functions, this is actually very similar to the international function mentioned earlier, the code is actually very similar, today we will sort it out.

Considering that some friends may not have used Theme, so here Songge will first talk about the usage, and then we will analyze the source code.

1. One click to change the skin

To make a simple requirement, suppose I have three buttons on my page, and I can change my skin with one click, like this:

Let's take a look at how this requirement is realized.

First of all, the three buttons correspond to three different styles. Let's define these three different styles as follows:

Blue.css:

Body {background-color: # 05e1ff;}

Green.css:

Body {background-color: # aaff9c;}

Red.css:

Body {background-color: # ff0721;}

The definition of a theme is often a set of styles, so we usually configure the styles of the same theme together in a properties file to facilitate later loading.

So next we create a new theme directory under the resources directory, and then create three files in the theme directory, as follows:

Blue.properties:

Index.body=/css/blue.css

Green.properties:

Index.body=/css/green.css

Red.properties:

Index.body=/css/red.css

Different styles are introduced in different properties configuration files, but the key of the style definition is index.body, which makes it easy to introduce it in the page later.

Next, configure three Bean in the SpringMVC container as follows:

First configure the interceptor ThemeChangeInterceptor, which is used to parse the topic parameter, the key of the parameter is theme, for example, the request address is / index?theme=blue, the interceptor will automatically set the system theme to blue. Of course, you can not configure the interceptor. If not, you can provide a separate API to modify the theme, and then manually modify the theme, such as the following:

@ 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 is the new topic name, and you can configure it to themeResolver.

Next, configure ResourceBundleThemeSource, this Bean is mainly to load the theme file, you need to configure a basenamePrefix property, if our theme file is placed in a folder, the value of this basenamePrefix is the folder name.

Next, configure the theme parser, there are three kinds of topic parser, namely, CookieThemeResolver, FixedThemeResolver, SessionThemeResolver, here we use SessionThemeResolver, the topic information will be stored in Session, as long as the Session is unchanged, the theme will always be valid. These three theme parsers, Brother Song, will be analyzed in detail in the next section.

After the configuration is complete, we will provide a test page as follows:

Title one-click switch theme: Topa blue dopamine red carnation green

The most important thing is:

The css style does not write directly, but refers to the index.body that we defined in the properties file, which loads different css files depending on the current theme.

Finally, a processor is provided as follows:

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

This is very simple, there is nothing to say.

Finally, start the project to test, you can see the picture given at the beginning of our article, click on different buttons to achieve the background switch.

Is it very Easy!

two。 Principle analysis

What is involved in the theme section is mainly the theme parser, which is very similar to the internationalized parser we mentioned earlier, but it is simpler than it. Let's analyze it together.

Let's first take a look at the ThemeResolver interface:

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

There are only two methods in this interface:

ResolveThemeName: parses the name of the topic from the current request.

SetThemeName: sets the current theme.

ThemeResolver has three main implementation classes, and the inheritance relationships are as follows:

Next, let's analyze these implementation classes one by one.

2.1 CookieThemeResolver

Go directly to the source code:

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);}}

Let's first take a look at the resolveThemeName method:

First, it attempts to get the topic name directly from the request, and if it does, it returns directly.

If the topic name is not obtained in the first step, then try to get the topic name from Cookie. Cookie is also extracted from the current request and parsed using the WebUtils tool. If the topic name is resolved, it is assigned to the themeName variable.

If the topic name is not obtained previously, the default topic name is used. Developers can configure the default topic name by themselves. If it is not configured, it is theme.

Save the parsed theme to request for later use.

Let's look at the setThemeName method:

If there is a themeName, set it and add the themeName to the Cookie.

If themeName does not exist, set a default theme name and remove the Cookie from the response.

As you can see, the whole implementation idea is still very simple.

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 mainly provides the ability to configure default themes.

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 uses the default theme name and does not allow you to modify the theme.

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: fetch the topic name from the session and return it. If the topic name in the session is null, the default topic name is returned.

SetThemeName: configure the topic to the request.

I don't want to say any more, because it's very simple.

2.5 ThemeChangeInterceptor

Finally, let's take a look at the ThemeChangeInterceptor interceptor, which automatically extracts the subject parameters from the request and sets them to the request. The core part is in the preHandle method:

@ 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;}

The theme parameter is extracted from the request and set to themeResolver.

After reading the above, do you have any further understanding of how to change skin with one click of SpringBoot? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.