springboot返回html页面，以及关于css，js等静态文件的处理

古城微笑少年丶 2022-11-08 11:52 150阅读 0赞

springboot项目只要添加了web模块的依赖就可以直接访问到前端页面。  
下面是web的依赖，版本号托管父工程

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

不需要添加`yml/properties`配置，但要求前端页面的的存放位置如下  
在resource下建立下面的文件夹  
`static`  
`public`  
`/META-INF/resources`  
或者直接放在`/resources`下  
如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]

#### 访问 html 页面的方式 ####

##### 方式1、直接访问不经过controller #####

通过springboot地址+页面全称  
例如：`http://localhost:8080/manage.html`

##### 方式2、通过controller返回页面 #####

这种方式会由于上下文路径问题导致css和js相对路径的方式访问就会出问题，因为这种方式是在上下文环境下的相对路径。

打个比方，下面的路径就是访问路径。首先返回的路径得改成`/manage.html`  
![在这里插入图片描述][20210313152143522.png]  
也就是Controller  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 1]  
加上根路径后就能访问到前端页面，诞生由于前端页面很多地方写得是相对路径，就会导致返回得页面它就安装`/car/manage`的相对路径去下载css以及js文件，这样很明显是下载不到的，因为这些文件的实际完整的访问路径应该是`http://localhost:8080/css/css文件`或者`http://localhost:8080/js/js文件`

解决办法就是把所有相对路径改成根路径，  
例如:`./css/index.css`改成`/css/index.css`

如果你不想改，那么解决办法就是进行前后端分离（可能的代价就是前端的一些请求路径也要对应的调整）。  
将这些前端文件直接部署到web服务上，例如nginx，tomcat等。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20221023/132016dcebf94f1ab15810fa390e1537.png
[20210313152143522.png]: /images/20221023/da07b5b171154f78b487c89f51fc5768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70 1]: /images/20221023/ee7e0abd71fc4cb5b5d44a18e0bb6c79.png