Spring Boot aggiungere HTML e JavaScript

Sto provando a eseguire l'app di avvio Spring con alcuni HTML5 e JavaScript e ho un problema.Spring Boot aggiungere HTML e JavaScript

devo struttura del progetto come questo:

My Spring MVC Controller è chiamando il file offer.html e che funziona bene.

mio aspetto offer.html file in questo modo:

<!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>

E quando sto scrivendo il mio URL app http://localhost:8080/offerView

risposta dal server è:

ho non ho idea del motivo per cui la mia app non vede questo file di script, qualcuno potrebbe aver idea di cosa ho fatto di sbagliato?

fonte

2015-11-25 zaqpiotr

Fare riferimento a https://github.com/spring-guides/tut-spring-security-and-angular-js/tree/master/modular – EpicPandaForce

In base a tutto il contenuto che deve essere servito in modo statico (come i file javascript) deve essere collocato nella cartella statica. https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

ho buttato insieme un esempio di lavoro veloce per mostrare come è fatto: la struttura https://github.com/ericbv/staticContentWithSpringBoot

File:

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>

Utilizzando th: src farà in modo che i collegamenti sono Context Aware

Edit: aggiunto il th: src per rendere il contesto riferimenti a conoscenza

fonte

2015-11-25 21:40:18 Eric

I sugest to non usare thymeleaf qui :) '

Penso che sia necessario spostare la directory (e il contenuto) js nella directory statica (anziché averla nei modelli).

fonte

2015-11-25 20:39:29 robjwilkins

ho provato prima ma non ho risolto il mio problema. – zaqpiotr

È necessario inserire i file js statici nella cartella statica. Ulteriori informazioni qui: https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

fonte

2015-11-25 20:39:45 jny

Siamo spiacenti ma questo link non aiuta. – zaqpiotr

Impostare la directory principale del documento che verrà utilizzato dal contesto web per serve file statici usando ConfigurableEmbeddedServletContainer.setDocumentRoot(File documentRoot).

esempio di lavoro:

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); 
    } 

}

Ora è possibile personalizzare la vostra applicazione con command line o profili (src/main/risorse/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

fonte

2017-04-11 15:37:42 wildloop

Per la Primavera di avvio principianti, ho avuto un problema simile. Il mio codice jQuery funzionava perfettamente all'interno dei tag dello script < nella parte inferiore del mio documento html (un modello di thymeleaf), ma quando inserivo lo stesso identico codice in un documento .js esterno nella cartella static/js, non rispondeva più. Super semplice correzione - solo bisogno di mettere tutto questo.js codice doc all'interno di questo: $ (documento) .ready (function() {... code ...}); e poi ha funzionato bene. Spero che questo aiuti qualcuno.

fonte

2017-09-15 16:33:38 Forrest

Non penso che questa sia una soluzione adeguata. Hai risolto il problema utilizzando gli strumenti dello sviluppatore di Chrome? –

Problemi correlati