streamalism.org

1. Oversigt

Denne tutorial introducerer WebJars, og hvordan man bruger dem i en Java-applikation.

Kort sagt er WebJars afhængighed af klientsiden pakket i JAR arkivfiler. De arbejder med de fleste JVM-containere og webrammer.

Her er et par populære WebJars: Twitter Bootstrap, jQuery, Vinklet JS, Chart.js etc; en komplet liste er tilgængelig på det officielle websted.

2. Hvorfor bruge WebJars?

Dette spørgsmål har et meget simpelt svar - fordi det er let.

Manuel tilføjelse og administration af afhængighed af klientsiden resulterer ofte i vanskelige at vedligeholde kodebaser.

Også de fleste Java-udviklere foretrækker at bruge Maven og Gradle som værktøjer til styring af opbygning og afhængighed.

Det største problem, som WebJars løser, er at gøre afhængigheder på klientsiden tilgængelige på Maven Central og anvendelige i ethvert standard Maven-projekt.

Her er et par interessante fordele ved WebJars:

1. Vi kan eksplicit og let styre afhængigheden af ​​klientsiden i JVM-baserede webapplikationer
2. Vi kan bruge dem med ethvert almindeligt anvendt byggeværktøj, f.eks .: Maven, Gradle osv
3. WebJars opfører sig som enhver anden Maven-afhængighed - hvilket betyder, at vi også får transitive afhængigheder

3. Maven-afhængigheden

Lad os hoppe lige ind i det og tilføje Twitter Bootstrap og jQuery til pom.xml:

 org.webjars bootstrap 3.3.7-1 org.webjars jquery 3.1.1 

Nu er Twitter Bootstrap og jQuery tilgængelige på projektets klassesti; vi kan simpelthen henvise til dem og bruge dem i vores applikation.

Bemærk: Du kan kontrollere den nyeste version af Twitter Bootstrap og jQuery-afhængigheder på Maven Central.

4. Den enkle app

Med disse to WebJar-afhængigheder defineret, lad os nu oprette et simpelt Spring MVC-projekt for at kunne bruge klientsides afhængigheder.

Før vi dog kommer til det, er det vigtigt at forstå det WebJars har intet at gøre med Spring, og vi bruger kun Spring her, fordi det er en meget hurtig og enkel måde at oprette et MVC-projekt på.

Her er et godt sted at begynde at oprette Spring MVC og Spring Boot-projektet.

Og med det enkle opsætning af projet definerer vi nogle tilknytninger til vores nye klientafhængigheder:

@Configuration @EnableWebMvc public class WebConfig implementerer WebMvcConfigurer {@Override public void addResourceHandlers (ResourceHandlerRegistry registry) {registry .addResourceHandler ("/ webjars / **") .addResourceLocations ("/ webjars /"); }}

Det kan vi selvfølgelig også gøre via XML:

5. Version-agnostiske afhængigheder

Når du bruger Spring Framework version 4.2 eller nyere, registrerer den automatisk webjars-locator bibliotek på klassestien og brug det til automatisk at løse versionen af ​​eventuelle WebJars-aktiver.

For at aktivere denne funktion tilføjer vi webjars-locator bibliotek som en afhængighed af applikationen:

 org.webjars webjars-locator 0.30 

I dette tilfælde kan vi henvise til WebJars-aktiverne uden at bruge versionen; se næste afsnit for et par faktiske eksempler.

6. WebJars på klienten

Lad os tilføje en simpel almindelig HTML-velkomstside til vores applikation (dette er index.html):

  WebJars-demo 

Nu kan vi bruge Twitter Bootstrap og jQuery i projektet - lad os bruge begge dele på vores velkomstside startende med Bootstrap:

For en version-agnostisk tilgang:

Tilføj jQuery:

Og den version-agnostiske tilgang:

7. Testning

Nu hvor vi har tilføjet Twitter Bootstrap og jQuery på vores HTML-side, lad os teste dem.

Vi tilføjer en bootstrap alert ind på vores side:

Succes! Det fungerer som vi forventede. 

Bemærk, at der antages en vis grundlæggende forståelse af Twitter Bootstrap; her er startvejledningerne til den officielle.

Dette viser en alert som vist nedenfor, hvilket betyder, at vi med succes har tilføjet Twitter Bootstrap til vores klassesti.

Lad os bruge jQuery nu. Vi tilføjer en luk-knap til denne alarm:

× 

Nu skal vi tilføje jQuery og bootstrap.min.js for lukningsknapfunktionalitet, så tilføj dem inden i body tag af index.html, som nedenfor:

Bemærk: Hvis du bruger version-agnostisk tilgang, skal du kun fjerne versionen fra stien, ellers fungerer relativ import muligvis ikke:

Sådan skal vores sidste velkomstside se ud:

    WebJars-demo
× Succes! Det fungerer som vi forventede. 

Sådan skal applikationen se ud. (Og advarslen skal forsvinde, når du klikker på luk-knappen.)

8. Konklusion

I denne hurtige artikel fokuserede vi på det grundlæggende ved at bruge WebJars i et JVM-baseret projekt, hvilket gør udvikling og vedligeholdelse meget lettere.

Vi implementerede et Spring Boot-støttet projekt og brugte Twitter Bootstrap og jQuery i vores projekt ved hjælp af WebJars.

Kildekoden til det ovennævnte eksempel kan findes i Github-projektet - dette er et Maven-projekt, så det skal være let at importere og bygge.