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"&

josion666

3677人浏览 · 2022-04-16 10:56:16

josion666 · 2022-04-16 10:56:16 发布

这是将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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^