핸들바로 JSP 데이터 출력하기 (mysql 데이터 json타입 변환)

📌 목차

1. DB연결
2. VO파일 생성
3. DAO생성해서 DB 데이터 가져오기
4. json-simple-1.1.1 라이브러리
5. DB 데이터 json타입으로 변환 (컨트롤러)
6. jsp에서 출력하기 (뷰)

 - JAVA Resources 파일의 src안에  controller,  model패키지를 생성해 준다

 

    1.  db연결

: model 패키지에 자바 클래스로 생성한 DB파일로 mysql과 연결

package model;
import java.sql.*;

public class DB {
	public static Connection CON;
	   static {
	      try {
	         Class.forName("com.mysql.jdbc.Driver");
	         CON = DriverManager.getConnection(
	        		 "jdbc:mysql://localhost:3306/webdb", "web", "pass");
	         System.out.println("접속성공");
	      } catch (Exception e) {
	         System.out.println("접속실패:" + e.toString());
	      }
	   }
}

- DB의 CON객체를 사용해 DAO에서 db와 연결하여 sql문을 실행시킨 결과를 가져올 수 있다

 

    2.  VO클래스 생성 - getter, setter

: vo(value object)는 값을 저장하기 위한 객체로 db의 조회된 데이터를 담는 용도이다. (db결과 객체에 매핑)

package model;

import java.util.Date;

public class PostVO {
	private int id;
	private String title;
	private String body;
	private String writer;
	private Date date;
    }

- db의 테이블과 같은 칼럼명으로 속성을 private 타입으로 지정한 후 마우스 우클릭으로 getter, setter 메서드 생성 

-  get( )은 프로퍼티 값을 가져올 때, set( )은 프로퍼티 값 설정

- getter, setter를 통해 클래스의 내부 구현을 숨기고 캡슐화를 구현할 수 있다.

※ Generate toString을 사용하면 객체를 출력해 내부 상태를 확인할 수 있어 디버깅에 유용하다.

 

    3.  DAO생성해서 DB 데이터 가져오기

: dao(data access object)는 DB와의 상호작용을 위한 객체로 메서드를 이용해 CRUD 작업을 수행한다.

public ArrayList<PostVO> list(int page){
		ArrayList<PostVO> array = new ArrayList<PostVO>();
		try {
			String sql = "select * from posts order by id desc limit ?,10";
			PreparedStatement ps = DB.CON.prepareStatement(sql);
			ps.setInt(1, (page-1)*10);
			ResultSet rs = ps.executeQuery();
			while(rs.next()) {
				PostVO vo = new PostVO();
				vo.setId(rs.getInt("id"));
				vo.setTitle(rs.getString("title"));
				vo.setWriter(rs.getString("writer"));
				vo.setDate(rs.getTimestamp("date"));
				array.add(vo);
			}
		}catch(Exception e) {
			System.out.println("게시글 목록오류"+e.toString());
		}
		return array;
	}

- db정보를 담을 vo객체를 생성하고 DB.CON으로 데이터베이스와 연결하여 작성한 sql을 실행해 준다.

- sql문을 실행한 결과를 담은 rs에서 각각의 칼럼 값을 get 메서드로 가져와 while문으로 반복해 set메서드로 vo에 담아준다.

- 정수는 int, 문자는 string, 시간까지 출력되는 날짜는 TimeStamp로 데이터 타입을 지정

- 데이터를 가져올 때 오류가 있을 경우 프로그램이 중단되지 않도록 try~catch문을 사용해 오류를 처리해 준다.

 

   4.  json-simple-1.1.1 라이브러리 

1) WEB-INF 파일의 하위 lib파일에 json-simple-1.1.1.jar라이브러리를 넣어준다

2) 컨트롤러에서 필요한 아래 클래스를 import 해준다.

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import java.io.PrintWriter;

3) 인코딩 지정

- db에 저장된 한글 데이터가 깨져서 출력되는 걸 방지하기 위해 setContentType으로 인코딩 타입을 uft-8로 지정

response.setContentType("text/html;charset=UTF-8");

