JavaRush /בלוג Java /Random-HE /היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD ה...

רָמָה

28 February 2021
43 views
0 comments

היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון (חלק 4)

אחר הצהריים טובים. במאמר זה אני רוצה לשתף את המפגש הראשון שלי עם דברים כמו Maven, Spring, Hibernate, MySQL ו- Tomcat בתהליך של יצירת יישום CRUD פשוט. זה החלק האחרון. המאמר מיועד בעיקר למי שכבר השלים 30-40 רמות כאן, אבל עדיין לא יצאו מעבר לג'אווה הטהורה ורק מתחילים (או עומדים להתחיל) להיכנס לעולם הפתוח עם כל הטכנולוגיות, המסגרות והשאר הלא מוכרים האלה מילים. זהו החלק הרביעי האחרון של המאמר "מבוא ל-Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון." ניתן לראות את החלקים הקודמים בקישורים:

תוֹכֶן:

משאבי עיצוב ואינטרנט

האפליקציה שלנו עובדת, אבל אתה לא יכול להסתכל עליה בלי דמעות, כתובות משעממות, קישורים מכוערים, רקע לבן ריק. אנחנו צריכים לתקן את זה ולהוסיף יפות שונות. איך אנחנו עושים את זה? ובכן, קודם כל, אתה יכול פשוט לשחק עם הדפים ולעשות כל מיני דברים באמצעות היכולות של HTML . אבל אם תנסה לשנות רקעים, צבעים, גדלים, סידור אלמנטים וכו' באמצעות HTML בלבד. וכולי. ואז בסופו של דבר אתה יכול לעשות כזה בלגן מהדף שאתה לא יכול להבחין שם שום דבר אחר כך. וחוץ מזה, אפשרויות העיצוב של HTML מוגבלות למדי. עדיף להשתמש ב-CSS (Cascading Style Sheets) בשביל זה . לאחר מכן ניתן לאסוף את כל מה שקשור לעיצוב במקום אחד, ולאחר מכן ליישם אותו על האלמנט הרצוי בדף. ניתן לכתוב קוד CSS ישירות בעמוד ה-JSP בתגית מיוחדת, אבל הרבה יותר נוח לשים אותו בקובץ נפרד, ואז פשוט להחיל אותו על הדפים הדרושים. כדי למקם קבצים עם סגנונות ומשאבי אינטרנט סטטיים אחרים, ניצור ספרייה נפרדת בתוך webapp . כדי לא לבלבל בין משאבי אינטרנט למשאבים רגילים (שם יש לנו db.properties ), בואו פשוט נקרא לספרייה הזו res ונמקם שם את כל קבצי ה-CSS, התמונות וכו':

היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון (חלק 4) - 1

כדי להשתמש בקבצים אלו עלינו לציין את מיקומם בתצורה. בוא נלך לכיתה שלנו WebConfig. בעבר, השתמשנו בהערה @EnableWebMvcכדי לא להגדיר שום דבר, אלא פשוט להשתמש בתצורת ברירת המחדל. אבל עכשיו יש צורך להגדיר משהו. לשם כך, אנו משתמשים בממשק WebMvcConfigurer, המאפשר לך לעקוף את שיטות התצורה. זֶה. אנחנו יכולים להשתמש בתצורת ברירת המחדל, אבל באותו הזמן להתאים לעצמנו כמה היבטים. במקרה זה addResourceHandlers, אנו זקוקים לשיטה שבה אנו מציינים את המיקום של משאבי אינטרנט סטטיים. ליתר בטחון, כל הכיתה בסופו של דבר נראית כך:

package testgroup.filmography.config;

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.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "testgroup.filmography")
public class WebConfig implements WebMvcConfigurer {

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

    @Bean
    ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/pages/");
        viewResolver.setSuffix(".jsp");
        return viewResolver;
    }
}

כעת כדי להשתמש ב-CSS שלנו בדף, עליך לקשר אליו בתוך התג head:

<head>
    <link href="<c:url value="/res/style.css"/>" rel="stylesheet" type="text/css"/>
