본문 바로가기

국비과정/Spring

20230717 _[31일차]_01. Spring 게시판 생성 + DB연결

 

 

프로젝트 및 패키지 생성

Run on server (jul14 프로젝트 제거하고 project1만 구동)

 

 

Homecontroller & home.jsp 삭제 & java 버전 11로 맞추기

 

indexContrtoller 클래스 생성  (첫화면)

> @Controller 선언

> @GetMapping 선언 

      스프링 버전 낮으면 불가, 4.3.25.RELEASE

데이터 붙임 없이( 단순히 / 요청에 대해) index.jsp 페이지(첫화면) 보여줌

아직 index.jpg 파일없어서 404오류

 [ index.jsp ] 페이지 만들기

서버재구동 (clean & restart)

캡쳐는 없지만 잘됨

 

( board로 이동할 a링크 추가 )

 

 

[ board.jsp ] 파일 만들러가자

 

BoardController 생성

> @Controller 선언

board.jsp 파일 없다는 404 에러

resource - WEB-INF - views 폴더에

board.jsp 파일 생성

브라우저에서 '보드로 가기' 클릭하면 아래 board.jsp 페이지로 이동

( index로 이동할 a링크 추가 )

 

한번에 여러 요청 처리가능

value = { " ", " " , ... }  => 콤마로 나열하기

/ 요청과  /index 요청에 대해 index.jsp 페이지를 리턴.

 

 

 user -> Controller -> Service -> DAO -> mybatis -> DB

요청이 들어왔을 때 컨트롤러가 여러개인 경우 해당 요청에 대한 컨트롤러가 작동

  (board 요청이 들어오면 boardController가 작동)

bold체는 @ 어노테이션 필요 (mybatis도??)..

/board 요청에 대해 board.jsp 리턴

 

 

BoardService 클래스 생성

> @Service 선언

여기에 보드 리스트 불러오는 메소드 만들자 (아직 DTO가 없으니 데이터타입은 Map으로)

Map(key, value) 을 속성으로 가지는 list 객체 생성 

for문으로 map에 값들 추가

map.put ("key", value)

map들을 list의 속성으로 넣어주기 _ list.add(map);

bno , btitle 등 값들이 순서없이 섞여있다. (map은 순서가 없기때문)

bno, btitle ~ blike 까지, 즉 한줄한줄은 순서가 있는 list에 들어있음

 

@Service =>  boardService 타입으로 저장

@Service("boardService") =>  boardService 타입으로 저장 + boardService 라고 이름설정

 

 

 


컨트롤러와 서비스 연결을 @Autowired말고 @Resource로 해보자 

 

https://mvnrepository.com/

 

 

<dependency>
    <groupId>javax.annotation</groupId>
    <artifactId>javax.annotation-api</artifactId>
    <version>1.3.2</version>
</dependency>

 

요만큼을 pom.xml에 추가해줘야 @Resource 사용가능

 


[ BoardController.java ]

> @Resource 선언

컨트롤러와 서비스 연결

> BoardService에서 선언과 동시에 지정해준 이름(boardService)으로 연결 

 

연결해주고 선언해줬으니 boardService 사용가능 

 

 

[ BoardController.java ] 

Model 사용

Model값만 전송 / ModelAndView는 값과 이름 묶어서 전송

서비스에서 만들어준 list값을 받아와서 "list"라는 이름에 넣어주기

addAttribute() 메소드를 이용해서 model에 붙여서 board페이지로 가져가자 

 

 

[ board.jsp ] 에서 list 출력해보면

 

코어태그 사용을 위해 일단 선언

 

table 생성해서 안에 list 값들을(forEach문으로 하나하나) 넣어주자

 

css 스타일 지정해보자

일단 <link rel="stylesheet" href="./resources/css/board.css"> 추가해서 board.jsp랑 css 연결

 

위에서 지정해준 경로대로 

resources 폴더 아래 css 폴더 생성하고 그 아래에 board.css 파일 생성

 

연결된건지 확인하려면 웹 브라우저에서 소스코드보기 

 

css링크 클릭해보면

잘 연결됨! 

 

그럼 이제 td에 클래스 지정해주고 css로 꾸며보자

<body>
	<h1>보드</h1>
	<img alt="" src="./img/pepe.jpg">
	<a href="./">index로 가기</a>
	
	<table>
		<tr>
			<th>번호</th>
			<th>제목</th>
			<th>글쓴이</th>
			<th>날짜</th>
			<th>좋아요</th>
		</tr>
		
		<c:forEach items="${list }" var="row">
			<tr>
				<td class="td1">${row.bno }</td>
				<td class="title">${row.btitle }</td>
				<td class ="td1">${row.bwrite }</td>
				<td class ="td2">${row.bdate }</td>
				<td class ="td1">${row.blike }</td>
			</tr>
		</c:forEach>
	</table>
	
