코드로 배우는 스프링 웹 프로젝트 Part3 (ch11)

ch11은 화면처리다.

부트스트랩을 사용했는데 책 코드를 가져와서 사용했다.

우선 resources에 다운받은 폴더를 붙여넣었다.

 

 

 

 

 

 

 

F11을 눌러 개발자모드를 사용하기 시작했다.

복붙해서 쓰니 오류가 좀 났는데 

그 이유는 네트워크에서보면 주소가 다르기에 변경해주었다.

 

 

 

 

header.jsp 파일과 footer.jsp 파일을 만들어줘서

간결하게 표현해주었다.

 

 

 

 

 

 

 

jQuery의 경우 너무 예전버전이라

3.6.3으로 버전을 업 해주었다.

 

 

 

 

 

 

게시판의 목록 (list.jsp) 파일을 아래와 같이 작성하였다.

 

 

 

 

 

 

한글이 깨지는 현상은 아래 코드를 통해 해결했다.

 

 

 

DB에도 깨진 한글로 들어가 있었는데

저 코드를 넣고 문제없이 작동했다.

 

 

 

 

 

 

jsp를 제대로 배우지 못해서 완전히 이해가 가지 않는 부분이 있었는데

함수로 result 값을 받아왔다.

이건 register 메서드에서 bno을 result로 받아오기로해서

이렇게 하면 내가 생성하는 게시글의 번호를 받아올 수 있다.

 

 

 

 

 

list로 그냥 들어가면 번호가 생성되지 않고

게시글을 생성했을 때만 번호가 나오게 설정하였다.

 

게시글 등록했을때

 

리스트에 그냥 들어갔을때

 

 

 

 

모달을 사용해서

게시글 몇번이 생성되었습니다. 라고 표시할 수 있게 되었다.

 

 

부트스트랩에서 가져온 모달 코드

 

 

함수를 통해 게시글 번호 모달 표시

 

 

 

 

 

추가로 버튼을 누르면 등록화면으로 이동하게 

self.location 을 설정해주었다.

 

 

 

 

 

views 화면에는

get, list, register jsp 파일들이 생성되었다.

 

 

 

 

 

Controller에 getMapping 사용해서 get 을 만들었다.

 

 

 

정보를 가져오는 화면이여서

제목과 번호는 수정할 수 없게 readonly를 설정했고

각각 정보를 가져올 수 있게 board.XXX를 이용했다.

 

 

 

 

 

 

 

이렇게 board/get?bno=21 를 입력하면

21번에 해당하는 게시글이 불러와진다.

 

 

 

 

 

여기서 문제가 있었다.

등록 후에 선택하고 다시 뒤로가기를 누르면 또 모달창이 떴다.

이런 문제를 해결하기 위해 history를 지워주는 코드를 추가했다.