React + SpringBoot project to deploy static resource configuration of the path Springboot

 Static resource access configuration 

  https://www.jianshu.com/p/b6e0a0df32ec

 https://segmentfault.com/q/1010000012240531/a-1020000012250927

 

 _______________________________________________________________________________________________

 

springboot- static resource access path default order

Disclaimer: This article is a blogger original article, follow the  CC 4.0 by-sa  copyright agreement, reproduced, please attach the original source link and this statement.
This link: https://blog.csdn.net/cygodwg/article/details/83271275

META-INF/resources/hello.html hello.html内容META-INF/resources/hello

static/hello.html hello.html内容static/hello

resources/hello.html 内容resources/hello

public/hello.html 内容public/hello

访问http://localhost/hello.html

Page content META-INF / resources / hello, access path is META-INF / resources / hello.html, remove the html

Then visit http: //localhost/hello.html

Content: resources / hello, access path resources / hello.html remove the html

访问http://localhost/hello.html

Content: static / hello, access path static / hello.html, remove the html

Then visit http: //localhost/hello.html

SUMMARY resources / public / hello world, the access path public / hello world, remove the html

Thus experiments that default access path is a static resource

META-INF/resources > resources > static > public

________________________________________________________________________________________________

 

Springboot path configuration of static resource

 

1, static resource path is the path of the system can directly access all the files and in the path of a user can be read directly through the browser.

2, the default path in Springboot static resources there: classpath: / META-INF / resources /, classpath: / resources /, classpath: / static /, classpath: / public /

3, can override the default configuration of static resources path in the configuration file directly in Springboot:

Copy the code
# Custom attribute that specifies a path, attention should end in / 
web.upload-path = D: / the TEMP / study13 /
# indicates that all access is through the static resource path spring.mvc.static-path-pattern = / **

# override the default configuration, so it is necessary to also add a default or static, public, etc. these paths will not be used as a static resource path
# at the end of most of the file: $ {web.upload-path} in the file: representation a specific path is hard, the other refers to the classpath system environment variables
spring.resources.static-locations = classpath: / META -INF / resources /, classpath: / resources /, classpath: / static /, classpath: / public /, file: $ {web.upload -path}
Copy the code

4, in SpringBoot development, you can override the default Java code static resource allocation

Copy the code
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        if(!registry.hasMappingForPattern("/static/**")){
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        }
        super.addResourceHandlers(registry);
    }

}
Copy the code

 5, due to the question of resources Spring Boot default configuration path, use IDEA to develop Spring Boot application, cause a problem ---- browser, the editor can not access the resources of the JS and other issues at the same time. At this time, often through the configuration code 4, to achieve the effect of simultaneous access to a resource file

 

Reference knowledge Lin: http: //www.zslin.com/web/article/detail/23

_______________________________________________________________________________________________

First, I set up a project react with the create-react-app (this step we can look Quguan network https://reactjs.org/docs/add-react-to-a-new-app.html )

You'll get a project is structured as follows:

 
image.png

We can run this project through the yarn start:


 
image.png
 
image.png

Run up a page like this:


 
image.png

Well, now you have successfully run up in a development environment, then we have to pack, and then deploy it to the server

Packaging is also very simple, do npm run build:

 
image.png

You will find in your project folder more than a build folder:

 
image.png
 
image.png

Then when you click on index.html, you will find the open like this:

 
image.png

Blank ... then you check the next index.html, to find that the path is this:

 
image.png

Han did not find the problem ... which path is the absolute path, of course, I can not find js and css resources as well as pictures of what, how to make these paths become relative paths it is very simple ... we'll package.json plus homepage on the line:

 
image.png

You look at the last sentence on the line ... and then we packed again, and then point index.html, will find that everything is normal:


 
image.png

OK, now we got through build js and css and html pages and resources ... you have found, we entrance page is index.html

所以比如说你自己有个服务器地址是 www.abc.com ,你只要在访问www.abc.com的时候把index.html返回出去就行了...因为我自己的服务器是用SpringBoot搭建的,所以我就用SpringBoot来举例子

SpringBoot返回html页面也很简单,在resource目录下新建一个public文件夹,然后把你React打包的build文件夹里的文件都丢进去就行...(这里截图是我自己的项目,我把一些.js和.json文件去掉了,因为好像没啥用)

 
image.png

这个时候你访问www.abc.com他就会直接返回index.html了(注意在SpringBoot里的Controller去掉对"/"的拦截)

然后你只要把SpringBoot项目部署到服务器上(如何部署SpringBoot项目大家可以看这篇文章https://blog.csdn.net/ruglcc/article/details/76147645),然后访问你的域名,你就可以看到index.html了,比如我刚刚部署的自己的网页www.nanmian.top

OK这篇文章结束了,大家也发现了目前的网页很简单...就只有一个页面,我刚学前端...所以也不是很懂,不知道之后项目变大了这种方法还行不行...到时候我会再记录的

 ______________________________________________________________________________

1、静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户通过浏览器直接读取。

2、在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

3、在Springboot中可以直接在配置文件中覆盖默认的静态资源路径的配置信息:

Copy the code
#自定义的属性,指定了一个路径,注意要以/结尾
web.upload-path=D:/temp/study13/
#表示所有的访问都经过静态资源路径 spring.mvc.static-path-pattern=/**

#覆盖默认配置,所以需要将默认的也加上否则static、public等这些路径将不能被当作静态资源路径
#在最末尾的file:${web.upload-path}中的file:表示是一个具体的硬盘路径,其他的使用classpath指的是系统环境变量
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}
Copy the code

4、在SpringBoot开发中,可以在Java代码中覆盖默认静态资源配置

Copy the code
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        if(!registry.hasMappingForPattern("/static/**")){
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        }
        super.addResourceHandlers(registry);
    }

}
Copy the code

 5, due to the question of resources Spring Boot default configuration path, use IDEA to develop Spring Boot application, cause a problem ---- browser, the editor can not access the resources of the JS and other issues at the same time. At this time, often through the configuration code 4, to achieve the effect of simultaneous access to a resource file

 

Reference knowledge Lin: http: //www.zslin.com/web/article/detail/23

Guess you like

Origin www.cnblogs.com/kelelipeng/p/11424995.html