</body>
@charset "UTF-8";
body{
	background-color: #BEEFFF;
}

table{
	margin: 0 auto;
	width: 800px;
	height: 500px;
	border-collapse: collapse;
}

th{
	height: 50px;
	background-color: gray;
}

td{
	text-align: center;
	border-bottom: 1px solid gray;
}

.td1{
	width: 10%
}

.td2{
	width: 20%
}

.title{
	text-align: left;
}

tr:hover {
	background-color: gray;
}

resource 미리 설정해주면 경로 간단해짐

이미지 폴더 만들고 이미지 파일도 넣어!!!!!

 


 

BoardDAO 클래스 생성 & @Repository 선언 

데이터 타입이 Map인 boardList() 메소드 생성 

 

@Inject 로 연결 & 이름지정 (서비스랑 DAO 연결)

이제 서비스에서 boardDAO 라는 이름으로 불러올수 있음

 

 

연결방법 세개

Autowired / Resource / Inject >> 차이점 찾아보기***

Autowired 는 데이터타입을 찾아감, 이것도 이름 설정해서 연결할 수는 있음 

 

Autowired  - 자바 스프링에서 지원, 타입연결_안되면 이름

Resource   - 자바에서 지원, 이름연결_안되면 타입

Inject  - 자바에서 지원, 타입연결_안되면 이름

 

 

Spring @Autowired, @Resource, @Inject의 어노테이션 차이 :: Dev. MK (tistory.com)

 

Spring @Autowired, @Resource, @Inject의 어노테이션 차이

@Autowired, @Resource,@Inject은 모두 의존관계를 자동으로 연결해주는 기능을 가진 어노테이션이지만 조금씩 차이가 있다. @Resource @Autowired @Inject 설명 Java 에서 지원 Spring Framework 에서 지원하는 Dependenc

devmg.tistory.com


DB연결

servlet-context.xml 에 추가

 

pdf 4 페이지에 있는 기본설정 jar 5개 추가 (전자정부 페이징 제외)

 

src/main/resources 아래 resources 폴더 아래 spring 폴더 생성

spring 폴더 아래

 

 

 

database-context.xml 파일생성

(beans 클릭해줘야 맨위 beans 코드들이 함께 생성)

 

여기 파일에 pdf 6페이지의 DB객체명, 3개 bean 코드 추가 (DB랑 연결해주는거)

src/main/resources 아래에

mybatis 폴더 생성, 아래에

config , mappers 폴더 생성

각각 파일들 넣기

 

 

board-mappers.xml 에서 resultType 은 Map으로 변경_ 서비스에서 타입을Map으로 list 생성했었음

최신글 10개 뽑아와서 역순정렬

 

BoardDAO

@Inject 선언

@Named 선언_ SqlSession 과 이름으로 연결

 

* selectOne () : 딱 하나의 레코드 가져올 때 (여러개이거나 null이면 에러난다)

* selectList () : 여러개의 레코드 가져올 때

 

DAO 가 쿼리문 실행결과를 받아 리턴.

DAO 먼저 만들고 서비스에서 부르고 컨트롤러에서 불러..... 반대로 해봄

 

서비스에서 for문 지워주고

 

리턴값 아래처럼 설정

return => DAO가 대신 일한 결과값 (DAO가 boardList() 메소드 실행시킨 결과값)

 


pom.xml에서 밑줄뜨면


mariadb 버전 안바꿈 _ 까먹지 말기**


(최종 짜잔)


이제 글을 클릭하면 들어가 수 있게 해보자

제목인 title만이 아니라 한 행을 클릭하면 넘어갈 수 있게 해보자 => tr에다가 onclick 적용

 

 

<!-- onclick 자바스크립트 페이지 이동, URL?파라미터=값 -->
<tr onclick="location.href='./detail?bno=${row.bno }' ">

                                                                 요부분 스페이스바 안들어가게 주의

 

클릭했을 때 이동 location.href = ' ~~ ' 요기로 이동해라

' ./detail?bno=${row.bno } ' => 요기로 이동

bno가 클릭한 글의 번호와 일치하는 detail 페이지로 이동.

 

브라우저에서 128번 글을 눌러보면 주소창에 해당 글번호가 표시됨.

bno가 128번인 detail 페이지로 이동한거!


 

BoardController 에서

이 파라미터로 들어오는 bno 값을 잡아 해당되는 detail 페이지로 보낼예정

 

값을 가져오는 첫번쨰 방법 => HttpServletRequest (get/post) _ 이클립스 다시보기

 

