Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (4-бөлім)

Қайырлы күн. Бұл мақалада мен қарапайым CRUD қосымшасын жасау процесінде Maven, Spring, Hibernate, MySQL және Tomcat сияқты нәрселермен алғашқы кездесуіммен бөліскім келеді. Бұл соңғы бөлім. Мақала, ең алдымен, мұнда 30-40 деңгейді аяқтаған, бірақ әлі таза Java-дан асып кетпеген және барлық осы технологиялармен, фреймворктермен және басқа да бейтаныс сөздермен ашық әлемге енді ғана кіре бастағандарға (немесе бастағалы тұрғандарға) арналған. . Бұл «Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе» мақаласының соңғы төртінші бөлігі. Алдыңғы бөлімдерді мына сілтемелер арқылы көруге болады:

• Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (1 бөлім)
• Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (2 бөлім)
• Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (3 бөлім)

Мазмұны:

• Дизайн және веб-ресурстар
• Беттеу
• Қорытынды

Дизайн және веб-ресурстар

Біздің қолданба жұмыс істейді, бірақ сіз оны көз жассыз, қызықсыз жазуларсыз, жағымсыз сілтемелерсіз, бос ақ фонсыз қарай алмайсыз. Осыны жөндеп, түрлі сұлулықтарды қосуымыз керек. Мұны қалай істейміз? Біріншіден, сіз HTML мүмкіндіктерін пайдалана отырып, жай ғана беттермен ойнай аласыз және барлық нәрселерді жасай аласыз . Бірақ егер сіз тек HTML көмегімен фонды, түстерді, өлшемдерді, элементтердің орналасуын және т.б. өзгертуге тырыссаңыз. және т.б. соңында сіз парақтан соншалықты тәртіпсіздік жасай аласыз, содан кейін ол жерден ештеңені анықтай алмайсыз. Сонымен қатар, HTML дизайн нұсқалары өте шектеулі. Ол үшін CSS (Cascading Style Sheets) қолданған дұрыс. Содан кейін дизайнға қатысты барлық нәрсе бір жерде жиналуы мүмкін, содан кейін беттің қажетті элементіне қолданылуы мүмкін. CSS codeын тікелей JSP бетінде арнайы тегте жазуға болады , бірақ оны бөлек файлға салып, содан кейін оны қажетті беттерге қолдану әлдеқайда ыңғайлы. Мәнерлері бар файлдарды және басқа статикалық веб-ресурстарды орналастыру үшін webapp ішінде бөлек каталог жасаймыз . Веб-ресурстарды кәдімгі ресурстармен шатастырмау үшін (бізде db.properties бар), осы каталогты res деп атаймыз және барлық CSS файлдарын, суреттерін және т.б. орналастырайық: Бұл файлдарды пайдалану үшін конфигурацияда олардың орнын көрсету керек. Біздің сыныпқа барайық WebConfig. @EnableWebMvcБұрын біз ештеңені конфигурацияламау үшін annotationны пайдаландық , тек әдепкі конфигурацияны қолдандық. Бірақ қазір бір нәрсені конфигурациялау қажет. Мұны істеу үшін біз интерфейсті қолданамыз 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;
}

Бұл біздің кестемізді толығымен өзгертеді (бұл ақымақ көрінеді, әрине, бірақ бұл, мысалы): Менің ойымша, CSS туралы егжей-тегжейлі айтудың қажеті жоқ, бәрі өте қарапайым. Интернетте кестелер мен пішіндерді жобалаудың көптеген дайын нұсқаларын таба аласыз. Бірақ, әрине, дизайнды өзіңіз жасағаныңыз жақсы, сізге дизайнер болудың қажеті жоқ, бұл күрделі сайт емес. Алғашқы танысудан бірнеше сағат өткен соң да, мұндай қарапайым бет үшін өте әдемі және ұқыпты дизайн жасау үшін жеткілікті болады. Сонымен қатар, Интернет барлық сабақтарға, мысалдарға толы, бір экранда HTML, CSS-ті бір уақытта өңдеуге және оның қалай көрінетінін бірден көруге болатын арнайы сайттар бар. Кішкене жаттығу арқылы сіз нағыз өнер жасай аласыз. Рас, бұл жерде де тым көп алданбау керек (әрине, дизайнер болуды жоспарламасаңыз), әйтпесе дизайн деген осындай нәрсе, сіз бұл жерде ұзақ уақыт тұрып қалуыңыз мүмкін. Мен CSS-ті алғаш түсіне бастағанда, мен кептелдім. Мен бәрін, әрбір қасиетті сынап көргім келді, бірдеңені бұрап, оны өңдеп, тәжірибе жасап, кейбір сайттардың парақтарын алып, оларды танымастай етіп қайта жасағым келді. Мен бұл ойыншықпен бір апта бойы көңілді болған шығармын, басқа ештеңе істемей, ол мені жібергенше :) Ал, жалпы, әрине, сіз оны асыра алмауыңыз керек және түсініксіз түрлі-түсті керемет жасауыңыз керек, мұны қарапайым және талғаммен. Айта кету керек жалғыз нәрсе. Түсіну керек, бұл CSS - дизайнның сипаттамасы , ал HTML - бұл белгілеу . Сіз CSS арқылы бәрін жасауға тырыспауыңыз керек; кейбір аспектілерді орындау өте қиын болады, ал кейбіреулері мүмкін емес, HTML-де бұл бірнеше қосымша жолдармен немесе тегтегі бір ғана атрибутпен орындалады. Сіз оларды біріктіріп, CSS-те барлық түстерді, фондарды, қаріптерді жасауыңыз керек және, мысалы, бірнеше кесте ұяшықтарын біріктіру қажет болса, HTML құралдарын пайдалану оңайырақ. Мысалы, мен CSS және HTML-мен бірнеше сағат айналыса отырып, мен парақтармен не істей алдым (мұнда мен бұған жету үшін жасаған тәртіпсіздіктер туралы егжей-тегжейлі айтып бермеймін, соңында осы жобаның GitHub-қа сілтеме, оны көруге болады): Әрине, мен ол жерде бәрін қаншалықты сауатты жасағанымды білмеймін, бірақ CSS-ті бір апта бұрын алғаш рет көргенімді ескерсек, бұл өте жақсы болды деп ойлаймын.

