2022. 10. 21. 21:50ㆍSpring framwork
이번의 목표
01. 저장된 json 파일을 이용하여 테이블을 출력해보자
이번 시간에는 디스크에 json파일을 다운받고 이를 출력하는 코드를 작성해보겠습니다.
예제로 사용할 json 파일은 아래의 파일입니다.
파일의 위치는 아래의 이미지를 참고하면 됩니다.
이번에 작성할 코드는 전송하는 데이터는 없고 받을 데이터만 있기 때문에 send() 까지의 과정은 기존과 동일합니다.
받은 데이터를 이용하여 페이지 요소의 값을 바꿔줘야하는데 이에 앞서 컨트롤러의 코드를 먼저 알아보겠습니다.
컨트롤러에서는 요청이 들어왔을때, 찾고자 하는 파일을 찾아가기 위한 경로를 찾아야합니다.
이때 사용되는 객체는 ClassPathResource 입니다. 매개변수로는 파일의 이름과 확장자 까지 모두 입력합니다.
ClassPathResource의 기본 root는 src/main/resources 이므로 root에 바로 위치한 ex05.json은 바로 파일만 입력하게 됩니다. 예시는 아래와 같습니다.
ClassPathResource resource = new ClassPathResource("ex05.json");
파일의 경로를 확인했으니 이제 파일에 직접적으로 접근하기 위한 객체가 필요합니다. 이때 사용되는 객체는 FileReader입니다. FileReader의 생성자는 File 자료형의 매개변수를 필요로합니다.
이때, ClassPathResource의 메서드중 getFile()의 반환값이 File이기 때문에 이것을 매개변수로 사용하겠습니다.
코드 예시는 아래와 같습니다.
FileReader reader = new FileReader(resource.getFile());
일반적으로는 생성된 FileReader 인스턴스를 이용하여 바로 파일에 접근이 가능합니다. 하지만 보다 빠른 통신을 하기 위해서 사용되는 것이 BufferedReader 라는 객체 입니다. BufferedReader의 생성자는 FileReader 자료형의 매개변수를 필요로 합니다. 생성 코드 예시는 아래와 같습니다.
BufferedReader buffer = new BufferedReader(reader);
이렇게 파일의 경로와 직접적으로 연결하기 위한 준비는 모두 끝마쳤습니다.
BufferedReader 에 있는 기능을 통해 파일을 읽고 이 값을 반환하여 출력해보겠습니다.
BufferedReader에는 readLine() 라는 메서드가 있습니다. 이 메서드는 파일의 한줄씩 읽어옵니다.
반복문과 readLine() 메서드를 활용하여 원하는 파일의 코드를 읽어올 수 있습니다.
readLine()이 더이상 읽을 코드가 없을때, 즉 파일을 모두 읽었을때에는 null을 반환합니다.
코드 예시는 아래와 같습니다.
String data = "";
while(true) {
String tmp = buffer.readLine();
if(tmp == null) {
break;
}
data += tmp;
}이렇게 읽어들인 데이터를 저는 data 라는 변수에 저장하여 return 했습니다.
이제 데이터를 받은 후 화면에 출력하기 위한 처리 과정을 보겠습니다.
과정에 앞서 현재 json의 코드는 cd 라는 키에 하나의 값이 있고 이 값들이 키:값의 형식을 가지는 형태를 가지고 있습니다.
먼저 받은 코드를 다시 변환하기 위해 JSON.parse() 를 통해 변환 하여 다시 사용할 수 있는 hashmap의 형태로 바꿔줍니다.
현재 필요로 하는 값은 cd키의 값들 이기 때문에 cd 값의 길이만큼 반복을 하여 값들을 html코드로 변환하여 return을 합니다.
이 예제의 코드는 아래에 있습니다.
01. 페이지 코드
02. 컨트롤러 코드
03. 실행 화면
01. 페이지 코드
<head>
<meta charset="UTF-8">
<title>ex03</title>
<script type="text/javascript">
var req;
function send() {
req = new XMLHttpRequest();
req.onreadystatechange = changeText
req.open('post','ex04')
req.setRequestHeader('Content-Type',"application/json; charset=UTF-8")
req.send()
}
function changeText() {
if(req.readyState==4 && req.status==200){
var tbody = document.getElementById('tbody')
tbody.innerHTML = "아직은 데이터가 없음"
var resData = JSON.parse(req.responseText)
var printData =''
for(i = 0; i < resData.cd.length; i++){
printData += "<tr><td>"+resData.cd[i].title+"</td>"
printData += "<td>"+resData.cd[i].artist+"</td>"
printData += "<td>"+resData.cd[i].price+"</td></tr>"
}
tbody.innerHTML = printData
}
}
</script>
</head>
<body>
<button type="button" onclick="send()">실행</button>
<table border="1">
<thead>
<tr>
<th>title</th>
<th>artist</th>
<th>price</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</body>02. 컨트롤러 코드
@GetMapping("ex04")
public String ex04Get() {
return "ajax/ex04";
}
@ResponseBody
@PostMapping(value="ex04", produces = "application/json; charset=UTF-8")
public String ex04Post() throws FileNotFoundException, IOException {
ClassPathResource resource = new ClassPathResource("ex05.json");
FileReader reader = new FileReader(resource.getFile());
BufferedReader buffer = new BufferedReader(reader);
String data = "";
while(true) {
String tmp = buffer.readLine();
if(tmp == null) {
break;
}
data += tmp;
}
return data;
}03. 실행 화면
'Spring framwork' 카테고리의 다른 글
| 16주차 - Spring (16) json 파일의 내용을 데이터베이스에 저장해보자 (0) | 2022.10.24 |
|---|---|
| 16주차 - Spring (15) 키워드로 파일에서 원하는 목록을 찾아보자 (0) | 2022.10.24 |
| 16주차 - Spring (13) Json을 이용하여 ajax를 사용해보자 (0) | 2022.10.21 |
| 16주차 - Spring (12) ajax를 통해 데이터를 주고받아보자 (0) | 2022.10.21 |
| 16주차 - Spring (11) Json, Gson에 대해 알아보자 (0) | 2022.10.21 |