springboot访问静态资源方法

josion.

已于 2022-08-02 17:13:17 修改

阅读量3.6k

点赞数 1

分类专栏： java html 文章标签： java html

于 2022-04-16 10:56:16 首次发布

本文链接：https://blog.csdn.net/qq_53088095/article/details/124209572

版权

java 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

这是将vue项目放到静态包下
目录结构

在这里插入图片描述

端口和前缀
在这里插入图片描述

vue.html

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>vxe Demo</title>
  <meta name="description" content="Element UI Demo">
 
  <link rel="stylesheet" th:href="@{/assets/persional/views/dist/css/app.6aa77349.css}"/>
  <link rel="stylesheet" th:href="@{/assets/persional/views/dist/css/chunk-vendors.59514fc7.css}"/>
  <p>fdsfdsfdsgfdsgfdghfdshfdgfdgdf</p>
</head>
<body>
	<script defer="defer" type="module" th:src="@{/assets/persional/views/dist/js/chunk-vendors.42ad1716.js}"></script>
	<script defer="defer" type="module" th:src="@{/assets/persional/views/dist/js/app.105eb1f3.js}"></script>
	
	<script defer="defer" th:src="@{/assets/persional/views/dist/js/chunk-vendors-legacy.c0641cf1.js}" nomodule></script>
	<script defer="defer" th:src="@{/assets/persional/views/dist/js/app-legacy.b0780305.js}" nomodule></script>
	<div id="app"></div>
	
	
</body>
</html>

方法一

templates与static包同级，记住，否则找不到页面500异常
添加依赖

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

在controller_view中

@RestController
@RequestMapping("/view")
public class IndexView {
	
	@GetMapping("/index1")
	public ModelAndView login1() {
		return new ModelAndView("/views/vue");  //路径只需要填写html名字，不需要填写index.html，只需要填写index
	}
}

在yml中

spring:
	thymeleaf: 
    suffix: .html # 过滤所有非html结尾的文件
    classpath: /templates/model/** #则不指定suffix: .html --> 扫描/templates/model/下所有文件
    prefix: classpath:/templates/model/  # 扫描/templates/model/下所有文件
    cache: false # 关闭缓存 开发模式下设置为false，避免改了模板还要重启服务器，线上设置为true，可以提高性能。
    encoding: UTF-8
    check-template-location: true  #check-tempate-location: 检查模板路径是否存在

请求成功
在这里插入图片描述

方法二

与方法一有所不同吗，当templates在static下时

yml中配置如下

spring:
  mvc:
    static-path-pattern: /sta/**      #配置静态资源的访问前缀：改了之后想要直接加载静态资源要用http://localhost:端口号/sta/静态资源名。  这个sta是虚拟的，并不是真实存在的路径，这样改之后可以防止与Controller中的访问冲突

  #resources:
    #static-locations: [classpath:/haha/]  #这是改变静态资源的存放路径
    #add-mappings: true   #为true表示可以用上面提到的规则直接访问静态资源，false时表示禁止所有静态资源规则

成功访问http://localhost:58080/seckill/sta/templates/model/views/vue.html
在这里插入图片描述

方法三

承接方法一,写一个ModelAndView

@RestController
@RequestMapping("/view")
public class IndexView {
	
	@GetMapping("/index")
	public ModelAndView login() {
		return new ModelAndView("/sta/templates/model/views/vue.html");
	}
}

访问路径http://localhost:58080/seckill/view/index
成功了
在这里插入图片描述
引入的JS、CSS文件

方法四

直接访问

@Controller
@RequestMapping("/view")
public class IndexView {
	
	@GetMapping("/index")
	public String login() {
		return "/templates/model/views/vue.html";
	}
	
	
}

若是配置了mvc

  mvc:
    static-path-pattern: /sta/**      #配置静态资源的访问前缀：改了之后想要直接加载静态资源要用http://localhost:端口号/sta/静态资源名。  这个ers是虚拟的，并不是真实存在的路径，这样改之后可以防止与Controller中的访问冲突

则

@Controller
@RequestMapping("/view")
public class IndexView {
	
	@GetMapping("/index")
	public String login() {
		return "/sta/templates/model/views/vue.html";
	}
	
	
}

成功
在这里插入图片描述
但是，如果加了依赖

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

并且配置了

#thymeleaf: 
    #suffix: .html # 过滤所有非html结尾的文件
    #classpath: /templates/model/** #则不指定suffix: .html --> 扫描/templates/model/下所有文件
    #prefix: classpath:/templates/model/  # 扫描/templates/model/下所有文件
    #cache: false # 关闭缓存 开发模式下设置为false，避免改了模板还要重启服务器，线上设置为true，可以提高性能。
    #encoding: UTF-8
    #check-template-location: true  #check-tempate-location: 检查模板路径是否存

将会报错
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Fri Apr 29 11:18:36 CST 2022
There was an unexpected error (type=Internal Server Error, status=500).
Error resolving template [/sta/templates/model/views/vue.html], template might not exist or might not be accessible by any of the configured Template Resolvers

josion.

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
springboot访问静态资源方法

根目录端口和前缀vue.html<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>vxe Demo<
复制链接

扫一扫