Spring Boot add HTML and JavaScript
Question
I'm trying to run Spring boot app with some HTML5 and JavaScript and I have a problem.
I have project structure like this:
My Spring MVC Controller is calling file offer.html and that works ok.
My offer.html file look like this:
<!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
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?
7 answers
solution1
38 ACCPTED 2015-11-25 21:40:18
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
I've thrown together a quick working example to show how it is done: https://github.com/ericbv/staticContentWithSpringBoot
File structure:
HTML file:
<!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
Edit: added the th:src to make the references context aware
solution2
4 2015-11-25 20:39:45
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
solution3
2 2019-07-10 08:15:08
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 :)
cheers
solution4
1 2015-11-25 20:39:29
我认为您需要将js目录（和内容）移动到静态目录中（而不是将其放在模板中）。
solution5
1 2017-09-15 16:33:38
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.
solution6
0 2017-04-11 15:37:42
Set the document root directory which will be used by the web context to serve static files using 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 line or profiles (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
solution7
0 2019-06-20 20:34:08
I added spring.mvc.static-path-pattern=/static/** to application.properties file and now it works.
In html I use like this src="/static/js/jQuery.min.js"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.