Smarteer Suppoters/Study

[국비지원무료교육] Spring 비동기 게시판 리스트 출력 (Iot 과정, 스마트인재개발원)

제쿵 2022. 3. 21. 16:10
스프링 게시물 리스트 출력하기

 

구성

 

오라클 sql

create table springboard(
	idx number not null,
	title varchar2(100) not null,
	content varchar2(2000) not null,
	writer varchar2(20) not null,
	indata date default sysdate,
	count number default 0,
	constraint pk_sb primary key(idx)
)

create sequence sboard_seq
start with 1
increment by 1
maxvalue 100
cycle
nocache;

insert into springboard(idx,title,content,writer) values (sboard_seq.nextval, '제목1','내용1','작성자1');
insert into springboard(idx,title,content,writer) values (sboard_seq.nextval, '제목2','내용2','작성자2');

 

Board.java

import lombok.Data;
@Data
public class Board {
	private int idx;		//번호
	private String title;	//제목
	private String content;	//내용
	private String writer;	//작성자
	private String indate;	//작성일 ("2022-03-16")
	private int count;		//조회수
	
}

vo로 쓰일 Board의 구조이다.

getter setter가 없는데

 

lombok이라고 getter setter를 자동으로 생성해주는 라이브러리를 사용했다.

라이브러리를 설치하고 클래스 위에 @Data라고 적어주면 적용된다.

 

boardList.jsp

<body>
<div class="container">
  <h2>게시판 만들기 복습!!</h2>
  <div class="panel panel-default">
    <div class="panel-heading">게시판만들기 복습</div>
    <div class="panel-body" style="display:block">123</div>
    <div class="panel-footer">스인개 체고!!</div>
  </div>
</div>
</body>

게시판 기본 틀을 만들어준다.

 

script

123가 있는 자리에 게시물 리스트가 출력되어야 한다.

<script>
$(document).ready(()=>{ // html 로드 후 바로 실행
	loadList();
})
<script>

$(document).ready()

문서가 준비되면 매개변수로 넣은 콜백 함수를 실행하라는 의미이다.

위 코드에서는 loadList()를 호출한다.

 

loadList()

function loadList(){
	$.ajax({
		url : "/myapp1/boardList.do",
		type : "get",
		dataType : "json",
		success : htmlView,
		error : function(){
			alert("error")
		}
	})
}

웹페이지가 새로 로드되지않고 일부분만을 갱신하기 위해 ajax를 사용한다.

url : 요청보내는주소

type : get방식 OR post방식

dataType : 서버에서 반환되는 데이터 형식 지정

success : 응답이 성공일 때 실행

error : 응답이 실패일 때 실행

 

success 부분에서 htmlView만 쓰여있는데

함수이름만 써줘도 매개변수로 data가 같이 넘어간다.

 

정리하자면

문서가 로드되고나서 loadList() 함수를 호출하는데

lodeList() 함수가 제대로 수행되게 되면

htmlView라는 함수를 호출한다.

 

htmlView()

function htmlView(data){ 
	var result = "<table class = 'table table-bordered table-hover'>"
	result += "<tr><th>번호</th><th>제목</th><th>내용</th><th>작성자</th><th>작성일</th><th>조회수</th></tr>"
	$.each(data, (index,vo)=>{
		result += "<tr>";
		result += "<td>"+vo.idx+"</td>";
		result += "<td>"+vo.title+"</td>";
		result += "<td>"+vo.content+"</td>";
		result += "<td>"+vo.writer+"</td>";
		result += "<td>"+vo.indate+"</td>";
		result += "<td>"+vo.count+"</td>";
	})
	result += "</table>"
		
	$("#list").html(result)
}

 

아까 loadList()에서 성공의 경우 htmlView()가 호출된다.

result에 문자열로 태그와 테이블 형식을 모두 넣어주고

 

$.each( data, ( index, vo) => { })

data는 loadlist에서 json형식으로 받아온 데이터를 의미하고

index는 배열의 인덱스를 의미한다.

vo는 해당 인덱스나 키가 가진 값을 의미한다.

따라서 vo안에서 멤버변수를 호출한다.

 

 

$("#list").html(result)

마지막으로 result 문자열을

id값이 list인 html태그 내용으로 바꾼다.

<div class="panel-body" id="list" style="display:block">123</div>

아까 위에 panel-body부분에 id값을 list로 설정했다.

 

이제 Mapper 인터페이스를 설정해야한다.

 

 

Mapper 인터페이스

 Mapper 인터페이스는 Mapping 파일에 쓰인 sql문을 호출하기 위한 인터페이스이다.

BoardMapper.java

import java.util.ArrayList;

public interface BoardMapper {
	//전체 게시물 가지고오기
	public ArrayList<Board> boardList();
}

인터페이스에서 sql문에서 필요한 매개변수와 반환값을 맞춰준다.

 

 

BoardController.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.smhrd.mapper.BoardMapper">

	<select id="boardList" resultType="kr.smhrd.domain.Board">
		select * from springboard
	</select>
</mapper>

 

<mapper namespace="kr.smhrd.mapper.BoardMapper">

이부분에서 인터페이스를 연결해준다.

 

 

BoardController.java

@Controller
public class BoardController {

	@Autowired
	private BoardMapper mapper;
	
	@RequestMapping("/")
	public String main() {
		return "boardList";
	}
}

 

 

@Controller

서버에 들어오는 요청이 많아질수록 페이지에 대한 분기도 많아진다.

Controller라는 것을 두어서 논리적으로 분기하고

요청에 대한 데이터와 View를 사용자에게 반환한다.

Controller는 MVC패턴에 포함된다.

 

@Autowrired

의존성을 주입한다.

이부분은 내용이 조금 어려워서 추후 다시 기술하겠다.

 

@RequestMapping( )

해당주소로 오는 요청을 처리한다.

 

 

게시물 출력하기

boardList.jsp

<%@page import="kr.smhrd.domain.Board"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>게시판 만들기 복습!!</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>게시판 만들기 복습!!</h2>
  <div class="panel panel-default">
    <div class="panel-heading">게시판만들기 복습</div>
    <div class="panel-body" id="list" style="display:block"></div>
    <div class="panel-footer">스인개 체고!!</div>
  </div>
</div>
</body>
<script>
$(document).ready(()=>{ // html 로드 후 바로 실행
	loadList();
})

function loadList(){
	$.ajax({
		url : "/myapp1/boardList.do",
		type : "get",
		dataType : "json",
		success : htmlView,
		error : function(){
			alert("error")
		}
	})
}

function htmlView(data){ 
	var result = "<table class = 'table table-bordered table-hover'>"
	result += "<tr><th>번호</th><th>제목</th><th>내용</th><th>작성자</th><th>작성일</th><th>조회수</th></tr>"
	$.each(data, (index,vo)=>{
		result += "<tr>";
		result += "<td>"+vo.idx+"</td>";
		result += "<td>"+vo.title+"</td>";
		result += "<td>"+vo.content+"</td>";
		result += "<td>"+vo.writer+"</td>";
		result += "<td>"+vo.indate+"</td>";
		result += "<td>"+vo.count+"</td>";
	})
	result += "</table>"
		
	$("#list").html(result)
}

 

 

최종적으로 이렇게 출력된다.

 

 

https://www.smhrd.or.kr/

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr