主页 / 问题 / 949614
Accepted
Range
Asked:2020-02-26 19:36:27 +0800 CST2020-02-26 19:36:27 +0800 CST

将 js 脚本连接到 Spring Boot 项目

  • 772

我正在使用 Spring Boot 库。我制作了一个基本的 html 页面（不要看这段代码，我知道这很糟糕，我从来没有做过，也不太可能，我现在只能这样做）。现在我需要从外部文件中包含一个 js 脚本。阅读，学习。制作如下。

这是 Intelligi IDEA 中的项目结构：

在此处输入图像描述

以防万一，脚本资源管理器的路径：

在此处输入图像描述

所以 IDE 中的static.js文件夹只是 IDE 本身路径的简写。

以下是页面本身：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" th:src="@{js/test.js}" src="js/text.js"></script>
</head>

<style>
    body {
        font: 11px 'Verdana';
        margin: 0;
        padding: 0;
    }
    ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul:after {
        display: block;
        content: ' ';
        clear: both;
        float: none;
    }
    ul.menu > li {
        float: left;
        position: relative;
    }
    ul.menu > li > a {
        display: block;
        padding: 10px;
        color: white;
        background-color: darkgray;
        text-decoration: none;
    }
    ul.menu > li > a:hover {
        background-color: black;
    }
    ul.submenu {
        display: none;
        position: absolute;
        width: 120px;
        top: 30px;
        left: 0;
        background-color: white;
    }
    ul.submenu > li {
        display: block;
    }
    ul.submenu > li > a {
        display: block;
        padding: 10px;
        color: white;
        background-color: darkgray;
        text-decoration: none;
    }
    ul.submenu > li > a:hover {
        text-decoration: underline;
    }
    ul.menu > li:hover > ul.submenu {
        display: block;
    }
    ul.submenu > li > a:hover {
        background-color: black;
        text-decoration: none;
    }

    div.blockMenu{
        background-color: darkgray;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }

</style>

<body>

<div class = "blockMenu">
<ul class="menu">
    <li><a class="#" >Файл</a>
        <ul class="submenu">
            <li><a href=# onclick="messageBox()" >Открыть</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul class="submenu">
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
</ul>
</div>

<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

最简单的代码，到目前为止这是一个简单的笔试。代码中有一个按钮单击处理程序：

onclick="messageBox()"

此函数取自脚本。脚本本身连接在这里：

<script type="text/javascript" th:src="@{js/test.js}" src="js/text.js"></script>

以及 test.js 脚本代码本身：

function messageBox(){
    alert('Test message');
}

就这样。正如所料-在我看来，由于系统找不到脚本，因此未调用该函数。问题：如何正确写入脚本的路径？或者也许如何正确创建目录系统以便系统检测到脚本？非常感谢。

PS：在没有弹簧靴的情况下进行了测试，即 一个常规的网页和一个连接的脚本，一切正常，按钮调用警报。

UDP1

另外，这是浏览器的响应： 在此处输入图像描述

javascript

2 个回答

  1. 遇到这样的问题。需要明确告诉在哪里寻找 js/css 主类示例

     @SpringBootApplication
    public class Application implements WebMvcConfigurer {

        public static void main(String[] args) {
            SpringApplication.run(Application.class, args);
        }

        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        }
    }

    或者创建一个带有@Configuration 注解的类，在其中覆盖 addResourceHandlers 方法。

    这是 Spring Boot 和 Css/js 的示例，您可以在那里看到它 - https://github.com/KonstantinPM/FileStatistic

    • 1
  2. Best Answer

    在研究这个问题时，我得出的结论是这个问题非常罕见。我添加的第一件事是稍微更正的代码，这是由 Konstantin Polishchuk建议的，非常感谢他：

    @SpringBootApplication
public class Application implements WebMvcConfigurer {

    private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
            "classpath:/META-INF/resources/", "classpath:/resources/",
            "classpath:/static/", "classpath:/public/"
    };

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);
    }

}

    在这里，明确指出了静态资源所在的所有位置（Spring 正在寻找的位置）的路径。接下来，我在控制器类中添加了RequestMapping注解：

    @RequestMapping
@Controller
public class DfdController {
    // TODO
}

    这样做是因为控制器出于我不知道的原因阻止了资源文件夹的路径。这就是为什么它没有加载。

    这两种方法共同帮助最终加载了外部脚本（以及未来的样式）。我希望这会对某人有所帮助，因为我花了整整一天的时间寻找和尝试。

    • 0

相关问题