request.getParameter("bno"); 얘는 마우스 올려보면 String 타입

getParameter() 메소드는 String 타입만 반환한다.

 

아직 detail.jsp는 없어서 오류나지만  bno 값을 제대로 가져오는지 콘솔창에 출력해서 확인

 

브라우저 게시판에서 130번 글 클릭하면 콘솔창에 해당 글번호인 130 출력


HttpServletRequest 개념 및 사용법 (tistory.com)

 

HttpServletRequest 개념 및 사용법

안녕하세요. 오늘은 HttpServletRequest 에 대해 이야기해보겠습니다. JSP 기본 내장 객체 중 request 객체는 JSP에서 가장 많이 사용되는 객체입니다. 웹브라우저 사용자인 클라이언트로부터 서버로 요

chobopark.tistory.com

 

 

원래 detail로 보내줄때 매개변수 없이(값 없이) 보냈는데 request를 같이 보내줌

GetMapping을 동작시켜서 detail로 보낼때 필요한 값들까지 함께 보내주는거

물음표 뒤의 값들(요청에 필요한 값들)이 request로 들어감

 

model도 같이 보내려면 쉼표로 연결해서 함께 써줌.

 

HttpServletRequest request,          Model model

값을 가져온거고                            model을 사용해서 그 값들을 가지고 detail로 간다

 

boardService.detail(bno); 이 값을 가져올건데 (SELECT * FROM board WHERE bno = 121)

String은 하나밖에 못담으니 dto에 담아서 가져오자

 

일단 그럼 BoardDTO부터 만들자

밑줄에 마우스 올려서 create BoardDTO 클릭

=> BoardDTO 클래스 생성 & 변수들 선언

Source - Generate Getters and Setters

 

 

BoardController 에서 detail(bno) 밑줄 마우스 클릭해서

 

BoardService detail메소드 생성

 

서비스가 detail () 메소드를 실행시켜 리턴한 값을 dto에 넣어줬으니 

model은 이 dto값을 가지고 detail.jsp로 간다

요만큼이 jsp파트

Model은 jsp에 값을 붙이기 위해서 넣음! 지금 당장 db에 필요한건 아님

 

서비스에서는 다시 DAO 한테 detail () 메소드 실행하라고 시킬건데

파라미터로 bno 값이 필요.

 

아직 BoardDAO 에 detail () 메소드가 없음.

밑줄 마우스 클릭으로 DAO에 detail () 메소드 생성 .

DAO는 SqlSession에 selectOne () 메소드 실행시킴 (bno하나의 값을 가져올거라)

sqlSession.selectOne("board.detail", bno);

                         네임스페이스.아이디, 값

 

bno라는 값이 꼭 db까지 같이가야해서 모든 곳에 매개변수로 들어가있음******

 

board.detail 부분 처리하자 =>  sql문 작성해줘야함 

board-mapper 에 와서

resultType 은 BoardDTO 인데 아래처럼 경로 전부 써줘야함

<select id="detail" resultType="com.phyho.pro1.BoardDTO">

 

너무 길어서 짧게 줄여서 사용하자.

mybatisConfig.xml 에서 아래처럼 변경

"com.phyho.pro1.BoardDTO" 요만큼을 "boarrdDTO" 라는 이름으로 사용하겠다.

 

board-mapper.xml 돌아와서

resultType 은 boarrdDTO 로 써줌

명령문 추가 => bno의 값이 121인 dto를 가져와. (bno는 일단 121로 해뒀지만 바꾸자)

앞의 DAO에서도 매개변수로 String bno를 받아왔으니

#{변수명} 이라고 적어주면 parameterType인(String인) 변수가 들어감

쿼리문 : 요청한 ${bno} 와 일치하는 bno를 뽑아내라

 

board의 detail 을 실행시킬때 최종타입은 boardDTO가 되는거고,  String 타입인 bno를 매개변수로

                                글을 쓸때 bno뿐만 아니라 모든 정보(dto)를 다 가져와야 하니까

쿼리문장을 실행할 때 필요한 값 => parameterType="String"

쿼리문장 실행한 값을 담을 데이터 타입 => resultType="boardDTO"

 

 

DAO에서 

public List<Map<String, Object>> boardList(){
       return sqlSession.selectList("board.boardList");  => 쿼리문만 가져감
}

public BoardDTO detail(String bno) {
       return sqlSession.selectOne("board.detail", bno); => 쿼리문과 함께 bno(String)도 가져감
}

 

 

이제 detail.jsp 만들러가자

dto 출력

브라우저 게시판에서 131번 게시글 클릭하면 dto의 주소값 출력 (dto는 String 타입)

 

브라우저 게시판에서 131번 게시글 클릭하면 dto의 bno 출력