인턴 기록/게시판?블로그?만들기

스프링부트 게시판 만들기 (1) - MSSQL db 구축, 테이블 생성

210_yy 2021. 4. 6. 17:35

시작이 반이라고 .. 처음에 DB연결과 thymeleaf를 사용하여 레이아웃을 만드는데만 엄청 시간이 걸렸다.. (결국 성공도 못한 채) 

 

그래서 레이아웃은 무슨 ! 일단 db연결부터 해보자 라고 생각했다. 로컬에서 db를 구축하고 테이블을 만들어 스프링부트와 연동하여 페이지에 데이터를 가져오기를 하려고 한다. 드디어 성공해서 글을 작성중 :) 

 

 

1. DB 구축, 테이블 만들기 

 

이 테이블을 만든지는 정말 오래 돼서 절차가 정확하게 기억은 안나는데.. 나름 구글링을 해서 따라했다 

검색 키워드는 "mssql 로컬 db" 라고 하면 많이 나옴 

 

그래서 내가 만든 db 이름은 blog이고, 그 안에 테이블명은 boards.이다 

 

구조는 위 그림처럼 생겼다.

 

테이블 column에는 idx(글번호), writer(작성자), title(제목), content(내용), date(날짜), hit(조회수) 를 넣었다.

 

 

이렇게 대충,. 2개의 행을 넣어봤다.. (잘 넘어오는지 확인하기 위해서 예시로)

 

 

2. 스프링부트 프로젝트 생성 후 index.html 만들기

 

 

sts를 이용하여 생성한 프로젝트 구조는 그림과 같다. index.html 은 프로젝트를 run시켰을 때 localhost:[포트번호] 를 검색창에 치면 제일 먼저 뜨는 화면이다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
	<div>
		<table id="table" class="table">
			<thead>
				<tr>
					<th>번호</th>
					<th>작성자</th>
					<th>제목</th>
					<th>날짜</th>
					<th>조회수</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
			
		</table>
	
	</div>
	<div>
		<button onclick="getBoardList()">버튼</button>
	</div>


<script src="js/main.js"></script>

</body>
</html>

jquery를 사용하기 위해 link를 적었고 table 처럼 만들기 위해 bootstrap의 css 사용했다. 

 

 

테이블의 column명들을 먼저 적어놨다 

 

rmfja 

실행시키면 이러한 화면이 뜬다. 버튼을 눌렀을 때 db에서 행을 가져와 테이블에 추가할 것이다 

반응형