SPRING - SPRING FRAMEWORK 3 json

최성현·2023년 10월 12일
JSON - 배열json
0

SPRING FRAMEWORK 3

목록 보기
6/10

pom.xml 설정

mvn repository 추가

		<!-- json용 repository -->
		<!-- jackson-databind -->
		<!-- ajax사용하기 위해서 json repositry 사용 -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>2.14.2</version>
		</dependency>

HomeController

폼 띄우기 mapping

	@GetMapping("/jsonex1")
	public String ex1()
	{
		return "ex1";
	}
	
	@GetMapping("/jsonex2")
	public String ex2()
	{
		return "ex2";
	}

HomeController.jav

package spring.mvc.json;

import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import javax.annotation.processing.Generated;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
	
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
	
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		return "start";
	}
	
	@GetMapping("/jsonex1")
	public String ex1()
	{
		return "ex1";
	}
	
	@GetMapping("/jsonex2")
	public String ex2()
	{
		return "ex2";
	}
	
}

JsonTestController

@ResponseBody

일반적인 @Controller에서
json으로 처리한다음 웹에 출력하고 싶을때 @ResponseBody 사용

Map

list db를 가져오기 위해서 List<> 사용
Map은 json 간단하게 테스트하기 위해서 사용

Map은 인터페이스 이기 때문에 뒤에 생성은 HashMap으로 생성

json 테스트

바로 확인하고 싶으면 위에 @GetMapping("/list1")에 있는 mapping 주소를 url에 수정해서 확인 가능

@GetMapping("/list1")
	// 일반적인 @Controller에서
	// json으로 처리한다음 웹에 출력하고 싶을때 @ResponseBody 사용
	// 바로 확인하고 싶으면 위에 @GetMapping("/list1")에 있는 mapping 주소를 url에 수정해서 확인 가능 
	@ResponseBody /* json 처리 후 브라우저로 출력(일반 컨트롤러일 경우) */
	//list db를 가져오기 위해서 List<> 사용
	//Map은 json 간단하게 테스트하기 위해서 사용
	public Map<String, String> list1()
	{
		//Map은 인터페이스 이기 때문에 뒤에 생성은 HashMap으로 생성
		Map<String, String> map=new HashMap<String, String>();
		
		map.put("name", "장순영"); // -> {"name":"장순영"}으로 변환되게해야지 json형태
		map.put("hp", "010-222-3333");
		map.put("addr", "수원시 장안구");
		
		return map;
	}

ex1.jsp

ajax 사용시 url은 mapping 주소 넣어준다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h3>ex1번 예제</h3>
	<br>
	<button type="button" id="btn1" class="btn btn-info">list1 json데이터 출력하기</button>
	
	<div id="out1"></div>
	
	<script type="text/javascript">
		$("#btn1").click(function(){
			
			$.ajax({
				
				type:"get",
				dataType:"json",
				/* url에는 mapping 주소 넣어준다 */
				url:"list1",
				success:function(res){
					
					$("#out1").empty();
					$("#out1").append("이름: "+res.name+"<br>");
					$("#out1").append("핸드폰: "+res.hp+"<br>");
					$("#out1").append("주소: "+res.addr+"<br>");
					
				}
			});
		});
	</script>
</body>
</html>

JsonTest2Controller

@RestController

json처리 전용 컨트롤러
json으로 처리해서 브라우저로 띄어주는 것만 가능...오로지 ajax를 위한 Controller

JsonTest2Controller.java

package spring.mvc.json;

import java.util.HashMap;
import java.util.Map;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

//json으로 처리해서 브라우저로 띄어주는 것만 가능...오로지 ajax를 위한 Controller
@RestController /* json처리 전용 컨트롤러 */
public class JsonTest2Controller {

	@GetMapping("/list2")
	public Map<String, String> list2()
	{
		Map<String, String> map=new HashMap<String, String>();
		
		map.put("product", "맥북");
		map.put("price", "250만원");
		map.put("warrenty", "구입일로부터 2년까지");
		
		return map;
	}
}

ex2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h3>ex2번 예제</h3>
	<br>
	<button type="button" id="btn2" class="btn btn-danger">list2 json데이터 출력하기</button>
	
	<div id="out2"></div>
	
	<script type="text/javascript">
		$("#btn2").click(function(){
			
			$.ajax({
				
				data:"get",
				dataType:"json",
				url:"list2",
				success:function(data){
					
					$("#out2").empty();
					$("#out2").append("상품이름: "+data.product+"<br>");
					$("#out2").append("상품가격: "+data.price+"<br>");
					$("#out2").append("보증기간: "+data.warrenty+"<br>");
					
				}
			});
		});
	</script>
	
</body>
</html>

Json 배열

@ResponseBody

위치는 위나 아래나 상관없다
list 복수의 데이터 넣으려고 사용

List<>

dto꾸러미를 넣기 위해 list 생성
<>안에 들어간 자료형,클래스에 따라서 넣은 수 있다

		List<PhotoDto> list=new ArrayList<PhotoDto>();

List값 넣기

dto에 만든 생성자 인자값에 ("냥뇽녕냥1", "1.jpeg")을 넣어줘서 순서대로 name 과 photo로 받을 수 있다

		list.add(new PhotoDto("냥뇽녕냥1", "1.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥2", "2.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥3", "3.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥4", "4.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥6", "6.jpeg"));
		
		return list;

