preface

This is the third day of my participation in the August More Text Challenge. It coincides with the challenge of Nuggets in August. Today, I would like to share with you the static resource mapping problem I encountered in the process of learning SSM framework. After analysis and thinking, I have some insights and share them with some friends who are learning Spring framework, hoping to inspire and help you! Come on, mutual encouragement!

Project Demo introduction

Log in to register both modules and do rigorous form validation

Front-end project Directory

The back-end

Configure static resource mapping

<mvc:resources mapping="/css/**" location="/static/css/"/>
<mvc:resources mapping="/js/**" location="/static/js/"/>
<mvc:resources mapping="/image/**" location="/static/image/"/>
Copy the code

Form a mapping based on the location of project resources to reduce duplicate code, reduce project coupling, and improve cohesion between resource files.

The sample code

The problem found

whenspring-mvcIf only the following mapping exists in the configuration file of

<mvc:resources mapping="/static/**" location="/static/" />

  1. In the JSP file to join basepath indicate the resource path from the beginning of the http://localhost:8080/login/ project root directory, Herf =”static/ CSS /login. CSS “, the CSS file is rendered successfully in login. JSP

  2. By doing the same thing in register.jsp in the same directory, I could render the external style file successfully, but when I used the same trick in welcome.jsp, I could only render the style except for the background property, and the image never loaded

Problem analysis

First appeared this problem, the main problem is the static resource mapping understanding is not deep, analysis the mapping relations, now can see there is no use this mapping, also the mapping seems to be very redundant, so that after the request is processed, the page jumps path error, cause a 404 error, can’t find the resources.

Problem solving

  • Rewrite the mapping
  • Modify the href property value to fill in the corresponding path location
  • Take the href value of the login page as an example:

    • As can be seen from the picture above,login.cssThe absolute position in the project is:http://localhost:8080/login/css/login.css, this is a mapped path (not the location of the resource in the real project) but resolved according to the static resource map, the real project location of the static resource is located athttp://localhost:8080/login/static/css/login.css.
    • If href=”/ CSS /login. CSS”

      • It’s going to conflict with the mapping. One is/static/css/And the other is from/(the root directory of the project) starts and eventually causes the resource to fail to be found and importedcssfile

Conclusion:

  1. In summary, you can configure static resource mapping instead of specifying basepath in the JSP file.Copy the code
  2. If the resource cannot be found, search for the problem in the Network bar of the browser console and verify the location of the resource file in the project according to the loading path.Copy the code