streamalism.org

1. סקירה כללית

מדריך זה מציג WebJars וכיצד להשתמש בהם ביישום Java.

במילים פשוטות, WebJars הם תלות בצד הלקוח הנארזים בקבצי ארכיון JAR. הם עובדים עם מרבית מכולות JVM ומסגרות האינטרנט.

הנה כמה WebJars פופולריים: Bootstrap של טוויטר, jQuery, JS זוויתי, Chart.js וכו; רשימה מלאה זמינה באתר הרשמי.

2. מדוע להשתמש ב- WebJars?

לשאלה זו יש תשובה מאוד פשוטה - כי היא קלה.

הוספה וניהול ידנית של תלות בצד הלקוח מביאה לעיתים קרובות לבסיס קוד קשה לתחזוקה.

כמו כן, רוב מפתחי Java מעדיפים להשתמש ב- Maven וב- Gradle ככלי ניהול בנייה ותלות.

הבעיה העיקרית פותרת WebJars היא הפיכת תלות בצד הלקוח לזמינה ב- Maven Central ושמישה בכל פרויקט Maven סטנדרטי.

להלן מספר יתרונות מעניינים של WebJars:

1. אנו יכולים לנהל במפורש ובקלות את התלות בצד הלקוח ביישומי אינטרנט מבוססי JVM
2. אנו יכולים להשתמש בהם בכל כלי בנייה נפוץ, למשל: Maven, Gradle וכו '
3. WebJars מתנהגים כמו כל תלות אחרת של Maven - מה שאומר שאנחנו מקבלים גם תלות מעבר

3. התלות של Maven

בוא נקפוץ לתוכו ונוסיף את Twitter Bootstrap ו- jQuery pom.xml:

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

כעת Twitter Bootstrap ו- jQuery זמינים בנתיב הכיתה של הפרויקט; אנו יכולים פשוט להפנות אליהם ולהשתמש בהם ביישום שלנו.

הערה: באפשרותך לבדוק את הגרסה האחרונה של Bootstrap של Twitter ואת התלות jQuery ב- Maven Central.

4. האפליקציה הפשוטה

עם הגדרת שתי תלות WebJar אלה, בואו נקים פרוייקט Spring MVC פשוט כדי להיות מסוגל להשתמש בתלות בצד הלקוח.

לפני שנגיע לזה, חשוב להבין זאת ל- WebJars אין שום קשר לאביבואנחנו רק משתמשים באביב כאן מכיוון שזו דרך מהירה ופשוטה מאוד להקים פרויקט MVC.

הנה מקום טוב להתחיל בהקמת פרויקט Spring MVC ו- Spring Boot.

ועם הגדרת המקרן הפשוט, נגדיר כמה מיפויים לתלות הלקוחות החדשה שלנו:

@Configuration @EnableWebMvc מחלקה ציבורית WebConfig מיישם את WebMvcConfigurer {@Override public void addResourceHandlers (ResourceHandlerRegistry registry) {registry .addResourceHandler ("/ webjars / **") .addResourceLocations ("/ webjars /"); }}

אנו יכולים לעשות זאת כמובן גם באמצעות XML:

5. תלויות גרסאות אגנוסטיות

בעת שימוש באביב מסגרת גרסה 4.2 ומעלה, הוא יזהה באופן אוטומטי את webjars-locator הספרייה בשביל הכיתה והשתמש בה כדי לפתור אוטומטית את הגירסה של כל נכסי WebJars.

על מנת לאפשר תכונה זו, נוסיף את ה- webjars-locator ספרייה כתלות ביישום:

 org.webjars webjars-locator 0.30 

במקרה זה, אנו יכולים להתייחס לנכסי WebJars מבלי להשתמש בגרסה; ראה חלק הבא עבור כמה דוגמאות בפועל.

6. WebJars על הלקוח

בואו נוסיף דף קבלת פנים פשוט ל- HTML ליישום שלנו (זהו index.html):

  הדגמת WebJars 

כעת אנו יכולים להשתמש ב- Twitter Bootstrap ו- jQuery בפרויקט - בואו נשתמש בשניהם בדף הפתיחה שלנו, החל מ- Bootstrap:

לגישה גרסת אגנוסטית:

הוסף jQuery:

והגישה הגרסא-אגנוסטית:

7. בדיקות

כעת, לאחר שהוספנו את Twitter Bootstrap ו- jQuery בדף ה- HTML שלנו, בואו לבדוק אותם.

נוסיף רצועת אתחול עֵרָנִי לדף שלנו:

הַצלָחָה! זה עובד כמו שציפינו. 

שים לב שכאן נניח הבנה בסיסית של Bootstrap בטוויטר; הנה המדריכים המתחילים לפקיד.

זה יראה עֵרָנִי כפי שמוצג להלן, מה שאומר שהוספנו בהצלחה את מסלול ה- Twitter Bootstrap לשביל הכיתה שלנו.

בואו נשתמש ב- jQuery עכשיו. נוסיף לחצן סגור להתראה זו:

× 

עכשיו אנחנו צריכים להוסיף jQuery ו bootstrap.min.js לפונקציונליות הכפתור הסגור, אז הוסף אותם בתוך תג הגוף index.html, כלהלן:

הערה: אם אתה משתמש בגישה גרסת-אגנוסטית, הקפד להסיר רק את הגרסה מהנתיב, אחרת ייבוא ​​יחסי עשוי שלא לעבוד:

כך אמור להיראות דף הפתיחה הסופי שלנו:

    הדגמת WebJars
× הַצלָחָה! זה עובד כמו שציפינו. 

כך האפליקציה צריכה להיראות. (וההתראה צריכה להיעלם כאשר לוחצים על כפתור הסגירה).

8. מסקנה

במאמר מהיר זה התמקדנו ביסודות השימוש ב- WebJars בפרויקט מבוסס JVM, מה שמקל מאוד על פיתוח ותחזוקה.

יישמנו פרויקט מגובה של Spring Boot והשתמשנו ב- Twitter Bootstrap ו- jQuery בפרויקט שלנו באמצעות WebJars.

את קוד המקור של הדוגמה ששימשנו לעיל ניתן למצוא בפרויקט Github - זהו פרויקט Maven, כך שיהיה קל לייבא ולבנות.