Spring WebJars 教程

Spring WebJars 教程展示了如何在 Spring Web 应用程序中使用 WebJar。

Spring是一个流行的Java应用程序框架，用于创建企业应用。

Webjars

WebJars是打包的客户端Web库（例如jQuery或Semantic UI）到 JAR（Java 存档）文件中。WebJars 自动化前端工作库和资源。

Spring WebJar 示例

在下面的示例中，我们使用 Semantic-UI WebJar。语义UI是一种流行的 CSS 框架。

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

<?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>17</maven.compiler.source><maven.compiler.target>17</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.4.0</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.3.2</version></plugin></plugins></build>
</project>

在pom.xml我们有项目依赖项。

<dependency><groupId>org.webjars</groupId><artifactId>Semantic-UI</artifactId><version>2.4.1</version>
</dependency>

我们使用Semantic-UI WebJar。

<dependency><groupId>org.webjars</groupId><artifactId>webjars-locator</artifactId><version>0.34</version>
</dependency>

webjars-locator允许我们直接不带版本号引用资产，自动检测引用的资产版本。

resources/logback.xml

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

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 extendsAbstractAnnotationConfigDispatcherServletInitializer {@Overrideprotected Class<?>[] getRootConfigClasses() {return null;}@Overrideprotected Class<?>[] getServletConfigClasses() {return new Class[]{WebConfig.class};}@Overrideprotected String[] getServletMappings() {return new String[]{"/"};}
}

MyWebInitializer初始化 Spring Web 应用程序。它包含一个配置类：。WebConfig

com/zetcode/config/WebConfig.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 {@Autowiredprivate ApplicationContext applicationContext;@Beanpublic SpringResourceTemplateResolver templateResolver() {var templateResolver = new SpringResourceTemplateResolver();templateResolver.setApplicationContext(applicationContext);templateResolver.setPrefix("classpath:templates/");templateResolver.setSuffix(".html");return templateResolver;}@Beanpublic SpringTemplateEngine templateEngine() {var templateEngine = new SpringTemplateEngine();templateEngine.setTemplateResolver(templateResolver());templateEngine.setEnableSpringELCompiler(true);return templateEngine;}@Beanpublic ViewResolver viewResolver() {var resolver = new ThymeleafViewResolver();var registry = new ViewResolverRegistry(null, applicationContext);resolver.setTemplateEngine(templateEngine());registry.viewResolver(resolver);return resolver;}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/").resourceChain(false);}@Overridepublic void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {configurer.enable();}
}

配置百里香叶模板引擎，告诉 Spring 在哪里查找 WebJars 并启用转发到默认 servlet 用于处理静态资源。WebConfig

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/").resourceChain(false);
}

我们将通过路径引用WebJars。必须为版本无关而调用该方法网络罐子。/webjars/resourceChain

com/zetcode/controller/MyController.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 表格的形式呈现，该表格将使用语义 UI 设置样式。

resources/templates/index.html

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

这是主页。

<link rel="stylesheet" th:href="@{/webjars/Semantic-UI/semantic.css}">

我们链接到来自WebJar的文件。semantic.css

<table class="ui striped celled table">

CSS 类来自 Semantic-UI 库。

在本教程中，我们创建了一个语义UIWebJar来设置HTML样式。桌子。