Java Ext JS를 이용한 RESTful 구현
1. STS(Spring Tool Suite)에서 Spring MVC 프로젝트를 생성한다.
2. Ext JS RESTful 예제 사이트를 참고해 필요한 시타일시트와 스크립트 파일을 준비한다.
필요한 스타일시트 파일
ext-all.css
example.css
restful.css
필요한 자바스크립트 파일
ext-all.js
examples.js
restful.js
3. 필요한 시타일시트와 스크립트 파일을 Home.jsp에 링크한다.
restful.js는 파일을 링크를 하던지 아니면 페이지내에 직접 작성한다.
4. Ext.define 메소드를 이용해 원하는 객체 이름과 컬럼을 구성한다.
Ext.define('Book', {
extend : 'Ext.data.Model',
fields : [ {
name : 'id',
type : 'int',
useNull : true
}, 'isbn', 'title', 'writer' ],
validations : [ {
type : 'length',
field : 'isbn',
min : 1
}, {
type : 'length',
field : 'title',
min : 1
}, {
type : 'length',
field : 'writer',
min : 1
} ]
});
5. Ext.onReady의 url을 컨트롤러의 url 패턴을 연결한다.
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
autoLoad : true,
autoSync : true,
model : 'Book',
proxy : {
type : 'rest',
url : 'book',
reader : {
type : 'json',
root : 'data' //Controller에서 반환하는 JSON의 root명
},
writer : {
type : 'json'
}
}
});
6. 행을 추가하는 메소드의 파라미터를 앞서 정의한 타입으로 변경한다.
text : 'Add',
iconCls : 'icon-add',
handler : function() {
// empty record
store.insert(0, new Book());
rowEditing.startEdit(0, 0);
}
7. 서버에서 상태를 저장을 위해 클래스를 추가한다.
package net.bboks.app.model;
public class Book {
int id;
String isbn;
String title;
String writer;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getIsbn() {
return isbn;
}
public void setIsbn(String isbn) {
this.isbn = isbn;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getWriter() {
return writer;
}
public void setWriter(String writer) {
this.writer = writer;
}
}
8. REST 요청을 받기위한 컨트롤러를 작성한다.
Spring MVC 프로젝트 생성시 제공하는 컨트롤러에 REST를 처리하는 메소드를 추가한다.
8.1 GET
@RequestMapping(value = "/book", method = RequestMethod.GET)
public void getBooks(HttpServletResponse response) {
//JSON 형태로 리턴하기 위해 JSONObject와 JSONArray를 사용한다
JSONObject obj = new JSONObject();
try {
JSONArray array = new JSONArray();
for(int i=0; i<books.size(); i++) {
JSONObject obj2 = new JSONObject();
obj2.put("id", books.get(i).getId());
obj2.put("isbn", books.get(i).getIsbn());
obj2.put("title", books.get(i).getTitle());
obj2.put("writer", books.get(i).getWriter());
array.put(obj2);
}
obj.put("data", array);
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.println(obj.toString());
}
catch(Exception ex) {
}
}
8.2 POST
//Ext Js의 POST의 경우 RequestBody에 실려 전송되기 때문에 RequestBody 전체를 받는다
@RequestMapping(value = "/book", method = RequestMethod.POST)
public void postBook(@RequestBody String body, HttpServletResponse response) {
//전송된 JSON을 Book 객체로 바로 변환하기 위해 Jackson의 ObjectMapper를 이용한다.
ObjectMapper mapper = new ObjectMapper();
try {
Book book = mapper.readValue(body, Book.class);
book.setId(seq++);
books.add(book);
writeResponse(book, response);
}
catch(Exception ex) {
}
}
8.3 DELETE
//DELETE의 경우 Key로 지정한 값만 전송된다.
@RequestMapping(value = "/book/{id}", method = RequestMethod.DELETE)
public void deleteBook(@PathVariable int id) {
for(int i=0; i<books.size(); i++) {
if(books.get(i).getId() == id) {
books.remove(i);
break;
}
}
}
8.4 PUT
//PUT의 경우 POST와 동일하게 JSON은 RequestBody에 실려 전송이 되며, 더불어 Key이 동시에 전송된다.
@RequestMapping(value = "/book/{id}", method = RequestMethod.PUT)
public void updateBook(@PathVariable int id, @RequestBody String body, HttpServletResponse response) {
ObjectMapper mapper = new ObjectMapper();
try {
Book book = mapper.readValue(body, Book.class);
Book targetBook = findBook(id);
targetBook.setIsbn(book.getIsbn());
targetBook.setTitle(book.getTitle());
targetBook.setWriter(book.getWriter());
writeResponse(targetBook, response);
}
catch(Exception ex) {
}
}
주의할 점은 REST를 호출 후 JSON 형태의 Response를 전달해줘야 클라이언트와 sync가 되며, JSON의 구조는 Ext.create 메소드의 Root 명을 포함해야한다.
기타 유틸 메소드
//ArrayList에서 id에 해당하는 Book 객체를 찾아 반환한다.
private Book findBook(int id) {
Book book = null;
for(int i=0; i<books.size(); i++) {
if(books.get(i).getId() == id) {
book = books.get(i);
}
}
return book;
}
//Book 객체를 이용해 Ext JS에 정의된 JSON 형태로 만들어 HttpServletResponse을 이용해 반환한다.
private void writeResponse(Book book, HttpServletResponse response) {
try {
JSONObject obj = new JSONObject();
JSONArray array = new JSONArray();
JSONObject obj2 = new JSONObject();
obj2.put("id", book.getId());
obj2.put("isbn", book.getIsbn());
obj2.put("title", book.getTitle());
obj2.put("writer", book.getWriter());
array.put(obj2);
obj.put("data", array);
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.println(obj.toString());
}
catch(Exception ex) {
}
}
[참고] Rest Proxy Example