</head>

פשוט הוסף את השורה הזו וצור, למשל, את קובץ ה-CSS הפשוט הזה:

table {
    border-spacing: 0 10px;
    font:  bold 100% Georgia, serif;
    margin: 40px auto;
    text-shadow: 5px 5px 5px #3F3F7F;
    background: #B1B9D9;
    text-align: center;
    vertical-align: middle;
    width: 50%;
    border: 10px solid blue;
}

וזה ישנה לחלוטין את הטבלה שלנו (זה נראה מטופש, כמובן, אבל זה ככה, למשל): היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון (חלק 4) - 2

ובכן, אני חושב שאין צורך לדבר בפירוט על CSS, הכל די פשוט. באינטרנט ניתן למצוא הרבה אפשרויות מוכנות לעיצוב טבלאות וטפסים. אבל עדיף, כמובן, לעשות את העיצוב בעצמך, אתה לא צריך להיות מעצב, אחרי הכל, זה לא סוג של אתר מסובך. גם כמה שעות לאחר ההיכרות הראשונה יספיקו כדי ליצור עיצוב יפה ומסודר למדי לדף כל כך פשוט. בנוסף, האינטרנט מלא בכל מיני שיעורים, דוגמאות, יש אתרים מיוחדים שבהם ניתן לערוך בו זמנית HTML, CSS על מסך אחד ומיד לראות איך הכל נראה. עם קצת תרגול אתה יכול ליצור אמנות אמיתית. נכון, גם כאן לא צריך להיסחף יותר מדי (אלא אם כן, כמובן, יש לך תוכניות להיות מעצבים), אחרת עיצוב זה דבר כזה, אתה יכול להיתקע כאן הרבה מאוד זמן. כשהתחלתי להבין CSS, נתקעתי. רציתי לנסות הכל, כל נכס, עיוותי משהו, התעסקתי בו, התנסיתי, לקחתי דפים של כמה אתרים ויצרתי אותם מחדש ללא הכר. כנראה היה לי כיף עם הצעצוע הזה במשך שבוע, בלי לעשות שום דבר אחר, עד שהוא שחרר אותי :) ובכן, באופן כללי, כמובן, לא צריך להגזים ולעשות נס צבעוני לא מובן, צריך לעשות את זה בפשטות ו בטוב טעם. הדבר היחיד ששווה לציין. אתה צריך להבין ש- CSS הוא תיאור של עיצוב , ו- HTML הוא סימון . אתה לא צריך לנסות לעשות הכל דרך CSS; חלק מההיבטים יהיו קשים מאוד לביצוע, וחלקם פשוט בלתי אפשריים, כאשר ב-HTML זה נעשה עם כמה שורות נוספות, או אפילו רק תכונה אחת בתג. אתה צריך לשלב אותם, ליצור כל מיני צבעים, רקעים, גופנים ב-CSS, ואם, למשל, אתה צריך לשלב כמה תאי טבלה, קל יותר להשתמש בכלי HTML. ובכן, למשל, הנה מה שהצלחתי לעשות עם הדפים בכמה שעות של התעסקות עם CSS ו-HTML (לא אפרט כאן על הבלגן שעשיתי כדי להשיג זאת, בסוף יהיה קישור ל-GitHub של הפרויקט הזה שבו אתה יכול להסתכל): Знакомство с Maven, Spring, MySQL, Hibernate и первое CRUD приложение (часть 4) - 3

Знакомство с Maven, Spring, MySQL, Hibernate и первое CRUD приложение (часть 4) - 3

כמובן, אני לא יודע באיזו מיומנות עשיתי הכל שם, אבל בהתחשב בכך שראיתי CSS לראשונה שבוע לפני, אני חושב שזה יצא די טוב.

דִפּוּף

