Spring Boot 添加 HTML 和 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33925712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spring Boot add HTML and JavaScript
提问by Piotr ?ak
I'm trying to run Spring boot app with some HTML5 and JavaScript and I have a problem.
我正在尝试使用一些 HTML5 和 JavaScript 运行 Spring Boot 应用程序，但遇到了问题。
I have project structure like this:
我有这样的项目结构：
My Spring MVC Controller is calling file offer.html and that works ok.
我的 Spring MVC 控制器正在调用文件 offer.html 并且工作正常。
My offer.html file look like this:
我的 offer.html 文件如下所示：
<!DOCTYPE html>
<html lang="en" ng-app="coByTu">
<head>
<title>Page</title>
<script type="text/javascript" src="../js/lib/angular.js" />
<script type="text/javascript" src="../js/src/offer.js" />
</head>
<body>
</body>
</html>
And when I'm typing my app URL http://localhost:8080/offerView
当我输入我的应用程序 URL http://localhost:8080/offerView
response from server is:
来自服务器的响应是：
I have no idea why my app doesn't see this script files, could any one have any idea what i did wrong?
我不知道为什么我的应用程序看不到这个脚本文件，有人知道我做错了什么吗？
回答by Eric
Basically all content that needs to be served staticly (such as javascript files) should be placed under the static folder. https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
基本上所有需要静态提供的内容（例如 javascript 文件）都应该放在 static 文件夹下。 https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
I've thrown together a quick working example to show how it is done: https://github.com/ericbv/staticContentWithSpringBoot
我已经拼凑了一个快速的工作示例来展示它是如何完成的：https: //github.com/ericbv/staticContentWithSpringBoot
File structure:
文件结构：
HTML file:
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page</title>
<script type="text/javascript" th:src="@{/js/lib/angular.js}" />
<script type="text/javascript" th:src="@{/js/src/offer.js}" />
</head>
<body>
Using th:src will make sure that the links are context aware
使用 th:src 将确保链接是上下文感知的
Edit: added the th:src to make the references context aware
编辑：添加了 th:src 以使引用上下文感知
回答by jny
You need to put your static js files into static folder. See more here: https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
您需要将静态 js 文件放入静态文件夹中。在此处查看更多信息：https: //spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
回答by Chris
just for anyone to find this page with the same issue. The way I resolved the 'script is not executed' problem was pretty simple.
仅供任何人找到具有相同问题的页面。我解决“脚本未执行”问题的方法非常简单。
Simply replaced :
简单替换：
<script type="text/javascript" src="js/src/Test.js" />
with
和
<script type="text/javascript" src="js/src/Test.js" ></script>
(Test is located in 'static/js/src') Hopefully this is helpful to anyone but me :)
（测试位于'static/js/src'）希望这对除我之外的任何人都有帮助:)
cheers
干杯
回答by Forrest
For Spring Boot beginners, I had a similar issue. My jQuery code was working fine within < script > tags at the bottom of my html doc (a thymeleaf template), but when I put the exact same code into an external .js doc in the static/js folder, it no longer responded. Super simple fix - just needed to put all that .js doc code inside this: $(document).ready(function () { ...code ... }); and then it worked fine. Hope this helps someone.
对于 Spring Boot 初学者，我遇到了类似的问题。我的 jQuery 代码在我的 html 文档（thymeleaf 模板）底部的 < script > 标签中运行良好，但是当我将完全相同的代码放入 static/js 文件夹中的外部 .js 文档时，它不再响应。超级简单的修复 - 只需要将所有 .js 文档代码放在里面： $(document).ready(function () { ...code ... }); 然后它工作正常。希望这可以帮助某人。
回答by robjwilkins
I think you need to move the js directory (and contents) into the static directory (rather than having it in templates).
我认为您需要将 js 目录（和内容）移动到静态目录中（而不是将它放在模板中）。
回答by kinjelom
Set the document root directory which will be used by the web context to serve static files using ConfigurableEmbeddedServletContainer.setDocumentRoot(File documentRoot).
设置 Web 上下文将使用的文档根目录以使用ConfigurableEmbeddedServletContainer.setDocumentRoot(File documentRoot).
Working example:
工作示例：
package com.example.config;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.context.embedded.ConfigurableEmbeddedServletContainer;
import org.springframework.boot.context.embedded.EmbeddedServletContainerCustomizer;
import org.springframework.boot.web.servlet.ServletContextInitializer;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.env.Environment;
import org.springframework.util.StringUtils;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import java.io.File;
import java.nio.file.Paths;
@Configuration
public class WebConfigurer implements ServletContextInitializer, EmbeddedServletContainerCustomizer {
private final Logger log = LoggerFactory.getLogger(WebConfigurer.class);
private final Environment env;
private static final String STATIC_ASSETS_FOLDER_PARAM = "static-assets-folder";
private final String staticAssetsFolderPath;
public WebConfigurer(Environment env, @Value("${" + STATIC_ASSETS_FOLDER_PARAM + ":}") String staticAssetsFolderPath) {
this.env = env;
this.staticAssetsFolderPath = staticAssetsFolderPath;
}
@Override
public void onStartup(ServletContext servletContext) throws ServletException {
if (env.getActiveProfiles().length > 0) {
log.info("Web application configuration, profiles: {}", (Object[]) env.getActiveProfiles());
}
log.info(STATIC_ASSETS_FOLDER_PARAM + ": '{}'", staticAssetsFolderPath);
}
private void customizeDocumentRoot(ConfigurableEmbeddedServletContainer container) {
if (!StringUtils.isEmpty(staticAssetsFolderPath)) {
File docRoot;
if (staticAssetsFolderPath.startsWith(File.separator)) {
docRoot = new File(staticAssetsFolderPath);
} else {
final String workPath = Paths.get(".").toUri().normalize().getPath();
docRoot = new File(workPath + staticAssetsFolderPath);
}
if (docRoot.exists() && docRoot.isDirectory()) {
log.info("Custom location is used for static assets, document root folder: {}",
docRoot.getAbsolutePath());
container.setDocumentRoot(docRoot);
} else {
log.warn("Custom document root folder {} doesn't exist, custom location for static assets was not used.",
docRoot.getAbsolutePath());
}
}
}
@Override
public void customize(ConfigurableEmbeddedServletContainer container) {
customizeDocumentRoot(container);
}
}
Now you can customize your app with command lineor profiles (src/main/resources/application-myprofile.yml: static-assets-folder: myfolder):
现在您可以使用命令行或配置文件 (src/main/resources/application-myprofile.yml:)自定义您的应用程序static-assets-folder: myfolder：
> java -jar demo-0.0.1-SNAPSHOT.jar --static-assets-folder="myfolder"
> java -jar demo-0.0.1-SNAPSHOT.jar --spring.profiles.active=myprofile
回答by Andry Max
I added spring.mvc.static-path-pattern=/static/**to application.properties file and now it works.
我添加spring.mvc.static-path-pattern=/static/**到 application.properties 文件，现在它可以工作了。
In html I use like this src="/static/js/jQuery.min.js"
在 html 我这样使用 src="/static/js/jQuery.min.js"
