- @RestController //Controller + ResponseBody(์ปจํธ๋กค๋ฌ์์ ์๋ต์ ์์ฒญ์ด ๋ค์ด์จ๊ณณ์ผ๋ก ๋ฐ๊ฟ) ํฉ์ฑ์ด





JSON ํ์์ ๋ฐํ
1. Vo ํ์

2. Map ํ์

jsonํ์์ผ๋ก ๋ฐ์ดํฐ ์ ์ก
@RequestBody - JSON๋ฐ์ดํฐ๋ฅผ -> ์๋ฐ ์ค๋ธ์ ํธ๋ก ๋ณํํด์ ๋งตํ
{ "name" : "ํ๊ธธ๋", "age" : 20, "addr" : "์์ธ์์" }

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script> $("#getBtn").click(function() { $.ajax({ type : "get", //์์ฒญ๋ฐฉ์ url : "/getData2/1/์ด์์ ", //์์ฒญ์ฃผ์ success : function(data) { console.log(data) }, error: function(err, status) { console.log(err) } }) }) $("#postBtn").click(function() { $.ajax({ type : "post", //์์ฒญ๋ฐฉ์ url : "/getEntity", //์์ฒญ๋ฐฉ์ data : JSON.stringify({num : 1, name : "ํ์์"}), //๋ณด๋ผ๋ฐ์ดํฐ contentType : "application/json", //๋ณด๋ผ๋ฐ์ดํฐ์ ๋ํ ํ์
dataType : "json", //์๋ฒ๊ฐ ๋ฆฌํดํ๋ ๋ฐ์ดํฐ ํ์
(์๋ต๊ฐ๋ฅ) success : function(data) { console.log(data); }, error : function(err, status) { console.log(err); } }) }) </script>