עכשיו הכל עובד, זה נראה טוב, אבל יש רק כמה שיאים בטבלה עד כה. מה אם יש בו מאה סרטים, או אלף? זה לא מאוד נוח לגלול ברשימה כל כך ארוכה. זה הרבה יותר נוח כאשר הרשימה מוצגת בעמודים של 10 ערכים, למשל. לכן, כעת ננסה ליישם את פיצול הרשימה לדפים (לעיתים זה נקרא גם "Paging" או "Pagination" ( באנגלית pagetion )). זה יכול להיעשות בדרכים שונות. לדוגמה, ניתן להעביר את הרשימה המלאה לעמוד jsp וליצור שם טבלה למספר הרשומות הנדרש. או שאתה יכול, למשל, לשלוף את הרשומות הנדרשות מהרשימה הכללית בשירות, ולאחר מכן לשלוח את המיני רשימה הזו לדף jsp להצגה. אבל עדיף, כמובן, לעשות זאת ברמת מסד הנתונים. הרעיון הוא לא לקחת רשימה שלמה ממסד הנתונים ואז לפרק אותה לחתיכות, אלא בהתחלה לקבל את החתיכה הנדרשת מהמסד מבלי לגעת בכל השאר. אחרי הכל, למה אנחנו צריכים לשלוף את כל מאות או אלפי הרשומות ממסד הנתונים בבת אחת, אם זה שאנחנו צריכים נמצא בעשירייה הראשונה, עדיף לשלוף רק את העשר הזה. נעבור ל- DAO ונוסיף allFilmsפרמטר למתודה int page, שיהיה אחראי על מספר העמוד (בשירות, כמובן, נעשה אותו הדבר). ובואו נשנה מעט את היישום של השיטה הזו; אם קודם שלפנו את הרשימה כולה, כעת נשלוף רק חלק. setFirstResultהשיטות (באיזו שורה בטבלה להתחיל) ו- setMaxResults(כמה רשומות להציג) יעזרו לנו בכך :

@SuppressWarnings("unchecked")
public List<Film> allFilms(int page) {
    Session session = sessionFactory.getCurrentSession();
    return session.createQuery("from Film").setFirstResult(10 * (page - 1)).setMaxResults(10).list();
}

הָהֵן. אם זה העמוד הראשון, אנו מציגים מקסימום 10 רשומות, החל מה-0; אם זה העמוד ה-5, אז 10 רשומות החל מה-40 (אל תשכח שהמספור במסד הנתונים מתחיל מ-0). כמו כן, ניצור בנוסף שיטה שתחזיר את מספר הרשומות בטבלה. נצטרך את זה כדי לדעת את מספר כל הדפים וליצור עבורם קישורים בדף ה-jsp שלנו:

public int filmsCount() {
     Session session = sessionFactory.getCurrentSession();
     return session.createQuery("select count(*) from Film", Number.class).getSingleResult().intValue();
 }

באמצעות שאילתה כזו, נקבל את מספר כל הרשומות בטבלה (כערך int) מבלי לשלוף את הרשומות עצמן. כעת נעבור לבקר ונעבוד על השיטה שמחזירה את העמוד הראשי עם רשימת סרטים:

@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView allFilms(@RequestParam(defaultValue = "1") int page) {
    List&ltFilm> films = filmService.allFilms(page);
    int filmsCount = filmService.filmsCount();
    int pagesCount = (filmsCount + 9)/10;
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("films");
    modelAndView.addObject("page", page);
    modelAndView.addObject("filmsList", films);
    modelAndView.addObject("filmsCount", filmsCount);
    modelAndView.addObject("pagesCount", pagesCount);
    return modelAndView;
}

כאן הופיעה הערה חדשה @RequestParam, המעידה על כך שאנו מקבלים את הערך הזה מפרמטר בקשה. כעת, אם נלך לכתובת עם פרמטר, למשל http://localhost:8080/ ?page=4 , נקבל, בהתאם, את העמוד הרביעי. אנו מגדירים את ערך ברירת המחדל ל- " 1 " כך שכאשר האפליקציה מתחילה, כאשר אנו הולכים לכתובת ללא הפרמטר http://localhost:8080/ , נקבל את העמוד הראשון. בשיטה אנו מקבלים את מספר כל הרשומות, ואז בצורה פשוטה זו אנו מחשבים את מספר העמודים. הָהֵן. אם יש לנו 10 רשומות, זה עמוד אחד, ואם יש 11, אז זה כבר 2. ובכן, אנחנו מעבירים את כל העניין הזה למודל. אתה צריך לדעת את מספר העמודים כדי ליצור קישורים לכולם במחזור, ולתת למספר הסרטים להיות שם למקרה, למשל, אם אתה רוצה להציג את המידע הזה איפשהו בעמוד. כעת כל מה שנותר הוא לעבור אל films.jsp ולהוסיף קישורים לכל עמוד באמצעות המבנה הזה:

