บทความ
เริ่ม
เริ่มเรียนรู้
JavaRush /จาวาบล็อก /Random-TH /ข้อมูลเบื้องต้นเกี่ยวกับ Maven, Spring, MySQL, Hibernate ...
Макс
ระดับ

ข้อมูลเบื้องต้นเกี่ยวกับ Maven, Spring, MySQL, Hibernate และแอปพลิเคชัน CRUD แรก (ตอนที่ 4)

เผยแพร่ในกลุ่ม
สวัสดีตอนบ่าย. ในบทความนี้ ฉันอยากจะแบ่งปันประสบการณ์ครั้งแรกของฉันกับสิ่งต่าง ๆ เช่น Maven, Spring, Hibernate, MySQL และ Tomcat ในกระบวนการสร้างแอปพลิเคชัน CRUD แบบง่าย นี่เป็นส่วนสุดท้าย บทความนี้มีจุดมุ่งหมายสำหรับผู้ที่ผ่านระดับ 30-40 ไปแล้วที่นี่ แต่ยังไม่ได้เสี่ยงเกินกว่า Java บริสุทธิ์และเพิ่งเริ่มต้น (หรือกำลังจะเริ่มต้น) เพื่อเข้าสู่โลกที่เปิดกว้างด้วยเทคโนโลยีกรอบงานและสิ่งที่ไม่คุ้นเคยอื่น ๆ เหล่านี้ คำ. นี่เป็นส่วนที่สี่สุดท้ายของบทความ “ความรู้เบื้องต้นเกี่ยวกับ 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เราต้องการวิธีการที่ใช้ระบุตำแหน่งของทรัพยากรบนเว็บแบบคงที่ ในกรณีนี้ ทั้งชั้นเรียนจะมีลักษณะดังนี้:
Java-университет 
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แน่นอน ฉันไม่รู้ว่าฉันทำทุกอย่างที่นั่นได้ดีเพียงใด แต่เมื่อพิจารณาว่าฉันเห็น 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 เราจะแสดงสูงสุด 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เราก็จะได้หน้าที่ 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 เต็มรูปแบบ มันยังห่างไกลจากอุดมคติ (ไกลมาก) อย่างแน่นอน แต่สามารถปรับให้เหมาะสมและปรับปรุง แก้ไขข้อบกพร่องและเพิ่มฟังก์ชันการทำงานได้ คุณสามารถใช้วิธีการในตัวสำหรับการดำเนินการ crud ได้ เพิ่มการกรอง การค้นหา การเรียงลำดับ เพิ่มตารางที่เกี่ยวข้องอื่น ๆ ใช้การสนับสนุนสำหรับผู้ใช้ที่แตกต่างกันด้วยการอนุญาตและการรับรองความถูกต้อง ฯลฯ และอื่น ๆ ขอบเขตของจินตนาการนั้นไร้ขีดจำกัด ดังนั้นจงลงมือเลย ลิงก์ไปยัง GitHub ของโครงการนี้ ขอขอบคุณสำหรับความสนใจของคุณ. ป.ล. นี่เป็นความพยายามครั้งแรกในชีวิตของฉันในการเขียนบทความ ดังนั้นอย่าตัดสินอย่างเคร่งครัด :) ฉันขอโทษที่ไม่ได้เพิ่มลิงก์อื่นๆ ไปยังแหล่งข้อมูลที่เป็นประโยชน์ น่าเสียดายที่ฉันยังคงไม่สามารถพัฒนานิสัยในการบันทึกลิงก์ไปยังแหล่งที่มาที่ฉันได้รับข้อมูลได้ และแน่นอน ฉันขอโทษสำหรับจดหมายจำนวนมาก ความกะทัดรัดไม่ใช่พรสวรรค์ของฉัน ฉันหวังว่าจะมีคนรับมือได้ ลิงค์ไปยังทุกส่วน
ความคิดเห็น
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION