streamalism.org

1. Oversikt

Denne opplæringen introduserer WebJars og hvordan du bruker dem i et Java-program.

Enkelt sagt er WebJars avhengighet på klientsiden pakket i JAR-arkivfiler. De jobber med de fleste JVM-containere og nettrammer.

Her er noen populære WebJars: Twitter Bootstrap, jQuery, Kantet JS, Chart.js etc; en full liste er tilgjengelig på den offisielle nettsiden.

2. Hvorfor bruke WebJars?

Dette spørsmålet har et veldig enkelt svar - fordi det er enkelt.

Å legge til og administrere avhengigheter på klientsiden manuelt resulterer ofte i vanskelige å vedlikeholde kodebaser.

Også de fleste Java-utviklere foretrekker å bruke Maven og Gradle som verktøy for bygging og avhengighetsadministrasjon.

Det største problemet WebJars løser er å gjøre avhengigheter på klientsiden tilgjengelig på Maven Central og brukbare i ethvert standard Maven-prosjekt.

Her er noen interessante fordeler med WebJars:

1. Vi kan eksplisitt og enkelt administrere avhengighet av klientsiden i JVM-baserte webapplikasjoner
2. Vi kan bruke dem med ethvert vanlig brukt verktøy, for eksempel: Maven, Gradle, etc.
3. WebJars oppfører seg som enhver annen Maven-avhengighet - noe som betyr at vi også får transitive avhengigheter

3. Maven-avhengigheten

La oss hoppe rett inn i det og legge til Twitter Bootstrap og jQuery til pom.xml:

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

Nå er Twitter Bootstrap og jQuery tilgjengelig på prosjektets klassesti; vi kan ganske enkelt referere til dem og bruke dem i applikasjonen vår.

Merk: Du kan sjekke den nyeste versjonen av Twitter Bootstrap og jQuery-avhengighetene på Maven Central.

4. Den enkle appen

Med disse to WebJar-avhengighetene definert, la oss nå sette opp et enkelt Spring MVC-prosjekt for å kunne bruke klientavhengighetene.

Før vi kommer til det, er det imidlertid viktig å forstå det WebJars har ingenting med våren å gjøre, og vi bruker bare Spring her fordi det er en veldig rask og enkel måte å sette opp et MVC-prosjekt.

Her er et godt sted å begynne å sette opp Spring MVC og Spring Boot-prosjektet.

Og med det enkle prosjektoppsettet, definerer vi noen kartlegginger for våre nye klientavhengigheter:

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

Vi kan selvfølgelig også gjøre det via XML:

5. Versjonsagnostiske avhengigheter

Når du bruker Spring Framework versjon 4.2 eller nyere, vil den automatisk oppdage webjars-locator biblioteket på klassestien og bruke den til automatisk å løse versjonen av eventuelle WebJars-ressurser.

For å aktivere denne funksjonen, legger vi til webjars-locator bibliotek som en avhengighet av applikasjonen:

 org.webjars webjars-locator 0.30 

I dette tilfellet kan vi referere til WebJars-eiendelene uten å bruke versjonen; se neste avsnitt for noen faktiske eksempler.

6. WebJars på klienten

La oss legge til en enkel vanlig HTML-velkomstside i applikasjonen vår (dette er index.html):

  WebJars Demo 

Nå kan vi bruke Twitter Bootstrap og jQuery i prosjektet - la oss bruke begge på vår velkomstside, og starter med Bootstrap:

For en versjonsagnostisk tilnærming:

Legg til jQuery:

Og den versjonsagnostiske tilnærmingen:

7. Testing

Nå som vi har lagt til Twitter Bootstrap og jQuery på HTML-siden vår, la oss teste dem.

Vi legger til en bootstrap varsling inn på siden vår:

Suksess! Det fungerer som vi forventet. 

Vær oppmerksom på at noen grunnleggende forståelse av Twitter Bootstrap antas her; her er startveiledningene for den offisielle.

Dette vil vise en varsling som vist nedenfor, noe som betyr at vi har lagt til Twitter Bootstrap til klassestien vår.

La oss bruke jQuery nå. Vi legger til en lukkeknapp i dette varselet:

× 

Nå må vi legge til jQuery og bootstrap.min.js for lukkeknappfunksjonaliteten, så legg dem til i body tag av index.html, som Nedenfor:

Merk: Hvis du bruker versjon-agnostisk tilnærming, må du bare fjerne versjonen fra banen, ellers kan det hende at relativ import ikke fungerer:

Slik skal vår siste velkomstside se ut:

    WebJars Demo
× Suksess! Det fungerer som vi forventet. 

Slik skal applikasjonen se ut. (Og varselet skal forsvinne når du klikker på lukkeknappen.)

8. Konklusjon

I denne raske artikkelen fokuserte vi på det grunnleggende om å bruke WebJars i et JVM-basert prosjekt, noe som gjør utvikling og vedlikehold mye enklere.

Vi implementerte et Spring Boot-støttet prosjekt og brukte Twitter Bootstrap og jQuery i prosjektet vårt ved hjelp av WebJars.

Kildekoden til det ovenfor brukte eksemplet finnes i Github-prosjektet - dette er et Maven-prosjekt, så det skal være enkelt å importere og bygge.