<c:forEach begin="1" end="${pagesCount}" step="1" varStatus="i">
    <c:url value="/" var="url">
        <c:param name="page" value="${i.index}"/>
    </c:url>
    <a href="${url}">${i.index}</a>
</c:forEach>

אנו יוצרים קישורים לפי מונה 1, 2, 3, ... ומגדירים את הפרמטר לפי ערך האינדקס.

אגב, באותו אופן כמו עם עימוד, ניתן להוסיף פיצ'רים נוספים כמו מיון, סינון וחיפוש. אנו פשוט מעבירים פרמטרים שונים לשיטת DAO ויוצרים באמצעותם שאילתה מתאימה למסד הנתונים על מנת לשלוף את הרשומות הנדרשות לפי הסדר הנדרש.

בואו נוסיף עוד נגיעה קטנה אחת. אנחנו חוזרים לבקר. בשיטות הוספה, עריכה ומחיקה, לאחר השלמת הפעולה, אנו מפנים לעמוד הראשי "redirect:/" . זֶה. אם אנחנו נמצאים איפשהו בעמוד ה-50 ונלחץ על ערוך ערך, אז לאחר הביצוע נעבור לכתובת " / ", כלומר. נחזור לעמוד 1. זה לא מאוד נוח, אני רוצה לחזור למקום שממנו באנו. בואו נפתור את זה בפשטות רבה. FilmControllerבואו ניצור משתנה מופע במחלקהint page

private int page;

בתוך השיטה allFilmsנקצה את הערך של הפרמטר למשתנה זה page:

this.page = page;

זֶה. בכל פעם שמתבצעת שיטה זו (כלומר כאשר אנו מנווטים בין דפים), הערך של העמוד הנוכחי ייכתב למשתנה. ואז אנחנו משתמשים בערך הזה בשיטות שלנו כדי להפנות חזרה לאותו עמוד.

modelAndView.setViewName("redirect:/?page=" + this.page);

סיכום

כנראה נסיים כאן. התוצאה היא יישום CRUD מן המניין. זה בהחלט רחוק מלהיות אידיאלי (רחוק מאוד), אבל אפשר לייעל ולשפר, לתקן באגים ולהוסיף פונקציונליות. אתה יכול להשתמש בשיטות מובנות לפעולות גסות; להוסיף סינון, חיפוש, מיון; הוסף טבלאות קשורות אחרות; ליישם תמיכה עבור משתמשים שונים עם הרשאות ואימות וכו'. וכולי. מרחב הדמיון הוא בלתי מוגבל, אז לכו על זה. קישור ל-github של פרויקט זה . תודה לך על תשומת הלב. נ.ב. זה הניסיון הראשון שלי בחיים לכתוב מאמר, אז אל תשפוט בקפדנות :). אני מתנצל על כך שלא הוספתי קישורים שונים למשאבים שימושיים; למרבה הצער, אני עדיין לא מצליח לפתח את ההרגל לשמור קישורים למקורות שמהם אני מקבל מידע. וכמובן, אני מתנצל על המכתבים הרבים, קיצור זה לא הכישרון שלי, אני מקווה שמישהו יוכל להתמודד עם זה. קישורים לכל החלקים

היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון (חלק 1)
היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון (חלק 2)
היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון (חלק 3)
היכרות עם Maven, Spring, MySQL, Hibernate ויישום ה-CRUD הראשון (חלק 4)

הערות

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION