SpringBoot--访问静态页面

曾经终败给现在 2022-08-30 11:18 167阅读 0赞

原文网址：[SpringBoot--访问静态页面\_IT利刃出鞘的博客-CSDN博客][SpringBoot--_IT_-CSDN]

# 其他网址 #

# 简介 #

## 位置与优先级 ##

**位置**

> spring boot的静态资源：
> 
>  *  static目录：css、js、图片等
>  *  templates目录：html页面

**优先级**

> spring boot默认将/\*\*静态资源访问映射到以下目录：
> 
> classpath:/static  
> classpath:/public  
> classpath:/resources  
> classpath:/META-INF/resources
> 
> 这四个目录的访问优先级：META-INF/resources > resources > static > public
> 
> 即：这四个路径下如果有同名文件，则会以优先级高的文件为准。

> 其对应的配置方法为：application.yml。默认配置如下：
> 
> spring:  
> web:  
> resources:  
> static-locations: classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/

> 其实，它还与application.yml的下边这个配置有关，两者联合起来控制路径
> 
> spring:  
> mvc:  
> static-path-pattern: /\*\*

## HTML放置位置的区别 ##

**HTML文件放到templates目录下**

> 推荐将html页面放置在templates目录，原因如下：
> 
> templates目录下的html页面不能直接访问，需要通过服务器内部进行访问，可以避免无权限的用户直接访问到隐私页面，造成信息泄露。

**HTML文件放到static目录下**

> 这样用户可以通过两种方法获得到html页面：
> 
> 1.  直接访问.html资源
> 2.  通过controller跳转
> 
> 就像上边说的一样，当直接访问.html资源时，用户可以访问到无权访问的页面。

# HTML存放于templates目录（推荐） #

**其他网址**

> [spring boot访问templates目录下的html静态页面\_记忆储存处的博客-CSDN博客][spring boot_templates_html_-CSDN]  
> [SpringBoot项目中访问HTML页面-CSDN博客\_springboot项目访问html页面][SpringBoot_HTML_-CSDN_springboot_html]

**步骤1：引入thymeleaf 依赖**

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

**步骤2：写一个简单的HTML，放置到templates路径**

>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>this is title</title>
>     </head>
>     
>     <body>
>     
>     <div>
>         这是templates的demo
>     </div>
>     
>     </body>
>     </html>

**步骤3：编写Controller**

>     package com.example.demo.views;
>     
>     import org.springframework.stereotype.Controller;
>     import org.springframework.web.bind.annotation.GetMapping;
>     import org.springframework.web.bind.annotation.RequestMapping;
>     
>     @Controller
>     @RequestMapping("view")
>     public class ViewController {
>         @GetMapping("demo")
>         public String demo() {
>             return "demo";
>         }
>     }
> 
> 需要注意：必须使用@Controller，不能使用@RestController。
> 
> 因为@RestController返回的是 JSON，且不走SpringMVC的视图解析流程，所以跳不到html那里。

**测试**

> 访问：[Node Exporter][] （我端口配成了9100，没有配置其他东西）
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

# HTML存放于static目录（不推荐） #

## 法1：直接访问.html资源 ##

**其他网址**

> [SpringBoot项目中访问HTML页面-CSDN博客\_springboot项目访问html页面][SpringBoot_HTML_-CSDN_springboot_html]

**步骤1：将html放到static目录**

>     <!doctype html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>this is title</title>
>     </head>
>     
>     <body>
>     
>     <div>
>         这是static的demo
>     </div>
>     
>     </body>
>     </html>

**测试**

> 访问：[Node Exporter][Node Exporter 1]（我端口配成了9100，没有配置其他东西）
> 
> ![20210720001933848.png][]

## 法2：通过controller跳转 ##

**其他网址**

> [spring boot web，配置可以直接访问静态html\_u011649691的博客-CSDN博客][spring boot web_html_u011649691_-CSDN]  
> [SpringBoot访问html和js等静态资源配置\_祗是辉哥哥的博客-CSDN博客][SpringBoot_html_js_-CSDN]

**步骤1：确保没有thymeleaf依赖**

**步骤2：将html放置到static路径**

**步骤3：编写controller**

>     package com.example.demo.views;
>     
>     import org.springframework.stereotype.Controller;
>     import org.springframework.web.bind.annotation.GetMapping;
>     import org.springframework.web.bind.annotation.RequestMapping;
>     
>     @Controller
>     @RequestMapping("view")
>     public class ViewController {
>         @GetMapping("demo")
>         public String demo() {
>             return "/demo.html";
>         }
>     }
> 
> 注意：返回的字符串前边必须带“/” 。

**测试**

**说明**

> 也可以如下操作，结果是一样的：
> 
> application.yml配置前后缀：
> 
>     spring.mvc.view.prefix=/
>     spring.mvc.view.suffix=.html
> 
> controller这样写：
> 
>     package com.example.demo.views;
>     
>     import org.springframework.stereotype.Controller;
>     import org.springframework.web.bind.annotation.GetMapping;
>     import org.springframework.web.bind.annotation.RequestMapping;
>     
>     @Controller
>     @RequestMapping("view")
>     public class ViewController {
>         @GetMapping("demo")
>         public String demo() {
>             return "demo";
>         }
>     }

# HTML引入JS #

**其他网址**

> [springboot项目中如何引用Jquery文件\_小白一个-CSDN博客][springboot_Jquery_-CSDN]  
> [SpringBoot的html页面引入jquery，layui\_K881009的博客-CSDN博客][SpringBoot_html_jquery_layui_K881009_-CSDN]

[SpringBoot--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/118912375
[spring boot_templates_html_-CSDN]: https://blog.csdn.net/qq_34357018/article/details/109777607
[SpringBoot_HTML_-CSDN_springboot_html]: https://blog.csdn.net/pan_junbiao/article/details/105615906
[Node Exporter]: http://localhost:9100/view/demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20220829/39fba9d4b8a44437ba4bdf6b1091ab72.png
[Node Exporter 1]: http://localhost:9100/demo.html
[20210720001933848.png]: /images/20220829/aefc152c1f4d42b79577c342c360cb31.png
[spring boot web_html_u011649691_-CSDN]: https://blog.csdn.net/u011649691/article/details/85625638
[SpringBoot_html_js_-CSDN]: https://blog.csdn.net/weixin_42456466/article/details/80688681
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220829/4a9f97c2d1c745b7aee4cef0288a1c11.png
[springboot_Jquery_-CSDN]: https://blog.csdn.net/sunnyzyq/article/details/89087919
[SpringBoot_html_jquery_layui_K881009_-CSDN]: https://blog.csdn.net/K881009/article/details/88656170