时间戳

首页 > 解决方案 > Spring Boot 没有 CSS 的映射 - JS

spring-boot - Spring Boot 没有 CSS 的映射 - JS

问题描述

我的项目结构：

resoureces
  static
    css
    js
  templates
    a.html
    b.html

我的应用程序.yml：

resources:
static-locations: classpath:/

还有我的html代码：

    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
      <meta charset="UTF-8">
      <meta content="webkit" name="renderer">
      <meta content="width=device-width, initial-scale=1" name="viewport">
      <link rel="shortcut icon" href="static/img/favicon.ico" />
      <script src="static/js/jquery-3.2.1.js"></script>
      <script src="static/js/bootstrap.min.js"></script>
      <script src="static/js/jquery-confirm.min.js"></script>
      <link href="static/css/reset.css" rel="stylesheet">
      <link href="static/css/bootstrap.min.css" rel="stylesheet">
      <link href="static/css/pretty.css" rel="stylesheet">
      <link href="static/css/iconfont.css" rel="stylesheet">
      <link href="static/css/common.css" rel="stylesheet">
      <link href="static/css/jquery-confirm.min.css" rel="stylesheet">
</head>
<body>
      <p>test</p>
</body>

我的控制器： 

 @Controller
public class IndexController {

    @GetMapping("/index")
    public String toIndex(){
        return "index";
    }

    @GetMapping("/index/test")
    public String test(){
        return "index";
    }
}

/index css 和 js 成功

但是 /index/test idea 没有显示它的映射

什么是正确的配置？

HTML 如何链接 CSS 和 JS？

标签： spring-boot

解决方案

问题是您使用的是相对路径，例如static/css/reset.css.

您的浏览器将使用当前路径处理这些，并附加相对路径。

假设你在 8080 端口上运行你的应用程序，当你调用 时http://localhost:8080/index，资源将从http://localhost:8080/static/css/reset.css. 但是，当您调用 时/index/test，相对路径将引用http://localhost:8080/index/static/css/reset.css.

这意味着由于您使用相对路径，如果您的路径不同，它将从不同的位置获取资源。

一种可能的解决方案是在 HTML 部分中使用<base />标签<head>，例如：

<base href="/" />

通过设置<base />标签，你告诉你的浏览器从哪里获取资源。

可以在这个问题中找到更详细的信息。

另外，请注意，默认情况下，Spring boot 将src/main/resources/static在上下文路径本身内提供资源，因此可能必须static/从 URL 中删除部分，例如：

<link href="css/reset.css" rel="stylesheet">

推荐阅读