Spring 데이터 화면에 출력(+json ...)

Spring 데이터 화면에 출력(+json ...)

반응형

**json 출력

​

=>json: 자바스크립트 객체 표현법으로 데이터를 표현하는 방식

(스마트 폰의 push 메시지, 센서의 데이터 등을 json 표현법으로 주고 받고 mongo db 와 같은 NOSQL에서도

데이터를 json 방식으로 표현합니다. - 자바스크립트나 파이썬은 json 형식의 데이터를 쉽게 읽을 수 있습니다.)

=>json 은 이전의 html, excel, pdf 와 다르게 데이터를 전달하는것입니다.

(출력결과[뷰]가 없습니다.)

=>json 출력을 위해서는 jackson-databind 라이브러리가 필요

com.fasterxml.jackson.core jackson-databind 2.9.4

@RequestMapping(value = "/item1.json", method = RequestMethod.GET) public String item1json(HttpServletRequest request, Model model) { // 서비스 메소드 호출 List list = itemService.allItem(request); // 데이터 저장 model.addAttribute("list", list); // 뷰 이름 리턴 return "item1json";

2.Restful(Representational State Transfer) API

​

=>접속하는 기기에 상관없이 동일한 데이터를 요구하는 요청은 하나의 URL로 만들자는 개념

=>URL을 이용해서 요청하면 View 대신에 Data를 주자는 개념

출력은 Data를 받은 클라이언트에서 자신에게 맞게 파싱해서 사용

​

3.RestController

요청을 처리하는 클래스인데 요청 처리 메소드에서 문자열을 리턴하면

문자열로 출력하고 기본 자료형을 제외한 자료형으로 리턴하면 json 형식으로 출력

=>spring 4.0이상에서만 사용 가능

=>클래스 위에 @RestController 만 추가하면 됩니다.

=>Jackson-Databing 라이브러리는 추가 돼있어야 합니다.

​

4.RestController를 이용해서 문자열과 JSON 출력

1)home.jsp 파일에 문자열과 json을 요청하는 링크를 추가

​

json으로 내려받기

csv로 내려받기

​

2)프로젝트에 RestController로 사용 할 클래스를 추가하고 작성

//기본형이나 String 또는 Date 클래스를 제외한 형태로 리턴하면 json으로 응답 @RequestMapping(value="/item2.json", method=RequestMethod.GET) public List json(HttpServletRequest request) { List list = itemService.allItem(request); //실제 csv 형식의 파일을 만드려면 문자열을 편집 return list; } }

**ajax(Asynchronous Javascript XML)

=>자바스크립트를 이용해서 비동기적으로 데이터를 받아오는 기술!

=>전체화면을 갱신하지 않고 데이터를 받아 일부분만 갱신

아이디 중복 체크, 댓글을 작성하고 전체화면 갱신없이 댓글이 업데이트되는 기능이 ajax를 사용한 것

실습 - ajax 로 item2.json 이 리턴한 데이터를 받아 화면에 출력

1.home.jsp 파일에 ajax 요청을 할 링크 추가

ajax로 json 데이터 사용하기 ​

2.home.jsp 파일에 데이터를 출력할 영역 생성

3.home.jsp 파일에 id가 ajax인 링크를 클릭하면 동작하는 스크립트 코드 추가

