RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 949614
Accepted
Range
Range
Asked:2020-02-26 19:36:27 +0000 UTC2020-02-26 19:36:27 +0000 UTC 2020-02-26 19:36:27 +0000 UTC

将 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 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Константин Полищук
    2020-02-26T23:33:27Z2020-02-26T23:33:27Z

    遇到这样的问题。需要明确告诉在哪里寻找 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
    Range
    2020-02-27T04:45:06Z2020-02-27T04:45:06Z

    在研究这个问题时,我得出的结论是这个问题非常罕见。我添加的第一件事是稍微更正的代码,这是由 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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    根据浏览器窗口的大小调整背景图案的大小

    • 2 个回答
  • Marko Smith

    理解for循环的执行逻辑

    • 1 个回答
  • Marko Smith

    复制动态数组时出错(C++)

    • 1 个回答
  • Marko Smith

    Or and If,elif,else 构造[重复]

    • 1 个回答
  • Marko Smith

    如何构建支持 x64 的 APK

    • 1 个回答
  • Marko Smith

    如何使按钮的输入宽度?

    • 2 个回答
  • Marko Smith

    如何显示对象变量的名称?

    • 3 个回答
  • Marko Smith

    如何循环一个函数?

    • 1 个回答
  • Marko Smith

    LOWORD 宏有什么作用?

    • 2 个回答
  • Marko Smith

    从字符串的开头删除直到并包括一个字符

    • 2 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5