# 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
4.0.0
com.zetcode
WebJarEx
1.0-SNAPSHOT
war
UTF-8
11
11
5.1.4.RELEASE
3.0.11.RELEASE
ch.qos.logback
logback-classic
1.2.3
javax.servlet
javax.servlet-api
4.0.1
provided
org.springframework
spring-webmvc
${spring-version}
org.webjars
Semantic-UI
2.4.1
org.webjars
webjars-locator
0.34
org.thymeleaf
thymeleaf-spring5
${thymeleaf-version}
org.thymeleaf
thymeleaf
${thymeleaf-version}
org.apache.maven.plugins
maven-war-plugin
3.2.2
```
在`pom.xml`中,我们具有项目依赖项。
```java
org.webjars
Semantic-UI
2.4.1
```
我们使用语义 UI WebJar。
```java
org.webjars
webjars-locator
0.34
```
`webjars-locator`允许我们引用资产而不引用资产的版本,该版本会自动检测到。
`resources/logback.xml`
```java
%d{HH:mm:ss.SSS} %blue(%-5level) %magenta(%logger{36}) - %msg %n
```
这是`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
Home page
```
这是主页。
```java
```
我们链接到`semantic.css`文件,该文件来自 WebJar。
```java
```
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/)。