java - Spring Boot Thymeleaf 3 外部 javascript 模板配置

Question

我有一个 Spring Boot 应用程序，它用作 OAuth2 客户端。

我使用 Thymeleaf 3 作为模板引擎。这些是我的 build.gradle 中与 Thymeleaf 3 相关的依赖项。

compile('org.thymeleaf:thymeleaf:3.0.1.RELEASE')
compile('org.thymeleaf:thymeleaf-spring4:3.0.1.RELEASE')
compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.0.4')
compile('org.thymeleaf.extras:thymeleaf-extras-springsecurity4:3.0.1.RELEASE')

如果我像这样引用依赖项没有什么区别:

ext["thymeleaf.version"] = "3.0.2.RELEASE"
ext["thymeleaf-layout-dialect.version"] = "2.1.1"
dependencies {
    compile('org.springframework.boot:spring-boot-starter-thymeleaf')
}

我希望能够使用 Thymeleaf 3 的 HTML 和 Javascript 模板模式。 HTML 模式可以工作，但在 javascript 模式下，messageSource 无法正常工作。

这是我的 WebMvcConfiguration 类:

@Configuration
public class WebMVCConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware {

    private static final String CHARACTER_ENCODING = "UTF-8";
    private ApplicationContext applicationContext;

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        this.applicationContext = applicationContext;
    }

    @Bean
    public ViewResolver htmlViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
        resolver.setContentType("text/html");
        resolver.setCharacterEncoding(CHARACTER_ENCODING);
        resolver.setViewNames(new String[] {"*.html"});
        return resolver;
    }

    @Bean
    public ViewResolver javascriptViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
        resolver.setContentType("application/javascript");
        resolver.setCharacterEncoding(CHARACTER_ENCODING);
        resolver.setViewNames(new String[] {"*.js"});
        return resolver;
    }

    private TemplateEngine templateEngine(ITemplateResolver templateResolver) {
        SpringTemplateEngine engine = new SpringTemplateEngine();
        engine.setTemplateResolver(templateResolver);
        return engine;
    }

    private ITemplateResolver htmlTemplateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setApplicationContext(applicationContext);
        resolver.setPrefix("templates/");
        resolver.setCacheable(false);
        resolver.setTemplateMode(TemplateMode.HTML);
        resolver.setSuffix(".html");
        return resolver;
    }

    public ITemplateResolver javascriptTemplateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setApplicationContext(applicationContext);
        resolver.setPrefix("classpath:/static/js/");
        resolver.setCacheable(false);
        resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
        // resolver.setSuffix(".js");
        return resolver;
    }
}

请注意，我必须在 javascriptTemplateResolver 中使用“classpath:/static/js/”，因为当我仅使用“static/js/”时，出现以下异常:

java.io.FileNotFoundException: Could not open ServletContext resource [/static/js/headerconfig.js]

此外，我还必须注释掉 setSuffix，因为使用它我会得到以下异常:

java.io.FileNotFoundException: class path resource [static/js/typeutils.js.js] cannot be opened because it does not exist

我认为这已经表明了主要问题，但我无法弄清楚可能导致它的原因。

<小时/>

我有一个用于处理 JavaScript 模板的 Controller :

@Controller
public class JavascriptController {

    @RequestMapping(method = RequestMethod.GET, value = "/js/{template}.js")
    public String jsMapping(@PathVariable("template") String template, Model model) {
        model.addAttribute("myAttribute", "Attribute works!");
        return template;
    }
}

我的 messages.properties 文件位于

• src/main/resources/messages.properties
• src/main/resources/messages_hu.properties

<小时/>

我在 src/main/resources/templates/文件夹中有一个 HTML 文件，它引用了一个 javascript 文件，如下所示:

<script th:src="@{js/typeutils.js}"></script>

引用的javascript文件(js/typeutils.js):

var a = [[${myAttribute}]];
var b = [[#{test}]];
console.log(a);
console.log(b);

当我运行应用程序并检查 JavaScript 控制台时，打印出以下内容:

Attribute works!
??test_hu_HU??

因此模型属性已成功传递到 JavaScript 文件，并且已检测到本地化，但未找到“test”消息。 看起来 javascript 模板模式的行为与 HTML 模板模式完全不同。

应该如何修复 javascript 模板模式配置才能使其也处理 messages.properties 文件？

谢谢!

Answer 1

我找到了解决方案(通过查看 thymeleaf 源代码)，这可能并不完美，但它有效!

与 example 不同由 Baeldung 提供，以下内容为我解决了问题:

@Configuration
public class WebMVCConfig implements WebMvcConfigurer, ApplicationContextAware {
    private static final String CHARACTER_ENCODING = "UTF-8";
    private ApplicationContext applicationContext;

    @Override
    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        this.applicationContext = applicationContext;
    }

    @Bean
    public ViewResolver htmlViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine());
        resolver.setContentType("text/html");
        resolver.setCharacterEncoding(CHARACTER_ENCODING);
        resolver.setViewNames(new String[] { "*.html" });
        return resolver;
    }

    @Bean
    public ViewResolver javascriptViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine());
        resolver.setContentType("application/javascript");
        resolver.setCharacterEncoding(CHARACTER_ENCODING);
        resolver.setViewNames(new String[] { "*.js" });
        return resolver;
    }

    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine engine = new SpringTemplateEngine();
        engine.setMessageSource(messageSource());
        engine.addTemplateResolver(htmlTemplateResolver());
        engine.addTemplateResolver(javascriptTemplateResolver());
        return engine;
    }

    private ITemplateResolver htmlTemplateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setOrder(0);
        resolver.setCheckExistence(true);
        resolver.setApplicationContext(applicationContext);
        resolver.setPrefix("classpath:templates/");
        resolver.setCacheable(false);
        resolver.setTemplateMode(TemplateMode.HTML);
        resolver.setSuffix(".html");
        return resolver;
    }

    public ITemplateResolver javascriptTemplateResolver() {
        SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
        resolver.setApplicationContext(applicationContext);
        resolver.setOrder(1);
        resolver.setCheckExistence(true);
        resolver.setPrefix("classpath:/static/js/");
        resolver.setCacheable(false);
        resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
        return resolver;
    }

    @Bean
    public MessageSource messageSource() {
        ResourceBundleMessageSource msgSource = new ResourceBundleMessageSource();
        msgSource.setAlwaysUseMessageFormat(false);
        msgSource.setBasename("messages");
        msgSource.setDefaultEncoding(CHARACTER_ENCODING);
        msgSource.setFallbackToSystemLocale(true);
        msgSource.setUseCodeAsDefaultMessage(false);
        return msgSource;
    }
}

基本上，我们将 templateEngine 设置为一个 bean，以便我们覆盖 ThymeleafDefaultConfiguration 的默认 templateEngine 实现 bean。这意味着每次需要解析模板时，肯定会使用相同的 templateEngine。

我们将 htmlTemplateResolver 的顺序设置为 0，将 javascriptTemplateResolver 的顺序设置为 1，这样我们将首先尝试在 HTML 模板模式下解析每个模板，然后在 Javascript 模式下解析。

同样重要的是，我们将 SpringResourceTemplateResolvers 的 checkExistence 标志设置为 true，因为这样如果找不到模板，我们将尝试使用下一个 TemplateResolver。

此解决方案有一个缺点，即我们将首先尝试在 HTML 模式下解析不必要的 javascript 模板，然后在 JAVASCRIPT 模式下解析，因此在解析 javascript 资源时需要一个额外的步骤。

我会尝试更好地解决问题，但目前，这对我有用。