Spring WebJars 教程

最新推荐文章于 2024-08-15 10:02:53 发布

原创最新推荐文章于 2024-08-15 10:02:53 发布 · 761 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#spring #java #后端

本教程介绍了如何在Spring Web应用程序中利用WebJars集成Semantic-UI，以实现前端界面的美化。通过在pom.xml中添加 Semantic-UI 和 webjars-locator 依赖，配置WebConfig以处理WebJars资源，并在控制器和模板中引用 Semantic-UI CSS，最终创建了一个带有表格展示数据并应用了Semantic-UI样式的主页。

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>

这是主页。

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

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

<table class="ui striped celled table">

CSS 类来自 Semantic-UI 库。

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