Беттеу

Қазір бәрі жұмыс істейді, жақсы көрінеді, бірақ кестеде әзірге аз ғана жазбалар бар. Онда жүз фильм бар ма, әлде мың фильм болса ше? Бұл, мысалы, тізім 10 жазбадан тұратын беттерде көрсетілгенде әлдеқайда ыңғайлы. Сондықтан, енді біз тізімді беттерге бөлуді жүзеге асыруға тырысамыз (кейде бұл «пейджинг» немесе «беттеу» деп те аталады ( ағылшынша беттеу )). Мұны әртүрлі жолдармен жасауға болады. Мысалы, сіз толық тізімді 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();
}

Анау. егер бұл 1-ші бет болса, біз 0-ден бастап ең көбі 10 жазбаны көрсетеміз, егер бұл 5-ші бет болса, 40-шыдан бастап 10 жазбаны көрсетеміз (мәліметтер қорындағы нөмірлеу 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;
}

Мұнда жаңа annotation пайда болды @RequestParam, ол бұл мәнді сұрау параметрінен алатынымызды көрсетеді. Енді параметрі бар мекенжайға өтсек, мысалы, http://localhost:8080/ ?page=4 , сәйкесінше 4-ші бетті аламыз. Біз әдепкі мәнді « 1 » етіп орнаттық, осылайша қолданба іске қосылғанда, http://localhost:8080/ параметрі жоқ мекенжайға өткенде , біз бірінші бетті аламыз. Әдісте біз барлық жазбалардың санын аламыз, содан кейін осы қарапайым әдіспен біз беттердің санын есептейміз. Анау. егер бізде 10 жазба болса, бұл 1 бет, ал егер 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, ... санауыштары бойынша сілтемелер жасаймыз және параметрді индекс мәні бойынша орнатамыз. Тағы бір кішкене түртуді қосайық. Біз контроллерге ораламыз. Қосу, өңдеу және жою әдістерінде операция аяқталғаннан кейін біз негізгі бетке қайта бағыттаймыз «redirect:/» . Бұл. егер біз 50-бетте бір жерде болсақ және жазбаны өңдеу түймесін бассақ, орындағаннан кейін біз « / » мекенжайына өтеміз , яғни. 1-бетке оралайық. Бұл өте ыңғайлы емес, мен келген жерімізге оралғым келеді. Мұны өте қарапайым шешейік. Сыныпта FilmControllerданалық айнымалыны жасайықint page

private int page;

Әдістің ішінде allFilmsбіз осы айнымалыға параметр мәнін тағайындаймыз page:

this.page = page;

Бұл. Бұл әдіс орындалған сайын (яғни беттерді шарлағанда) ағымдағы беттің мәні айнымалыға жазылады. Содан кейін біз бұл мәнді сол бетке қайта бағыттау үшін әдістерімізде қолданамыз.

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

Қорытынды

Осымен бітетін шығармыз. Нәтиже – толыққанды CRUD қолданбасы. Бұл, әрине, идеалдан алыс (өте алыс), бірақ оны оңтайландыруға және жақсартуға, қателерді түзетуге және функционалдылықты қосуға болады. Сіз шикі операциялар үшін кірістірілген әдістерді пайдалана аласыз; сүзуді, іздеуді, сұрыптауды қосу; басқа қатысты кестелерді қосу; авторизациясы және аутентификациясы бар әртүрлі пайдаланушыларға қолдау көрсетуді жүзеге асыру және т.б. және т.б. Қиялдың ауқымы шексіз, сондықтан оған барыңыз. Осы жобаның github сілтемесі . Назарларыңызға рахмет. PS Бұл менің өмірімдегі бірінші мақала жазу әрекетім, сондықтан қатаң үкім шығармаңыз :). Пайдалы ресурстарға басқа сілтемелерді қоспағаным үшін кешірім сұраймын; өкінішке орай, мен ақпарат алатын көздерге сілтемелерді сақтау әдетін әлі дамыта алмаймын. Және, әрине, көп әріптер үшін кешірім сұраймын, қысқалық менің талантым емес, біреу оны жеңе алады деп үміттенемін. Барлық бөліктерге сілтемелер

• Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (1 бөлім)
• Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (2 бөлім)
• Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (3 бөлім)
• Maven, Spring, MySQL, Hibernate және бірінші CRUD қолданбасына кіріспе (4-бөлім)