Spring WebJars 教程

深碍√TFBOYSˉ_ 2023-09-25 13:35 50阅读 0赞

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

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();
        }
    }

配置百里香叶模板引擎，告诉 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>

这是主页。

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

CSS 类来自 Semantic-UI 库。

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