TOC

Einführung in WebJars

Einführung in WebJars

1. Überblick

In diesem Lernprogramm werden WebJars und ihre Verwendung in einer Java-Anwendung vorgestellt.

Einfach ausgedrückt sind WebJars clientseitige Abhängigkeiten, die in JAR-Archivdateien gepackt sind. Sie funktionieren mit den meisten JVM-Containern und Webframeworks.

Hier sind einige beliebte WebJars:Twitter Bootstrap,jQuery,Angular JS,Chart.js usw.; Eine vollständige Liste ist fürofficial website verfügbar.

2. Warum WebJars verwenden?

Diese Frage hat eine sehr einfache Antwort - weil es einfach ist.

Manually adding and managing client side dependencies often results in difficult to maintain codebases.

Außerdem bevorzugen die meisten Java-Entwickler die Verwendung von Maven und Gradle als Tools für das Build- und Abhängigkeitsmanagement.

Das Hauptproblem, das WebJars löst, besteht darin, clientseitige Abhängigkeiten für Maven Central verfügbar zu machen und in jedem Standard-Maven-Projekt zu verwenden.

Hier sind einige interessante Vorteile von WebJars:

  1. Wir können die clientseitigen Abhängigkeiten in JVM-basierten Webanwendungen explizit und einfach verwalten

  2. Wir können sie mit jedem gängigen Build - Tool verwenden, z. B. Maven, Gradle usw

  3. WebJars verhalten sich wie alle anderen Maven-Abhängigkeiten. Das bedeutet, dass wir auch transitive Abhängigkeiten erhalten

3. Die Maven-Abhängigkeit

Lassen Sie uns direkt hineinspringen undpom.xml Twitter Bootstrap und jQuery hinzufügen: __ 


    org.webjars
    bootstrap
    3.3.7-1


    org.webjars
    jquery
    3.1.1

Jetzt sind Twitter Bootstrap und jQuery im Projektklassenpfad verfügbar. Wir können sie einfach referenzieren und in unserer Anwendung verwenden.

Hinweis: Sie können die neueste Version der AbhängigkeitenTwitter Bootstrap undjQuery von Maven Central überprüfen.

4. Die einfache App

Nachdem diese beiden WebJar-Abhängigkeiten definiert wurden, richten wir nun ein einfaches Spring MVC-Projekt ein, um die clientseitigen Abhängigkeiten verwenden zu können.

Bevor wir jedoch dazu kommen, ist es wichtig, dieseWebJars have nothing to do with Spring zu verstehen, und wir verwenden hier nur Spring, da dies eine sehr schnelle und einfache Möglichkeit ist, ein MVC-Projekt einzurichten.

Here’s a good place to start, um das Spring MVC- und Spring Boot-Projekt einzurichten.

Mit der einfachen Einrichtung des Projekts definieren wir einige Zuordnungen für unsere neuen Client-Abhängigkeiten: 

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

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

Das können wir natürlich auch per XML machen:

5. Versionsunabhängige Abhängigkeiten

Bei Verwendung von Spring Framework Version 4.2 oder höher wird die Bibliothekwebjars-locatorim Klassenpfad automatisch erkannt und zum automatischen Auflösen der Version aller WebJars-Assets verwendet.

Um diese Funktion zu aktivieren, fügen wir diewebjars-locator-Bibliothek als Abhängigkeit von der Anwendung hinzu: 


    org.webjars
    webjars-locator
    0.30

In diesem Fall können wir auf die WebJars-Assets verweisen, ohne die Version zu verwenden. Im nächsten Abschnitt finden Sie einige aktuelle Beispiele.

6. WebJars auf dem Client

Fügen wir unserer Anwendung eine einfache HTML-Begrüßungsseite hinzu (dies istindex.html): 


    
        WebJars Demo

Jetzt können wir Twitter Bootstrap und jQuery im Projekt verwenden. Verwenden wir beide auf unserer Begrüßungsseite, beginnend mit Bootstrap:

Für einen versionsunabhängigen Ansatz:

JQuery hinzufügen:

Und der versionsunabhängige Ansatz:

7. Testen

Nachdem wir Twitter Bootstrap und jQuery zu unserer HTML-Seite hinzugefügt haben, testen wir sie.

Wir fügen unserer Seite einen Bootstrapalert hinzu: 



    

        Success! It is working as we expected.

Beachten Sie, dass hier ein grundlegendes Verständnis von Twitter Bootstrap vorausgesetzt wird. Hier sind diegetting started guidesauf dem Beamten.

Dies zeigt einalert wie unten gezeigt an, was bedeutet, dass wir Twitter Bootstrap erfolgreich zu unserem Klassenpfad hinzugefügt haben.

Verwenden wir jetzt jQuery. Wir fügen dieser Warnung eine Schaltfläche zum Schließen hinzu: 

×

Jetzt müssen wirjQuery undbootstrap.min.js für die Funktion zum Schließen der Schaltfläche hinzufügen. Fügen Sie sie also wie folgt in das Body-Tag vonindex.html, ein:

Hinweis: Wenn Sie einen versionsunabhängigen Ansatz verwenden, müssen Sie sicherstellen, dass nur die Version aus dem Pfad entfernt wird. Andernfalls funktionieren relative Importe möglicherweise nicht:

So sollte unsere letzte Begrüßungsseite aussehen: 


    
        
        
        WebJars Demo
        
    
    
        


            

                ×
                Success! It is working as we expected.

So sollte die Anwendung aussehen. (Und die Warnung sollte verschwinden, wenn Sie auf die Schaltfläche "Schließen" klicken.)

webjarsdemo

8. Fazit

In diesem kurzen Artikel haben wir uns auf die Grundlagen der Verwendung von WebJars in einem JVM-basierten Projekt konzentriert, was die Entwicklung und Wartung erheblich vereinfacht.

Wir haben ein von Spring Boot unterstütztes Projekt implementiert und Twitter Bootstrap und jQuery in unserem Projekt mithilfe von WebJars verwendet.

Der Quellcode des oben verwendeten Beispiels befindet sich inGithub project - dies ist ein Maven-Projekt, daher sollte es einfach zu importieren und zu erstellen sein.

Related