مقدمه ای بر 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 در یک برچسب خاص نوشت ، اما بسیار راحت تر است که آن را در یک فایل جداگانه قرار دهید و سپس به سادگی آن را در صفحات ضروری اعمال کنید. برای قرار دادن فایل‌ها با استایل‌ها و سایر منابع وب استاتیک، یک دایرکتوری جداگانه در داخل برنامه وب ایجاد می‌کنیم . برای اینکه منابع وب را با منابع معمولی اشتباه نگیریم (جایی که 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

مقدمه ای بر 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 ورودی نمایش داده می شود بسیار راحت تر است. بنابراین، اکنون سعی خواهیم کرد تقسیم لیست به صفحات را پیاده سازی کنیم (گاهی اوقات به آن "صفحه بندی" یا "صفحه بندی" ( صفحه بندی انگلیسی ) نیز گفته می شود). این را می توان به روش های مختلف انجام داد. به عنوان مثال، می توانید لیست کامل را به یک صفحه 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 رکورد داشته باشیم، این 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، ... ایجاد می کنیم و پارامتر را با مقدار شاخص تنظیم می کنیم.

به هر حال، مانند صفحه بندی، می توانید ویژگی های دیگری مانند مرتب سازی، فیلتر کردن و جستجو را اضافه کنید. ما به سادگی پارامترهای مختلفی را به متد DAO ارسال می کنیم و از آنها برای تشکیل پرس و جوی مناسب در پایگاه داده استفاده می کنیم تا رکوردهای مورد نیاز را به ترتیب مورد نیاز بیرون بیاوریم.

بیایید یک لمس کوچک دیگر اضافه کنیم. به کنترلر برمی گردیم. در روش های افزودن، ویرایش و حذف، پس از اتمام عملیات، به صفحه اصلی "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)

نظرات

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