4) 데이터 화면 출력을 위한  PrintWriter객체 생성

 PrintWriter out = response.getWriter();

- getWriter( ) 메서드로 response객체에서 printWriter객체를 얻어 out변수에 할당한다.

- out 객체에 println() 메서드를 사용해 클라이언트로부터 요청받은 데이터를  문자열로 출력해 보낼 수 있다.(응답)

 

   5. DB 데이터 json타입으로 변환

case "/posts/json":
			PostDAO dao = new PostDAO();
			int page = Integer.parseInt(request.getParameter("page"));			
			JSONArray jArray = new JSONArray();
			JSONObject object = new JSONObject();
			for(PostVO vo : dao.list(page)){
				JSONObject obj = new JSONObject();
				obj.put("id", vo.getId());
				obj.put("title", vo.getTitle());
				obj.put("writer", vo.getWriter());
				obj.put("date", vo.getDate().toString());
				jArray.add(obj);
			}
			object.put("total", dao.total());
			object.put("list",jArray);
			out.println(object);			
			break;	
	}

- 뷰에서 보내준 페이지 매개변수는 request.getParameter로 받아와 page 변수에 담아준다

** 파라미터의 값은 문자열 형태의 데이터이기 때문에 Integer.parseInt 메서드를 사용해 정수로 변환해줘야 함

[ json simple 라이브러리 ]

JSONArray jArray = new JSONArray()	JSON 배열을 생성, PostVO 객체를 JSON 형식으로 변환하여 jArray에 추가한다.
JSONObject object = new JSONObject()	JSON 객체를 생성, PostVO의 list와 total을 담는 JSON 객체를 생성하기 위해 사용된다.

- dao.list( )에 페이지를 담아 db의 데이터를 for문으로 반복하여 vo객체에 담아준다.

- vo에 담겨있는 각각의 속성 데이터를 json형태로 변환하기 위해 JSONObject 객체에 put메서드로 담아준다.

- 변환된 json 데이터를 jarray에 add로 추가해 전체 데이터를 담아준다.

- object 객체에 total과 list를 담아 out으로 화면에 변환한 json데이터를 출력한다.

 

   6.  JSP 뷰에서 출력 (ajax요청)

<!--부트스트랩-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!--핸들바-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<!--제이쿼리-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

 html의 <head> 태그 안에 필요한 스크립트 작성해 준다.

 

[html부분]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <div class="row justify-content-center my-5 mx-2">
 	<div class="col-md-8">
    <h1>게시글</h1>
    <div>전체 게시글수:<span id="total"></span> </div>	
    <div id="posts"></div>
    <script id="temp" type="text/x-handlebars-template">
        <table class="table table-striped">
        {{#each list}}
            <tr>
                <td>{{id}}</td>
                <td><div class="ellipsis"><a href="/posts/read?id={{id}}">{{title}}</a></div></td>
                <td>{{writer}}</td>
                <td>{{date}}</td>
            </tr> 
        {{/each}}
        </table>
    </script>	
 </div>

- 데이터를 출력해서 넣어줄 div태그를 생성, id는 posts

- <script id="temp" type="text/x-handlebars-template"> 태그로 템플릿을 생성해 준다.

-  {{#each list}}를 이용해 컨트롤러에서 list속성에 넣어준 json데이터 배열을 출력한다

- 각각의 칼럼속성은 {{ }} 중괄호 두 개 안에 작성

 

[Script 부분]

<script>
    function getPosts(page) {
        $.ajax({
            type: "get",
            url: "/posts/json",
            dataType: "json",
            data: { page: page },
            success: function(data) {
                $("#total").html(data.total);
                let temp = Handlebars.compile($("#temp").html());
                $("#posts").html(temp(data));
            }
        })
    }
</script>

- ajax로 컨트롤러의 해당 url에 데이터를 요청한다.

- page 변수는 data로 넘겨주며 success로 성공적으로 데이터를 받아왔을 경우 data변수에 담아 function으로 작업을 처리해 준다.

- 템플릿을 컴파일한 다음 data를 넣어 테이블로 출력해 주고 total에 전체 데이터 수를 담아준다.