JsonTextController.java

	@GetMapping("/list3")
	//@ResponseBody의 위치는 위나 아래나 상관없다
	//list 복수의 데이터 넣으려고 사용
	public @ResponseBody List<PhotoDto> list3()
	{
		//dto꾸러미를 넣기 위해 list 생성
		//<>안에 들어간 자료형,클래스에 따라서 넣은 수 있다
		List<PhotoDto> list=new ArrayList<PhotoDto>();
		
		//dto에 만든 생성자 인자값에 ("냥뇽녕냥1", "1.jpeg")을 넣어줘서 순서대로 name 과 photo로 받을 수 있다
		list.add(new PhotoDto("냥뇽녕냥1", "1.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥2", "2.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥3", "3.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥4", "4.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥6", "6.jpeg"));
		
		return list;
	}

ex3

figure 태그 : 사진을 담는 태그
figcaption 태그 : 설명을 담는 태그

	<script type="text/javascript">
		$("#btn3").click(function(){
			
			$.ajax({
				
				data:"get",
				dataType:"json",
				url:"list3",
				success:function(res){
					
					var s="";
					
					$.each(res,function(i,elt){
						
						/* figure 사진을 담는 태그 / figcaption 설명을 담는 태그 */
						s+="<figure>";
						s+="<img src='image/"+elt.photo+"' width='100'>";
						s+="<figcaption><b>";
						s+=elt.name;
						s+="</b></figcaption>";
						s+="</figure>";
					});
					
					
					$("#out3").html(s);
				}
			});
		});
	</script>

ex3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h3>ex3번 예제</h3>
	<br>
	<button type="button" id="btn3" class="btn btn-warning">list3 json 배열 데이터 출력하기</button>
	
	<div id="out3"></div>
	
	<script type="text/javascript">
		$("#btn3").click(function(){
			
			$.ajax({
				
				data:"get",
				dataType:"json",
				url:"list3",
				success:function(res){
					
					var s="";
					
					$.each(res,function(i,elt){
						
						/* figure 사진을 담는 태그 / figcaption 설명을 담는 태그 */
						s+="<figure>";
						s+="<img src='image/"+elt.photo+"' width='100'>";
						s+="<figcaption><b>";
						s+=elt.name;
						s+="</b></figcaption>";
						s+="</figure>";
					});
					
					
					$("#out3").html(s);
				}
			});
		});
	</script>
	
</body>
</html>

Json 배열 2

인자값

이름 입력칸에 입력하는 name을 가져오기 위해 인자값에 그 name을 가져오는 것을 줬다
db에 넣어주려면 form에 있는 @RequestParam을 가져오는 것이지만
지금은 인위적으로 값을 넣어주기 위해서 dto에 있는 name을 가져온 것

ex4에 있는 input창에 입력하는 것이 parameter값

public Map<String, Object> list4(@RequestParam String name)

dao 생성자 값 넣기

		list.add(new PhotoDto("냥뇽녕냥1", "1.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥2", "2.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥3", "3.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥4", "4.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥6", "6.jpeg"));

map 생성

list가 반복하는 동안 같은 냥뇽녕냥(번호)가 있다면 나오도록 map에 넣어줘야하기 때문에 생성

Map<String, Object> map=new HashMap<String, Object>();

map 초기 값

list에 넣어준 값이 아닌 경우 없는 사진을 주기 위해 먼저 만들어줌

		map.put("name", "없는 사진");
		map.put("photo", "5.jpeg");

list 값 추가

위에 생성자에 해당하는 것을 만든 것을 dto에 넣어주는데 칸에 입력한 이름이 같으면 map에 1개의 list값을 넣어준다

		for(PhotoDto dto:list)
		{
			//input칸에 입력한 값이 list에 넣은 값(dto.getName())과 일치하면 map에 넣어준다
			if(name.equals(dto.getName()))
			{
				map.put("name", dto.getName());
				map.put("photo", dto.getPhoto());
			}
		}

JsonText2Controller.java

	@GetMapping("/list4")
	//이름 입력칸에 입력하는 name을 가져오기 위해 인자값에 그 name을 가져오는 것을 줬다
	//db에 넣어주려면 form에 있는 @RequestParam을 가져오는 것이지만
	//지금은 인위적으로 값을 넣어주기 위해서 dto에 있는 name을 가져온 것
	
	//ex4에 있는 input창에 입력하는 것이 parameter값
	public Map<String, Object> list4(@RequestParam String name)
	{
		List<PhotoDto> list=new ArrayList<PhotoDto>();
		
		
		//dto에 있는 생성자에 해당하는 것을 만든 것
		list.add(new PhotoDto("냥뇽녕냥1", "1.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥2", "2.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥3", "3.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥4", "4.jpeg"));
		list.add(new PhotoDto("냥뇽녕냥6", "6.jpeg"));
		
		//list가 반복하는 동안 같은 냥뇽녕냥(번호)가 있다면 나오도록 map에 넣어줘야하기 때문에 생성
		Map<String, Object> map=new HashMap<String, Object>();
		//list에 넣어준 값이 아닌 경우 없는 사진을 주기 위해 먼저 만들어줌
		map.put("name", "없는 사진");
		map.put("photo", "5.jpeg");
		
		//위에 생성자에 해당하는 것을 만든 것을 dto에 넣어주는데 칸에 입력한 이름이 같으면 map에 1개의 list값을 넣어준다
		for(PhotoDto dto:list)
		{
			//input칸에 입력한 값이 list에 넣은 값(dto.getName())과 일치하면 map에 넣어준다
			if(name.equals(dto.getName()))
			{
				map.put("name", dto.getName());
				map.put("photo", dto.getPhoto());
			}
		}
		
		return map;
	}
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

SPRING - SPRING FRAMEWORK 3 myBatis

다음 포스트

SPRING - SPRING FRAMEWORK 3 db fileupload

0개의 댓글