Spring WebJars 教程 · ZetCode 中文系列教程

# Spring WebJars 教程 > 原文： [http://zetcode.com/spring/webjars/](http://zetcode.com/spring/webjars/) Spring WebJars 教程展示了如何在 Spring Web 應用中使用 WebJars。 Spring 是用于創建企業應用的流行 Java 應用框架。 ## Webjars WebJars 是打包到 JAR（Java 存檔）文件中的客戶端 Web 庫（例如 jQuery 或 Semantic UI）。 WebJars 使前端庫和資產的工作自動化。 ## Spring WebJar 示例在以下示例中，我們使用 Semantic-UI WebJar。語義 UI 是一種流行的 CSS 框架。 ```java pom.xml src ├───main │ ├───java │ │ └───com │ │ └───zetcode │ │ ├───config │ │ │ MyWebInitializer.java │ │ │ WebConfig.java │ │ └───controller │ │ MyController.java │ └───resources │ │ logback.xml │ └───templates │ index.html └───test └───java ``` 這是項目結構。 `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>WebJarEx</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>11</maven.compiler.source> <maven.compiler.target>11</maven.compiler.target> <spring-version>5.1.4.RELEASE</spring-version> <thymeleaf-version>3.0.11.RELEASE</thymeleaf-version> </properties> <dependencies> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.2.3</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring-version}</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>Semantic-UI</artifactId> <version>2.4.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.34</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> <version>${thymeleaf-version}</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>${thymeleaf-version}</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>3.2.2</version> </plugin> </plugins> </build> </project> ``` 在`pom.xml`中，我們具有項目依賴項。 ```java <dependency> <groupId>org.webjars</groupId> <artifactId>Semantic-UI</artifactId> <version>2.4.1</version> </dependency> ``` 我們使用語義 UI WebJar。 ```java <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.34</version> </dependency> ``` `webjars-locator`允許我們引用資產而不引用資產的版本，該版本會自動檢測到。 `resources/logback.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <configuration> <logger name="org.springframework" level="ERROR"/> <logger name="com.zetcode" level="INFO"/> <appender name="consoleAppender" class="ch.qos.logback.core.ConsoleAppender"> <encoder> <Pattern>%d{HH:mm:ss.SSS} %blue(%-5level) %magenta(%logger{36}) - %msg %n </Pattern> </encoder> </appender> <root> <level value="INFO" /> <appender-ref ref="consoleAppender" /> </root> </configuration> ``` 這是`logback.xml`配置 `com/zetcode/config/MyWebInitializer.java` ```java package com.zetcode.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.context.WebApplicationContext; import org.springframework.web.servlet.DispatcherServlet; import org.springframework.web.servlet.FrameworkServlet; import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer; @Configuration public class MyWebInitializer extends AbstractAnnotationConfigDispatcherServletInitializer { @Override protected Class<?>[] getRootConfigClasses() { return null; } @Override protected Class<?>[] getServletConfigClasses() { return new Class[]{WebConfig.class}; } @Override protected String[] getServletMappings() { return new String[]{"/"}; } } ``` `MyWebInitializer`初始化 Spring Web 應用。它包含一個配置類：`WebConfig`。 `com/zetcode/config/WebConfig.java` ```java package com.zetcode.config; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.ApplicationContext; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.ViewResolver; import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.ViewResolverRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import org.thymeleaf.spring5.SpringTemplateEngine; import org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver; import org.thymeleaf.spring5.view.ThymeleafViewResolver; @Configuration @EnableWebMvc @ComponentScan(basePackages = {"com.zetcode"}) public class WebConfig implements WebMvcConfigurer { @Autowired private ApplicationContext applicationContext; @Bean public SpringResourceTemplateResolver templateResolver() { var templateResolver = new SpringResourceTemplateResolver(); templateResolver.setApplicationContext(applicationContext); templateResolver.setPrefix("classpath:templates/"); templateResolver.setSuffix(".html"); return templateResolver; } @Bean public SpringTemplateEngine templateEngine() { var templateEngine = new SpringTemplateEngine(); templateEngine.setTemplateResolver(templateResolver()); templateEngine.setEnableSpringELCompiler(true); return templateEngine; } @Bean public ViewResolver viewResolver() { var resolver = new ThymeleafViewResolver(); var registry = new ViewResolverRegistry(null, applicationContext); resolver.setTemplateEngine(templateEngine()); registry.viewResolver(resolver); return resolver; } @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/webjars/**") .addResourceLocations("/webjars/").resourceChain(false); } @Override public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) { configurer.enable(); } } ``` `WebConfig`配置 Thymeleaf 模板引擎，告訴 Spring 在哪里尋找 WebJars，并啟用轉發到默認 servlet 來處理靜態資源的功能。 ```java @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/webjars/**") .addResourceLocations("/webjars/").resourceChain(false); } ``` 我們將通過`/webjars/`路徑引用 WebJars。對于版本無關的 WebJars，必須調用`resourceChain()`方法。 `com/zetcode/controller/MyController.java` ```java package com.zetcode.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import java.util.List; @Controller public class MyController { @GetMapping(value = "/") public String home(Model model) { var words = List.of("wood", "star", "cloud", "water", "river", "spring"); model.addAttribute("words", words); return "index"; } } ``` `MyController`包含主頁的一種路由。我們向模板發送一些數據。數據將顯示在 HTML 表中，該表將使用 Semantic-UI 設置樣式。 `resources/templates/index.html` ```java <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Home page</title> <link rel="stylesheet" th:href="@{/webjars/Semantic-UI/semantic.css}"> </head> <body> <section class="ui container"> <h2>English words</h2> <table class="ui striped celled table"> <thead> <tr> <th>Index</th> <th>Word</th> </tr> </thead> <tbody> <tr th:each="word : ${words}"> <td th:text="${wordStat.index + 1}">Index</td> <td th:text="${word}">A word</td> </tr> </tbody> </table> </section> </body> </html> ``` 這是主頁。 ```java <link rel="stylesheet" th:href="@{/webjars/Semantic-UI/semantic.css}"> ``` 我們鏈接到`semantic.css`文件，該文件來自 WebJar。 ```java <table class="ui striped celled table"> ``` CSS 類來自 Semantic-UI 庫。在本教程中，我們創建了一個使用 Semantic-UI WebJar 樣式化 HTML 表的樣式。您可能也對這些相關教程感興趣： [Spring Jetty 教程](/spring/jetty/)， [Spring `@GetMapping`教程](/spring/getmapping/)， [Spring `DefaultServlet`教程](/spring/defaultservlet/)， [Spring Web 應用簡介](/articles/springwebfirst/)和 [Java 教程](/lang/java/)。