[Mapping]
@PutMapping C
@DeleteMapping D
@PatchMapping U
API서버에서 받아서 디비에 넣어야해서 Rest형태로 만들어서 작동시킴
예 ) /api/data.do/{data}
=> 주로 배열로 처리해서 파라미터 형식으로 보냄
=> 컨트롤 눌러서 들어가보면 파라미터로 받는게 JSON이랑 디티오같은게 없음
Jackson
DTO로 받으려면 Jackson -> Ajax-> JSON
Spring-boot가면 Jackson 필요없음
GSON : 구글에서 제공하는 라이브러리
==========통신 방식이 다름===========
@GetMapping, @PostMapping R
=> HTML 형식으로 Server에 전송 (name="")형태
=> JSON 허락
예) /api/data.do
[선요약]
Ajax : Javascript, ECMA, Jquery 세가지 방식으로 Put 전송
프론트에서 정보가 String으로 백에 전송
String을 JSON을 이용하여 나눠서 Iterator를 이용하여 키와 값으로 나누어 Map으로 저장
[@PutMapping]
Front-end 에게 DTO로 보내세요 라고 하면
name => Mybatis => insert
1. Mybatis => DTO => insert
2. Map<K,V> => Mybatis => insert
DTO로 받는것은 Get,Post뿐임
DTO처럼 Put을 받으려면 DTO로 만들어야됨
Jackson 안쓰고 dto를 저장하기위한 핸들링 방식
1. 직접넣기
String으로 배열을 받으명 {}이렇게 오니까
String으로 받은 배열을 JSONObject를 이용해서 풀어줌
dto객체를 하나 새로 만들어서 일일히 하나하나 직접 넣기..
2. Map으로 넣기
String을 Iterator를 이용해서 반복문 돌려 키,값으로 저장
2번 방식을 사용한 Spring Controller 코드
@PutMapping("/ajax/ajax14/{key}") //insert (DTO기본)
public String ajax14(ServletResponse res, @PathVariable(name = "key") String key,
@RequestBody String data
) {
try {
this.pw = res.getWriter();
if (key.equals("a123456")) {
this.logger.info(data);
//String => Map 해서 저장
Map<String,String> mp = new HashMap<String, String>();
JSONObject jo = new JSONObject(data);
Iterator<String> keys = jo.keys(); //Iterator : 키만 뽑는 인터페이스
while(keys.hasNext()) {
String keynm = keys.next(); //키명
mp.put(keynm, jo.getString(keynm).toString());
}
// this.logger.info(mp.toString());
int result = this.dao.api_mapper(mp);
// this.logger.info(String.valueOf(result));
if(result > 0) {
this.pw.write("ok"); //프론트에서 Ajax로 보내오면 백은 pw.write로 메세지를 적어줌! alert는 프론트가 처리함!
}else {
this.pw.write("no");
}
} else {
this.pw.write("key error");
}
} catch (Exception e) {
}
return null;
}[코드]
[Put으로 저장]
Oracle 테이블 쿼리문
-- 시퀀스 만들기
create SEQUENCE mno start WITH 1 INCREMENT BY 1 MAXVALUE 500 NOCYCLE NOCACHE;
-- 테이블 만들기
-- 주의!!! NVARCHAR는 없음 NVARCHAR2만 있을뿐!!!
create table PDS(
MIDX NUMBER(5) NOT NULL,
PD1 NVARCHAR2(50) NULL,
PD2 NVARCHAR2(50) NULL,
PD3 NVARCHAR2(50) NULL,
PD4 NVARCHAR2(50) NULL,
PD5 NVARCHAR2(50) NULL,
PRIMARY KEY(MIDX)
);
SELECT * FROM PDS;api_dto.java
package api;
import org.springframework.stereotype.Repository;
import lombok.Data;
@Repository("api_dto")
@Data
public class api_dto {
String pd1,pd2,pd3,pd4,pd5;
String midx,mid,mname;
}mapper.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="api.api_mapper">
<insert id="pdtest">
insert into PDS (MIDX,pd1,pd2,pd3,pd4,pd5) values (mno.nextval,#{pd1},#{pd2},#{pd3},#{pd4},#{pd5})
</insert>
<select id="pdlist" resultType="api_dto">
select * from pds order by midx desc
</select>
</mapper>Ajax : Javascript, ECMA, Jquery 세가지 방식으로 Put 전송
ajax13.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - @PutMapping => DTO로 처리 </title>
<script src="./jquery.js"></script>
<script>
$(function() {
$("#jqbtn").click(function() {
$.ajax({
url : "./ajax14/a123456",
cache : false,
type : "PUT",
dataType : "html",
contentType : "application/json",
data : JSON.stringify({
pd1 : document.querySelector("#pd1").value,
pd2 : document.querySelector("#pd2").value,
pd3 : document.querySelector("#pd3").value,
pd4 : document.querySelector("#pd4").value,
pd5 : document.querySelector("#pd5").value
}),
success : function($data) {
console.log($data);
},
error : function() {
console.log("통신 오류 발생!");
}
});
});
});
</script>
</head>
<body>
입력값 : <input type="text" id="pd1"><br>
입력값 : <input type="text" id="pd2"><br>
입력값 : <input type="text" id="pd3"><br>
입력값 : <input type="text" id="pd4"><br>
입력값 : <input type="text" id="pd5"><br>
<input type="button" value="JS Ajax전송" onclick="ajax_put()">
<input type="button" value="ES Ajax전송" id="btn">
<input type="button" value="jquery Ajax전송" id="jqbtn">
</body>
<!-- JS -->
<script>
function ajax_put(){
var a= 1;
while(a < 6){
//eval() : 문자형태를 Script화 시켜주는 역할 함수
//eval을 이용해 동적으로 변수 생성
eval("pd" + a + " = document.getElementById('pd" + a + "').value;");
//eval("var pd"+a +"="+ document.getElementById("pd"+a).value); //한글 안됨
a++;
}
// 키배열 pd1 ~ pd5
var keyarray = {
pd1: pd1,
pd2: pd2,
pd3: pd3,
pd4: pd4,
pd5: pd5
};
var json = JSON.stringify(keyarray);
console.log(json);
var http,result;
http = new XMLHttpRequest();
http.open("PUT","./ajax14/a123456",false);
//여기서 헤더는 상관없음
// http.setRequestHeader("content-type","application/json");
// http.setRequestHeader("content-type","application/x-www-form-urlencoded");
http.onload = function() {
result = this.response;
if(result == "ok"){
alert("저장 완료");
//location.href.reload(); // reload 오류 발생가능
//window.location.reload(); // 그냥 아래처럼 사용함
location.reload();
}else{
alert("저장 실패");
}
console.log(result);
}
http.onerror = function() {
console.log("통신오류!!");
}
// http.send(keyarray);
http.send(json);
}
</script>
<!-- ES -->
<script type="module">
import {api_insert} from "./ajax13.js";
document.querySelector("#btn").addEventListener("click",function(){
new api_insert().api_put();
});
</script>
</html>ajax13.js
export class api_insert {
api_put() {
fetch("./ajax14/a123456", {
method : "PUT",
headers : {"content-type":"application/json"},
//headers : {"content-type":"application/x-www-form-urlencoded"}, //post로 전송할때 이거로하면 넘어감
body : JSON.stringify({
pd1 : document.querySelector("#pd1").value,
pd2 : document.querySelector("#pd2").value,
pd3 : document.querySelector("#pd3").value,
pd4 : document.querySelector("#pd4").value,
pd5 : document.querySelector("#pd5").value
})
}).then(function(aa) {
return aa.text();
}).then(function(bb) {
if (bb == "ok") {
alert("저장 완료");
location.reload();
} else {
alert("저장 실패");
}
}).catch(function(error) {
console.log(error);
});
}
}api_mapper.java
package api;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface api_mapper {
public int api_mapper(Map<String,String> data); //map
public List<api_dto> pdlist();
}api_dao.java
package api;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.stereotype.Repository;
@Repository("api_dao")
public class api_dao implements api_mapper{
int result = 0;
@Resource(name="sqltemp")
public SqlSessionTemplate ss;
@Override
public int api_mapper(Map<String, String> data) {
this.result = ss.insert("pdtest",data);
return this.result;
}
@Override
public List<api_dto> pdlist() {
List<api_dto> all = ss.selectList("pdlist");
return all;
}
}Spring Controller 저장 메소드
@PutMapping("/ajax/ajax14/{key}") //insert (DTO기본)
public String ajax14(ServletResponse res, @PathVariable(name = "key") String key,
@RequestBody String data
) {
try {
this.pw = res.getWriter();
if (key.equals("a123456")) {
this.logger.info(data);
//String => Map 해서 저장
Map<String,String> mp = new HashMap<String, String>();
JSONObject jo = new JSONObject(data);
Iterator<String> keys = jo.keys(); //Iterator : 키만 뽑는 인터페이스
while(keys.hasNext()) {
String keynm = keys.next(); //키명
mp.put(keynm, jo.getString(keynm).toString());
}
// this.logger.info(mp.toString());
int result = this.dao.api_mapper(mp);
// this.logger.info(String.valueOf(result));
if(result > 0) {
this.pw.write("ok"); //프론트에서 Ajax로 보내오면 백은 pw.write로 메세지를 적어줌! alert는 프론트가 처리함!
}else {
this.pw.write("no");
}
} else {
this.pw.write("key error");
}
} catch (Exception e) {
}
return null;
}[Get으로 출력]
api_list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Oracle Data를 API로 전달 받아 WEB에 출력</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>내용1</th>
<th>내용2</th>
<th>내용3</th>
<th>내용4</th>
<th>내용5</th>
</tr>
</thead>
<tbody id="table_view">
</tbody>
</table>
</body>
<script type="module">
import {api_select} from "./api_list.js?v=2";
api_select();
</script>
</html>api_list.js
export function api_select(){
fetch("./api_select.do?key=koo",{
method : "GET",
//data : "key=koo" //Post 일때 key보내는법
}).then(function(aa){
return aa.json(); //json() : JSON.parse 사용과 동일 (ecma)
//text() : 문자열
}).then(function(bb) {
//forEach, for in (ECMA), Jquery (forEach, Each, for in) =>Jquery가 선택의 폭이 넓어서 사람들이 좋아함
//react : forEach, Map / Vue : Map, forEach, filter
bb["data_all"].forEach(function(a, b, c) { //a : 배열 데이터, b : 배열 그룹번호, c : 전체배열
//console.log(a["pd1"]);
//innerHTML로 배열값을 웹페이지에 출력하는 코드
document.querySelector("#table_view").innerHTML += `
<tr data-index='`+a["midx"]+`'>
<td>`+b+`</td>
<td>`+a["pd1"]+`</td>
<td>`+a["pd2"]+`</td>
<td>`+a["pd3"]+`</td>
<td>`+a["pd4"]+`</td>
<td>`+a["pd5"]+`</td>
</tr>
`
});
}).catch(function(error){
console.log(error);
});
}api_controller2.java
package api;
import java.io.PrintWriter;
import java.util.List;
import javax.annotation.Resource;
import org.json.JSONArray;
import org.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
//외부에서 다른도메인으로 접속시 발생하는 CORS 방지하는 어노테이션
//origins : 접속 ip 도메인 설정 => 보안 (실무에서는 "*"쓰면 안됨 위험 직접 설정하는것을 주로 씀)
//@CrossOrigin(origins = {"localhost:8080","http://???.???.???.???:8080","http://abc.co.kr"}, allowedHeaders = "*")
//allowedHeaders : "POST","GET","PUT" 맵핑만 받겠다는 의미 => 보안
@CrossOrigin(origins = "*", allowedHeaders = "*")
//주의!!! @RestController 이놈은 절대 view를 찾지 않음!!
//그래서 return에 페이지 적어도 view로 이동하지 않음 view를 찍으려면 @Conroller사용 => view 사용 가능 단, 보안상 API View일 경우 외부에서 직접적으로 jsp 접근을 차단
//@RestController => view를 사용하지 않음 => PrintWriter + res.setContentType 사용
//면접 질문! @RestController와 @Controller의 차이점 : View를 사용할수있는지 여부
@Controller
public class api_controller2 {
private static final Logger logger = LoggerFactory.getLogger(api_controller2.class);
PrintWriter pw = null;
@Resource(name="api_dao")
api_dao dao;
/*
POST, GET은 key를 @PathVariable(name = "key") String key로 받을수없음 /api_select.do/{key}형태를 못쓰기때문
get은 그냥 url에 key를 ?로 봍여 @RequestParam("key") String key으로 받으면 됨
post는 body에 키를 태워서 보내기
*/
@GetMapping("/ajax/api_select.do")
public String api_select(@RequestParam("key") String key, Model m) {
JSONObject jo2 = null;
try {
this.logger.info(key);
if (key.equals("koo")) {
//Oracle에서 Data를 DTO를 이용하여 배열로 가져오는 코드
List<api_dto> all = dao.pdlist();
this.logger.info(String.valueOf(all.size()));
//Front-end에게 Data를 원하는 형태의 배열로 생성하여 회신
int w = 0;
JSONArray ja = new JSONArray();
while (w < all.size()) {
JSONObject jo = new JSONObject();
jo.put("midx", all.get(w).getMidx());
jo.put("pd1", all.get(w).getPd1());
jo.put("pd2", all.get(w).getPd2());
jo.put("pd3", all.get(w).getPd3());
jo.put("pd4", all.get(w).getPd4());
jo.put("pd5", all.get(w).getPd5());
ja.put(jo);
w++;
}
jo2 = new JSONObject();
jo2.put("data_all", ja);
this.logger.info(jo2.toString());
m.addAttribute("msg",jo2);
} else {
m.addAttribute("msg","{data_all:error}"); //실무형 에러메세지 : 대표키를 사용하여 에러를 찍어줌 => 배열 풀었을때 에러 나옴
}
} catch (Exception e) {
m.addAttribute("msg","{data_all:key_error}");
}
return "/WEB-INF/views/api_select"; //JSON 데이터를 jsp에 출력하는 방식 API
}
}api_select.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>${msg}
<%--
return으로 데이터를 넘길때 위에
trimDirectiveWhitespaces="true"
이거를 추가해서 공백을 지워줘야 프론트가 갖다씀
기본 false로 설정되어있음
--%>
<%--
다~지우고 msg만 냅둬야됨!!!!
--%>