Generieren Sie JavaScript mit Thymeleaf

Überblick

Es ist eine Erinnerung, weil ich zufällig JavaScript mit Thymeleaf berührt habe.

Umgebung

OpenJDK 11.0.2 SpringBoot 2.3.4 Thymeleaf 3.0.11

Template Engine-Einstellungen

AppConfig.java

@Configuration
public class AppConfig {

    @Bean
    public TemplateEngine scriptTemplateEngine() {
        final TemplateEngine templateEngine = new TemplateEngine();
        templateEngine.setDialect(new SpringStandardDialect());
        templateEngine.setTemplateResolver(scriptTemplateResolver());

        return templateEngine;
    }

    private ITemplateResolver scriptTemplateResolver() {

        final ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
        templateResolver.setPrefix("/templates/scripts/");
        templateResolver.setSuffix(".js");
        templateResolver.setTemplateMode(TemplateMode.JAVASCRIPT);
        templateResolver.setCharacterEncoding("utf-8");
        templateResolver.setCacheable(false);
        templateResolver.setCheckExistence(true);

        return templateResolver;
    }
}

Erstellen Sie eine Vorlagendatei

resources/templates/scripts/sample.js

'use strict';

(() => {

    const rawData = [# th:text="${rawData}" /];
    const jsonData = [# th:text="${jsonData}" /]; 

    console.log(rawData);
    console.log(jsonData);

})();

Übergeben Sie zwei Variablen.

Controller-Einstellungen

SampleController.java

@Controller
@RequiredArgsConstructor
public class SampleController {

    private final TemplateEngine scriptTemplateEngine;
    private final ObjectMapper objectMapper;

    @GetMapping(value = "/app.js", produces = "text/javascript")
    @ResponseBody
    public String sample() throws JsonProcessingException {

        String path = "sample";

        Map<String, Object> map = new HashMap<>();
        map.put("id", 1);
        map.put("name", "Takeshi");
        List<Map<String, Object>> list = new ArrayList<>();
        list.add(map);

        Context ctx = new Context();
        ctx.setVariable("rawData", list);
        ctx.setVariable("jsonData", objectMapper.writeValueAsString(list));

        return scriptTemplateEngine.process(path, ctx);
    }
}

Erstellen Sie Daten mit sample (), übergeben Sie die Daten selbst und die in eine JSON-Zeichenfolge konvertierten Daten mit demselben Namen wie der Variablenname an die Prozessmethode und geben Sie sie zurück. Beachten Sie, dass beim Hinzufügen einer Abhängigkeit von thymeleaf-spring5 eine Bean zum automatischen Zurückgeben einer Ansicht mit dem Namen templateEngine erstellt wird. Bei Verwendung der in der Einstellungsdatei erstellten Bean muss DI mit dem zu diesem Zeitpunkt verwendeten Bean-Namen angegeben werden.

Ergebnis

Starten Sie die App und versuchen Sie, auf /app.js zuzugreifen.

Ich konnte es sicher erstellen. Ich denke nicht, dass es viele Möglichkeiten gibt, JS dynamisch zu erstellen, sondern als Referenz.

Es scheint, dass Thymeleaf seit etwa zwei Jahren nicht mehr aktualisiert wurde. Hat die Entwicklung aufgehört?