document.getElementById("ajax").addEventListener( "click",function(){ alert("클릭") //ajax 객체 만들기 request = new XMLHttpRequest(); //요청 생성 request.open('GET', 'item2.json'); //요청 전송 request.send(''); //요청에 대한 처리를 위한 콜백 메소드 등록 request.onreadystatechange = function(){ //만약 정상 응답이 오면 if(request.readyState == 4 && request.status >= 200 && request.status < 300) //데이터 확인을 해라 //alert(request.responseXMLText) ​ //받아온 데이터를 JSON 파싱을 해서 배열로 만들기 list = JSON.parse(request.responseText); //배열을 순회 msg ='' msg += "

"; msg += ""; ​ msg += ""; msg += ""; msg += ""; msg += "" for(i in list){ msg += ""; msg += "" msg += "" msg += "" msg += ""; } msg += "

코드	상품명	가격
" + list[i].itemid + "	" + list[i].itemname + "	" + list[i].price + "

"; document.getElementById("disp").innerHTML = msg; } ​ }); ​ ​

**XML 출력

=>XML(Extensible Markup Language): 데이터를 태그를 이용해 표현하는 방식

XML 은 브라우저가 해석하지 않고 개발자 또는 DTO 설정에서 해석하는 마크업 언어

​

=>예전 실시간 데이터 전송에 많이 사용했고

요즘에도 프로젝트 설정 파일로 사용됩니다.

twitter 등이 예전에는 XML 서비스를 제공했지만 최근에는 json 으로 많이 변경되고있습니다.

​

=>서버 개발자가 아니라면 XML 은 생성보다는 파싱이 중요합니다.

=>spring-oxm, jaxb-api, jaxb-impl, jaxb-core 라이브러리가 필요

=>출력은 MarshallingView를 이용

​

=>RPC(Remote Procedure Call - 원격 프로시저 호출)를 .net 계열에서는 Mashalling라고합니다.

웹 서버나 클라우드 사용하는 것이 RPC 입니다.

http://localhost:9000/db 를 브라우저에 입력하면

localhost주소를 갖고있는 컴퓨터의 메소드가 호출되어 작업을 한 후 결과를 브라우저에 전송합니다.

이러한 기술을 RPC라고 하는데 Spring이 중간 통신 작업을 다 해주기 때문에 RPC 를 못만들어도

구현이 가능

​

​

1.Item 의 List 를 XML 로 출력

org.springframework spring-oxm ${org.springframework-version} javax.xml.bind jaxb-api 2.1 com.sun.xml.bind jaxb-impl 2.2.11 com.sun.xml.bind jaxb-core 2.2.11 ​

2.home.jsp 파일에 링크 추가

XML로 내려받기

3.Item 클래스를 XML 형식으로 출력할 수 있도록 어노테이션을 추가

​

@Data @XmlAccessorType(XmlAccessType.FIELD) //출력할 순서와 태그 설정 @XmlType(name='', propOrder = {"itemid", "itemname", "price", "description" , "pictureurl"}) ​ public class Item { ​ private int itemid; private String itemname; private int price; private String description; private String pictureurl; }

4.XML 은 DTO 만을 출력할 수 없어서 DTO 의 List를 property로 갖는 클래스가 필요합니다.

Item의 List를 property로 갖는 클래스를 생성

=>com.pk.db.domain.ItemReport

//프로퍼티를 하기위해서는 getters and setters를 해야 한다. ​ @XmlAccessorType(XmlAccessType.FIELD) //루트태그를 설정 @XmlRootElement(name="itemlist") public class ItemReport { //객체 1개마다 출력되는 태그 설정 @XmlElement(name="item") private List list; ​ public List getList() { return list; } ​ public void setList(List list) { this.list = list; } }

5.HomeController 클래스에 item.xml 요청을 처리하는 메소드를 생성

​

@RequestMapping(value = "/item.xml", method = RequestMethod.GET) public String xml(HttpServletRequest request, Model model) { // 서비스 메소드 호출 List list = itemService.allItem(request); //Xml 출력 데이터 생성 ItemReport itemReport = new ItemReport(); itemReport.setList(list); ​ // 데이터 저장 model.addAttribute("list", itemReport); // 뷰 이름 리턴 return "xmlreport"; ​ }

6.servlet-context.xml 파일에 xml 출력을 위한 설정을 추가

​ com.pk.db.domain.ItemReport

**File Upload

=>파일 업로드를 위한 form 은 반드시 method 가 post 이어야 하고 enctype을 multipart/form-data로 설정해야

합니다.

=>Spring은 Multipart 기능을 지원하기 때문에 별다른 설정없이도 multipart form의 데이터를 받을 수 있습니다.

​

=>spring에서는 file을 server에 저장할 때 commons-fileupload 의존성이 필요하고

CommonsMultipartResolver Bean이 필요합니다.

​

=>Spring에서는 3가지 방법으로 File Upload를 처리할 수 있습니다.

HttpServletRequest 대신에 MultipartHttpServletRequest를 이용해서 getFiles 메소드로 처리

​

​

파라미터의 자료형을 MultipartFile로 해서 처리하는 방법이 있습니다.

(@RequestParam, Command 객체 이용도 가능)

​

=>MultipartFile에서 업로드하는 방법

getBytes() 메소드로 파일의 내용을 바이트 배열로 리턴받아서 직접 전송하는 방법

​

transferTo(File dest) 메소드에게 File 객체를 대입해서 업로드

=>파일을 업로드 할 때 주의할 점은 동일한 파일명은 ?

UUID 클래스를 이용하여 중복되지 않는 이름을 만들던가 업로드 하는 유저의 id를 붙여서

동일한 파일명을 만들지 않도록 하는 방법이 있습니다.

​

=>삽입의 처리 과정

삽입링크 클릭 -> 삽입할 수 있는 페이지로 포워딩 -> 입력을 하고 전송을 누르면 유효성 검사를 해서

통과하면 서버에게 전송 -> 서버는 처리를 하고 결과 페이지로 리다이렉트 합니다.

​

=>서버가 처리를 하고 포워딩을 하게되면 에러가 발생하던지 동일한 데이터가 중복해서 삽입이 됩니다.

​

=>새로고침을 했을 때 이전에 수행한 작업이 다시 발생해도 되면 포워딩을 해도되고

다시 발생하면 안되는경우에는 반드시 리다이렉트를 해야 합니다.

(로그인 1번 후 또 안해도되니까 리다이렉트)

(검색같은 경우는 검색하고 또 검색하고 해도되니까 대부분 포워딩을 씀)

(삽입 삭제 갱신 = 리다이렉트)

​

1.데이터 삽입을 위한 링크를 home.jsp 에 추가

데이터 삽입

​

2.HomeController에서 insert 요청을 처리하는 메소드를 추가

//단순한 페이지 이동 포워드 @RequestMapping(value = "/insert.xml", method = RequestMethod.GET) public String insert(HttpServletRequest request, Model model) { ​ // 뷰 이름 리턴 return "insert"; } ​ 3.views 디렉토리에 insert.jsp 파일을 만들고 데이터 삽입 폼을 작성 ​ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 데이터 삽입 데이터 삽입 코드 이름 가격 효과

4.insert.jsp 파일에 이미지 미리보기 기능 구현

=>javascript에서 파일을 불러오는 동작은 비동기(순서대로 동작하지 않는다 - 콜백)적으로

처리됩니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 데이터 삽입 데이터 삽입 코드 이름 가격 효과 ​ //이미지 미리보기 var pictureurl = document.getElementById("pictureurl") var img = document.getElementById("img"); ​ //이미지 선택이 변경되면 pictureurl.addEventListener("change", function(){ //업로드한 이미지 파일의 내용을 img에 출력 //파일 객체 생성 var reader = new FileReader(); //선택한 파일이 있다면 if(pictureurl.files && pictureurl.files[0]){ //파일 읽기 reader.readAsDataURL(pictureurl.files[0]); //파일의 내용을 전부 읽으면 출력 reader.addEventListener("load", function(e){ img.src = e.target.result; }) } }); ​ ​

5.itemid 중복 검사

1)item를 받아 중복 여부를 판별한뒤 리턴할 서버의 요청 처리 메소드를 생성

==>itemid를 파라미터로 받아 서버에가서 데이터가 존재하는지 확인하면 된다.

Service 클래스의

=>JSONController 클래스에 itemid 중복 검사를 위한 메소드 생성

​

http://localhost:9000/db/itemidcheck?itemid=9 주소들어가기

​

​

2)insert.jsp에서 중복 체크 하는 코드를 작성

=>script 태그 안에 추가

​

//itemid 중복 체크를 위한 변수 var itemid = document.getElementById("itemid"); var iddiv = document.getElementById("iddiv"); ​ //중복체크를 통과했는지 여부를 저장할 변수 var idcheck = false; ​ //itemid 란에서 포커스가 떠나면 중복 체크 itemid.addEventListener("focusout", function(e){ //ajax 객체 만들기 request = new XMLHttpRequest(); //요청 생성 request.open('GET', 'itemidcheck?itemid=' + itemid.value); //요청 전송 request.send(''); //요청에 대한 처리를 위한 콜백 메소드 등록 request.onreadystatechange = function(){ //정상 응답이 오면 if(request.readyState == 4 && request.status >= 200 && request.status < 300){ //넘어온 데이터 파싱 var data = JSON.parse(request.responseText); if(data.result == 'true'){ iddiv.innerHTML = '멋진 코드네요'; iddiv.style.color = 'green'; idcheck.value = true; }else{ iddiv.innerHTML = '이미 사용 중인 코드입니다.'; iddiv.style.color = 'red'; idcheck.value = false; } ​ } } });

**Validation Check(유효성 검사)

=>데이터를 삽입하거나 삭제 또는 갱신 및 조회를 할 때 올바른 데이터인지 확인하는 작업

웹 애플리케이션에서는 클라이언트(웹 브라우저 - 자바스크립트) 와 서버의 Service 클래스 그리고 데이터베이스에서 할 수 있습니다.

할 수 있는 모든 곳에서 하는 것이 좋습니다.

​

클라이언트 측에서만 하는 경우에는 데이터를 전송할 때 헤더를 변경해서 자바스크립트에서는 올바른 데이터였지만 서버에 도달할 때는 다른 데이터일 수 있습니다.

ip 와 userAgent 값을 변경해서 전송하는 경우가 많습니다.

서버에서 header 값들을 읽어서 확인해야 합니다.

​

데이터베이스에서 제약조건을 이용해서 다시 한번 검사를 하는 것이 안전합니다.

​

보안이 필요한 유효성 검사는 클라이언트에서는 하면 안됩니다.

​

​

​

2.home.jsp 파일에 데이터를 출력할 영역 생성

​

3.home.jsp 파일에 id가 ajax인 링크를 클릭하면 동작하는 스크립트 코드 추가

document.getElementById("ajax").addEventListener( "click",function(){ alert("클릭") //ajax 객체 만들기 request = new XMLHttpRequest(); //요청 생성 request.open('GET', 'item2.json'); //요청 전송 request.send(''); //요청에 대한 처리를 위한 콜백 메소드 등록 request.onreadystatechange = function(){ //만약 정상 응답이 오면 if(request.readyState == 4 && request.status >= 200 && request.status < 300) //데이터 확인을 해라 //alert(request.responseXMLText) //받아온 데이터를 JSON 파싱을 해서 배열로 만들기 list = JSON.parse(request.responseText); //배열을 순회 msg ='' msg += "

"; msg += ""; msg += ""; msg += ""; msg += ""; msg += "" for(i in list){ msg += ""; msg += "" msg += "" msg += "" msg += ""; } msg += "

코드	상품명	가격
" + list[i].itemid + "	" + list[i].itemname + "	" + list[i].price + "

"; document.getElementById("disp").innerHTML = msg; } });

감사합니다 ^^

반응형

from http://bucheoneduc.tistory.com/31 by ccl(A) rewrite - 2021-12-26 03:28:03