/////////////////////////////////////////////////////////////////////////////// //์๋ต๋ฌธ์ ๋ช
ํํ๊ฒ ์์ฑํ๊ธฐ ResponseEntity<๋ฐ์ดํฐํ์
> //@CrossOrigin({"http://127.0.0.1:5500", "http://localhost:5500"}) @CrossOrigin("*") //๋ชจ๋ ์๋ฒ์ ๋ํ ์์ฒญ์ ์น์ธํจ(์ํํ ์ ์์) @PostMapping("/getEntity") public ResponseEntity<TestVO> getEntity( @RequestBody TestVO v) { System.out.println("๋ฐ์ ๋ฐ์ดํฐ:" + v.toString()); TestVO vo = new TestVO(1, "ํ๊ธธ๋", 20, "์์ธ์"); //1st //ResponseEntity entity = new ResponseEntity(HttpStatus.BAD_REQUEST); //ResponseEntity entity = new ResponseEntity(vo, HttpStatus.BAD_REQUEST); //2nd HttpHeaders header = new HttpHeaders(); header.add("Authorization", "Bearer JSON WEB TOKEN~" ); //ํค, ๊ฐ header.add("Content-Type", "application/json"); //produce์ ๊ฐ์ ํํ //header.add("Access-Control-Allow-Origin", "http://example.com"); ResponseEntity entity = new ResponseEntity(vo, header, HttpStatus.OK); //๋ฐ์ดํฐ, ํค๋, ์ํ๊ฐ return entity; } /////////////////////////////////////////////////////////////// /* ์์ฒญ์ฃผ์ : /api/v1/getData ๋ฉ์๋ : get ์์ฒญ ํ๋ผ๋ฏธํฐ : sno(์ซ์), name(๋ฌธ์) ์๋ต ํ๋ผ๋ฏธํฐ : MemoVO ํค๋์ ๋ด์ ๋ด์ฉ HttpStatus.OK fetch API ์ฌ์ฉํด์ ํด๋ผ์ด์ธํธ์ ์์ฒญ ์๋ต */ @GetMapping("/api/v1/getData") public ResponseEntity<MemoVO> exampleData(@RequestParam("sno") int sno, @RequestParam("name") String name) { System.out.println(sno + ", " + name); return new ResponseEntity<MemoVO>( new MemoVO(1L, "ํ๊ธธ๋", "1234", null, "Y") , HttpStatus.OK); } /* ์์ฒญ์ฃผ์ : /api/v1/getInfo ๋ฉ์๋ : post ์์ฒญ ํ๋ผ๋ฏธํฐ : MemoVOํ์
์๋ต ํ๋ผ๋ฏธํฐ : List<MemoVO>ํ์
ํค๋์ ๋ด์ ๋ด์ฉ HttpStatus.OK fetch API ์ฌ์ฉํด์ ํด๋ผ์ด์ธํธ์ ์์ฒญ ์๋ต */ @PostMapping("/api/v1/getInfo") public ResponseEntity<List<MemoVO>> getInfo(@RequestBody @Valid MemoVO vo, BindingResult binding) { if(binding.hasErrors()) { System.out.println("์ ํจ์ฑ ๊ฒ์ฆ์ ์คํจํจ"); return new ResponseEntity<>(null, HttpStatus.BAD_REQUEST); } //DB.... List<MemoVO> list = new ArrayList<>(); list.add(vo); return new ResponseEntity<>(list, HttpStatus.OK); }
@RestController //Controller + ResponseBody(์ปจํธ๋กค๋ฌ์์ ์๋ต์ ์์ฒญ์ด ๋ค์ด์จ๊ณณ์ผ๋ก ๋ฐ๊ฟ) ํฉ์ฑ์ด public class RestBasicController { @GetMapping("/hello") public String hello() { return "์ด๊ฒ ๋ฌด์ผ??"; //์์ฒญ์ ๋ณด๋ธ๊ณณ์ผ๋ก ์๋ตํ๊ฒ ๋ฉ๋๋ค. } @GetMapping("/hello2") public String[] hello2() { return new String[] {"ํ", "๊ธธ", "๋"}; //์์ฒญ์ ๋ณด๋ธ๊ณณ์ผ๋ก ์๋ตํ๊ฒ ๋ฉ๋๋ค. } //////////////////////////////////////////////////////////////////////// //get๋ฐฉ์ ์์ฒญ๋ฐ๊ธฐ - ์ผ๋ฐ์ปจํธ๋กค๋ฌ์์ ๋ฐ๋ํ์๊ณผ ๋๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ๊ฐ๋ฅํจ //http://localhost:8181/getData?num=1&name=ํ๊ธธ๋ //1st // @GetMapping("/getData") // public String getData(TestVO vo) { // System.out.println(vo.toString()); // return "getData"; // } @GetMapping("/getData") public String getData(@RequestParam("num") int num, @RequestParam("name") String name) { System.out.println(num + ", " + name ); return "getData"; } //ํจ์ค๋ฒ ๋ฆฌ์ด๋ธ ๋ฐฉ์ //http://localhost:8181/getData2/1/ํ๊ธธ๋ @GetMapping("/getData2/{num}/{name}") public String getData2(@PathVariable("num") int num, @PathVariable("name") String name) { System.out.println(num + "," + name); return "success"; } //๋ฐํ์ JSONํ์์ผ๋ก ํ๋ ค๋ฉด Mapํ์
์ด๋ VO๋ฅผ ์ฐ๋ฉด ๋ฉ๋๋ค. (list, ๋ฐฐ์ด๋ ๋จ) //Jackson-databind๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์ํจ(์คํ๋ง๋ถํธ์ ๊ธฐ๋ณธ ํฌํจ๋จ) //1st // @GetMapping("/returnData") // public TestVO returnData() { // return new TestVO(1, "์๋ฒ์์๋ฐํ", 20, "์์ธ์"); // } //2nd @GetMapping("/returnData") public Map<String, Object> returnData() { Map<String, Object> map = new HashMap<>(); map.put("num", 1); map.put("name", "ํ๊ธธ๋"); map.put("arr", Arrays.asList("a", "b", "c")); return map; } /////////////////////////////////////////////////////////////////// //post๋ฐฉ์ - ์๋น์(์ฌ์ฉ์) ์ ์ ๊ณต์(์๋ฒ) ์ด ๋์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๊ท์ฝ์ด ์ ํํ๊ฒ ์ง์ผ์ ธ์ผ ํจ //formํ์์ผ๋ก ๋ฐ์ดํฐ ์ ์ก - ์๋น์ ๋ฐ์ดํฐ๋ฅผ Formํ์์ผ๋ก ๋ฐ๋์ ๋ง๋ค์ด์ ๋ณด๋ด์ผ ํจ //http://localhost:8181/getForm @PostMapping("/getForm") public String getForm( TestVO vo ) { System.out.println(vo.toString()); return "success"; } //jsonํ์์ผ๋ก ๋ฐ์ดํฐ ์ ์ก //@RequestBody - JSON๋ฐ์ดํฐ๋ฅผ -> ์๋ฐ ์ค๋ธ์ ํธ๋ก ๋ณํํด์ ๋งตํ //{ "name" : "ํ๊ธธ๋", "age" : 20, "addr" : "์์ธ์์" } //1st // @PostMapping("/getJSON") // public String getJSON( @RequestBody TestVO vo) { // System.out.println(vo.toString()); // return "success"; // } @PostMapping("/getJSON") public String getJSON( @RequestBody Map<String, Object> map) { System.out.println(map.toString()); return "success"; } //@PutMapping (์์ ), @DeleteMapping (์ญ์ ) - Post๋ฐฉ์๊ณผ ๊ฑฐ์ ์ ์ฌํจ /////////////////////////////////////////////////////////////////////////////// //consumer - ๋ฐ๋์ ์ดํ์
์ผ๋ก ๋ณด๋ด๋ผ!! ์๊ทธ๋ผ ์ฃฝ๋๋ค. //producer - ๋ด๊ฐ ์ดํ์
์ผ๋ก ์ค๊ฒ!! //๊ธฐ๋ณธ๊ฐ์ - "application/json" ์
๋๋ค. @PostMapping(value = "/getResult", produces = "text/html", consumes = "text/plain") public String getResult( @RequestBody String str ) { System.out.println(str); return "<h3>๋ฌธ์์ด</h3>"; } /////////////////////////////////////////////////////////////////////////////// //์๋ต๋ฌธ์ ๋ช
ํํ๊ฒ ์์ฑํ๊ธฐ ResponseEntity<๋ฐ์ดํฐํ์
> //@CrossOrigin({"http://127.0.0.1:5500", "http://localhost:5500"}) @CrossOrigin("*") //๋ชจ๋ ์๋ฒ์ ๋ํ ์์ฒญ์ ์น์ธํจ(์ํํ ์ ์์) @PostMapping("/getEntity") public ResponseEntity<TestVO> getEntity( @RequestBody TestVO v) { System.out.println("๋ฐ์ ๋ฐ์ดํฐ:" + v.toString()); TestVO vo = new TestVO(1, "ํ๊ธธ๋", 20, "์์ธ์"); //1st //ResponseEntity entity = new ResponseEntity(HttpStatus.BAD_REQUEST); //ResponseEntity entity = new ResponseEntity(vo, HttpStatus.BAD_REQUEST); //2nd HttpHeaders header = new HttpHeaders(); header.add("Authorization", "Bearer JSON WEB TOKEN~" ); //ํค, ๊ฐ header.add("Content-Type", "application/json"); //produce์ ๊ฐ์ ํํ //header.add("Access-Control-Allow-Origin", "http://example.com"); ResponseEntity entity = new ResponseEntity(vo, header, HttpStatus.OK); //๋ฐ์ดํฐ, ํค๋, ์ํ๊ฐ return entity; } /////////////////////////////////////////////////////////////// /* ์์ฒญ์ฃผ์ : /api/v1/getData ๋ฉ์๋ : get ์์ฒญ ํ๋ผ๋ฏธํฐ : sno(์ซ์), name(๋ฌธ์) ์๋ต ํ๋ผ๋ฏธํฐ : MemoVO ํค๋์ ๋ด์ ๋ด์ฉ HttpStatus.OK fetch API ์ฌ์ฉํด์ ํด๋ผ์ด์ธํธ์ ์์ฒญ ์๋ต */ @GetMapping("/api/v1/getData") public ResponseEntity<MemoVO> exampleData(@RequestParam("sno") int sno, @RequestParam("name") String name) { System.out.println(sno + ", " + name); return new ResponseEntity<MemoVO>( new MemoVO(1L, "ํ๊ธธ๋", "1234", null, "Y") , HttpStatus.OK); } /* ์์ฒญ์ฃผ์ : /api/v1/getInfo ๋ฉ์๋ : post ์์ฒญ ํ๋ผ๋ฏธํฐ : MemoVOํ์
์๋ต ํ๋ผ๋ฏธํฐ : List<MemoVO>ํ์
ํค๋์ ๋ด์ ๋ด์ฉ HttpStatus.OK fetch API ์ฌ์ฉํด์ ํด๋ผ์ด์ธํธ์ ์์ฒญ ์๋ต */ @PostMapping("/api/v1/getInfo") public ResponseEntity<List<MemoVO>> getInfo(@RequestBody @Valid MemoVO vo, BindingResult binding) { if(binding.hasErrors()) { System.out.println("์ ํจ์ฑ ๊ฒ์ฆ์ ์คํจํจ"); return new ResponseEntity<>(null, HttpStatus.BAD_REQUEST); } //DB.... List<MemoVO> list = new ArrayList<>(); list.add(vo); return new ResponseEntity<>(list, HttpStatus.OK); }
<button type="button" id="ex01">ex01</button> <button type="button" id="ex02">ex02</button> <script> var ex01 = document.getElementById("ex01"); ex01.addEventListener("click", function() { fetch("/api/v1/getData?sno=1&name=์ด์์ ") .then(function(response) { return response.json() //์๋ต json }) .then(function(data) { console.log(data) }) }) var ex02 = document.getElementById("ex02"); ex02.addEventListener("click", function() { fetch("/api/v1/getInfo", { method : "post", headers : { "Content-type" : "application/json" }, body : JSON.stringify({memo: "ํ๊ธธ๋123123", phone: "010-1234-1234"}) }) .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); }) }) </script>