JavaRush /Java Blog /Random-KO /Maven, Spring, MySQL, Hibernate 및 첫 번째 CRUD 애플리케이션 소개(4부)...

레벨 41

28 February 2021
46 views
0 comments

Maven, Spring, MySQL, Hibernate 및 첫 번째 CRUD 애플리케이션 소개(4부)

좋은 오후에요. 이 기사에서는 간단한 CRUD 애플리케이션을 생성하는 과정에서 Maven, Spring, Hibernate, MySQL 및 Tomcat과 같은 것들을 처음 접한 내용을 공유하고 싶습니다. 이것이 마지막 부분입니다. 이 기사는 주로 여기에서 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정적 웹 리소스의 위치를 나타내는 방법이 필요합니다. 만일을 대비해 전체 수업은 다음과 같이 됩니다.

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를 처음 본 것을 생각하면 꽤 잘 된 것 같습니다.

쪽수 매기기

이제 모든 것이 작동하고 좋아 보이지만 지금까지 테이블에는 레코드가 몇 개만 있습니다. 그 안에 영화가 100개, 1000개 있다면 어떻게 될까요? 그렇게 긴 목록을 스크롤하는 것은 그리 편리하지 않습니다. 예를 들어 목록이 10개 항목의 페이지로 표시되면 훨씬 더 편리합니다. 따라서 이제 목록을 페이지로 분할하는 방법을 구현해 보겠습니다(때때로 이를 "페이징" 또는 "페이지 매김"( 영어 페이지 매김 )이라고도 함). 이것은 다양한 방법으로 수행될 수 있습니다. 예를 들어 전체 목록을 jsp 페이지로 전송하고 필요한 레코드 수에 대한 테이블을 생성할 수 있습니다. 또는 예를 들어 서비스의 일반 목록에서 필요한 레코드를 가져온 다음 이 미니 목록을 jsp 페이지로 보내 표시할 수 있습니다. 그러나 물론 이를 데이터베이스 수준에서 수행하는 것이 가장 좋습니다. 아이디어는 데이터베이스에서 전체 목록을 가져와서 조각으로 나누는 것이 아니라 처음에는 다른 모든 항목을 건드리지 않고 데이터베이스에서 필요한 조각을 가져오는 것입니다. 결국 데이터베이스에서 수백, 수천 개의 레코드를 모두 한 번에 꺼내야 하는 이유는 무엇입니까? 필요한 레코드가 상위 10개 안에 있으면 이 10개만 꺼내는 것이 좋습니다. 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();
}

저것들. 첫 번째 페이지인 경우 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;
}

여기에 새로운 주석이 나타났습니다 @RequestParam. 이는 요청 매개변수에서 이 값을 가져오고 있음을 나타냅니다. 이제 매개변수가 있는 주소로 이동하면(예 : http://localhost:8080/ ?page=4 ) 그에 따라 4번째 페이지를 얻게 됩니다. 애플리케이션이 시작될 때 http://localhost:8080/ 매개변수가 없는 주소로 이동하면 첫 번째 페이지를 가져오도록 기본값을 " 1 "로 설정했습니다. 이 방법에서 우리는 모든 레코드의 수를 얻은 다음 이 간단한 방법으로 페이지 수를 계산합니다. 저것들. 레코드가 10개라면 이는 1페이지이고, 11개라면 이미 2개입니다. 음, 이 모든 것을 모델로 전송합니다. 한 주기에 걸쳐 모든 링크를 생성하려면 페이지 수를 알아야 하며, 예를 들어 이 정보를 페이지 어딘가에 표시하려는 경우를 대비하여 영화 수를 거기에 있도록 해야 합니다. 이제 남은 것은 film.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에 링크하세요 . 관심을 가져주셔서 감사합니다. 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