[AJAX + SPA게시판(API 인터페이스 구축)]
1. SPA(Single Page Application)
: 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로
다시 작성함으로써 사용자와 소통하는 웹어플리케이션이나 웹사이트
사용자 경험의 간섭을 막아주고, 마치 데스크탑 어플리케이션 처럼 동작하도록 한다.
즉, 페이지 리로딩이 없다는 의미
ex) 구글 문서작업
2. 서버 - 클라이언트 간 API(Application Programming Interface) 인터페이스 설계
1) 어떠한 ‘기능’들이 필요할것인가 요구사항 분석.
2) 각 ‘기능’ 을 요청(request) 기획
** request URL 포맷
** request parameter (요청인자)
3) 요청 받은 URL에 대해 수행할 ‘기능’ 기술
** DB 트랜잭션
** 서버동작
4) 수행한 결과에 대한 ‘출력 (response)‘ 기획
** 포맷
** 출력값
** 메세지 or 결과값 기획
[서버 - 클라이언트 간 API(Application Programming Interface) 인터페이스 설계]
1) 기능 요구사항
id - 필요기능 - 기능설명
A - 글 페이징 목록 - 페이징 목록 보기(특정 페이지 보기, 한 페이지 당 목록 수 지정)
B - 글 읽기 - 특정 - uid의 글 읽기
C - 글 작성 - 제목, 작성자, 내용을 전달 받아 글 작성하기
D - 글 수정 - 특정 uid 의 글의 제목, 내용 글 수정하기
E - 글 삭제 - 특정 uid (들)의 글(들)을 글 삭제하기
2) request 기획
id - 필요기능 - URL - method - parameter(요청인자) - 예외상황
A - 글 페이징 목록 - /list.ajax - GET - page, pageRows - param 없거나 잘못 넘어오면 1페이지 보여주기
B - 글 읽기 - /view.ajax - GET - uid - uid 없거나 잘못되면 에러
C - 글 작성 - /writeOk.ajax - POST - content, subject, name - subject, name 필수
D - 글 수정 - /updateOk.ajax - POST - uid, content, subject - uid 없거나 잘못되면 에러, subject 필수
F - 글 삭제 - /deleteOk.ajax - POST - uid (들) - uid 없으면 에러, 없는 글 삭제 요청시 정상 처리
4) response 기획 (출력) - data 항목
id - 출력명 - 출력 설명 - 타입
A, B, C, D, F 공통 - count : 결과 데이터 개수(정수), status : 처리 결과 : “OK”, “FAIL” .. (문자열), message : 처리 메세지
3. JSPEX_AJAX_SPA
: 기존에 만든 command, controller, common를 복사해오고 라이브러리도 아래의 그림과 같이 다운받기
4. list.ajax 작성하기
** com.controller > AjaxController 서블릿
package com.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.command.write.*;
@WebServlet("*.ajax")
public class AjaxController extends HttpServlet {
private static final long serialVersionUID = 1L;
public AjaxController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
ajaxAction(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
ajaxAction(request, response);
}
protected void ajaxAction(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("ajaxAction() 호출");
request.setCharacterEncoding("UTF-8");
// 컨트롤러는 다음 두개를 선택해야 한다.
Command command = null; // 어떠한 커맨드? --> 어떠한 로직 수행.
// URL로부터 URI, ContextPath, Command 분리
String uri = request.getRequestURI();
String conPath = request.getContextPath();
String com = uri.substring(conPath.length());
// 테스트 출력
System.out.println("uri: " + uri);
System.out.println("conPath: " + conPath);
System.out.println("com: " + com);
switch(com) {
case "/list.ajax": // A 글목록(페이징)
new ListCommand().execute(request, response);
new AjaxListCommand().execute(request, response);
break;
case "/view.ajax": // B 글 읽기
new ViewCommand().execute(request, response);
new AjaxListCommand().execute(request, response);
break;
case "/writeOk.ajax": // C 글작성
new WriteCommand().execute(request, response);
new AjaxResultCommand().execute(request, response);
break;
case "/updateOk.ajax": // D 글 수정
new UpdateCommand().execute(request, response);
new AjaxResultCommand().execute(request, response);
break;
case "/deleteOk.ajax": // F 글 삭제
new DeleteCommand().execute(request, response);
new AjaxResultCommand().execute(request, response);
break;
} // end switch
} // ajaxAction
} // end Controller
** com.lec.beans > AjaxWriteResult.java
package com.lec.beans;
public class AjaxWriteResult {
private int count; // 데이터 개수
private String status; // 처리 결과
private String message; // 결과 메시지
/*
{
count : 000,
status : 000,
message : 000
}
*/
// 기본생성자
public AjaxWriteResult() {}
// getter, setter
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public String getStatus() {
return status;
}
public void setStatus(String status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
} // end AjaxWriteResult
** com.lec.beans > AjaxWriteList 서블릿
package com.lec.beans;
import java.util.List;
import com.fasterxml.jackson.annotation.JsonProperty;
public class AjaxWriteList extends AjaxWriteResult {
@JsonProperty("data")
List<WriteDTO> list; // 데이터 목록
int page; // 현재 페이지 #
@JsonProperty("totalpage")
int totalPage; // 총 몇 페이지 분량?
@JsonProperty("totalcnt")
int totalCnt; // 데이터(글)은 총 몇 개?
@JsonProperty("writepages")
int writePages; // 한 [페이징]에 몇 개의 페이지를 표현할 것인가?
@JsonProperty("pagerows")
int pageRows; // 한 페이지에 몇 개의 글을 리스트 할 것인가?
public List<WriteDTO> getList() {
return list;
}
public void setList(List<WriteDTO> list) {
this.list = list;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getTotalCnt() {
return totalCnt;
}
public void setTotalCnt(int totalCnt) {
this.totalCnt = totalCnt;
}
public int getWritePages() {
return writePages;
}
public void setWritePages(int writePages) {
this.writePages = writePages;
}
public int getPageRows() {
return pageRows;
}
public void setPageRows(int pageRows) {
this.pageRows = pageRows;
}
}
** com.lec.beans > WriteDTO.java
package com.lec.beans;
import com.fasterxml.jackson.annotation.JsonProperty;
// DTO(Date Transfer Object)
// 데이터를 담아 나르기 위한 객체
// 게시글 DTO, 회원 DTO, ... 필요한 데이터 객체들 만큼 정의
// Bean 객체
public class WriteDTO {
private int uid; //wr_uid
private String subject; // wr_subject
private String content; // wr_content
private String name; // wr_name
@JsonProperty("viewcnt")
private int viewCnt; // wr_viewcnt
@JsonProperty("regdate")
private String regDate; // wr_regdate
// 개발시..
// 다음 3가지 네이밍은 일치시켜주는 것이 좋다.
// 클래스 필드명 = DB 필드명 = form의 name명
// 기본생성자, 매개변수생성자, getter/setter
public WriteDTO() {
super();
System.out.println("WriteDTO() 객체 생성");
}
public WriteDTO(int uid, String subject, String content, String name, int viewCnt) {
super();
this.uid = uid;
this.subject = subject;
this.content = content;
this.name = name;
this.viewCnt = viewCnt;
System.out.println("WriteDTO(uid, subject, content, name, viewCnt) 객체 생성");
}
// getter / setter
public int getUid() {
System.out.println("getUid 호출");
return uid;
}
public void setUid(int uid) {
System.out.println("setUID("+ uid +") 호출");
this.uid = uid;
}
public String getSubject() {
System.out.println("getSubject() 호출");
return subject;
}
public void setSubject(String subject) {
System.out.println("setSubject("+ subject +") 호출");
this.subject = subject;
}
public String getContent() {
System.out.println("getContent() 호출");
return content;
}
public void setContent(String content) {
System.out.println("setContent("+ content +") 호출");
this.content = content;
}
public String getName() {
System.out.println("getName() 호출");
return name;
}
public void setName(String name) {
System.out.println("setName("+ name +") 호출");
this.name = name;
}
public int getViewCnt() {
System.out.println("getViewCnt() 호출");
return viewCnt;
}
public void setViewCnt(int viewCnt) {
System.out.println("setViewCnt("+ viewCnt +") 호출");
this.viewCnt = viewCnt;
}
public String getRegDate() {
System.out.println("getResDate() 호출");
return regDate;
}
public void setRegDate(String regDate) {
System.out.println("setRegDate("+ regDate +") 호출");
this.regDate = regDate;
}
// 테스트, 개발용으로 toString() 오버라이딩 하면 좋다
@Override
public String toString() {
return "WriteDTO]" + uid + " : " + subject + " : "
+ content + " : " + name + " : "
+ viewCnt + " : " + regDate;
}
} // end DTO
** common > D.java
package common;
/*
* DB 접속 정보, 쿼리문, 테이블명, 컬럼명 등은
* 별도로 관리하든지
* XML, 초기화 파라미터 등에서 관리하는 것이 좋다.
*/
public class D {
public static final String DRIVER = "oracle.jdbc.driver.OracleDriver"; // JDBC 드라이버 클래스
public static final String URL = "jdbc:oracle:thin:@localhost:1521:XE"; // DB 접속 URL
public static final String USERID = "scott0316"; // DB 접속 계정 정보
public static final String USERPW = "tiger0316";
public static final String SQL_WRITE_SELECT =
"SELECT * FROM test_write ORDER BY wr_uid DESC";
public static final String SQL_WRITE_INSERT = "INSERT INTO test_write " +
"(wr_uid, wr_subject, wr_content, wr_name) " +
"VALUES(test_write_seq.nextval, ?, ?, ?)";
public static final String SQL_WRITE_INC_VIEWCNT = // 조회수 증가
"UPDATE test_write SET wr_viewcnt = wr_viewcnt + 1 WHERE wr_uid = ?";
public static final String SQL_WRITE_SELECT_BY_UID = // 글 읽어 오기
"SELECT * FROM test_write WHERE wr_uid = ?";
public static final String SQL_WRITE_UPDATE =
"UPDATE test_write SET wr_subject = ?, wr_content = ? WHERE wr_uid = ?";
public static final String SQL_WRITE_DELETE_BY_UID =
"DELETE FROM test_write WHERE wr_uid = ?";
// 페이징
// 글 목록 전체 개수 가져오기
public static final String SQL_WRITE_COUNT_ALL = "SELECT count(*) FROM test_write";
// fromRow 부터 pageRows 만큼 SELECT
// (몇번째) 부터 (몇개) 만큼
public static final String SQL_WRITE_SELECT_FROM_ROW = "SELECT * FROM " +
"(SELECT ROWNUM AS RNUM, T.* FROM (SELECT * FROM test_write ORDER BY wr_uid DESC) T) " +
"WHERE RNUM >= ? AND RNUM < ?";
}
** com.lec.beans > WriteDAO
package com.lec.beans;
import java.sql.Connection;
import java.sql.Date;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.sql.Time;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import common.D;
// DAO : Data Access Object
// DB 에 접속하여 트랜잭션을 수행하는 객체
// 다루는 데이터 소스의 종류에 따라 DAO는 여러개 정의 사용 가능
public class WriteDAO {
Connection conn = null;
Statement stmt = null;
PreparedStatement pstmt = null;
ResultSet rs = null; // SELECT 결과, executeQuery()
// DAO 객체가 생성될때 Connection 도 생성된다.
public WriteDAO() {
try {
Class.forName(D.DRIVER);
conn = DriverManager.getConnection(D.URL, D.USERID, D.USERPW);
System.out.println("WriteDAO 생성, 데이터 베이스 연결!");
} catch(Exception e) {
e.printStackTrace();
// throw e;
}
} // 생성자
// DB 자원 반납 메소드,
public void close() throws SQLException {
if(rs != null) rs.close();
if(pstmt != null) pstmt.close();
if(stmt != null) stmt.close();
if(conn != null) conn.close();
} // end close()
// 새글 작성 <-- DTO
public int insert(WriteDTO dto) throws SQLException {
String subject = dto.getSubject();
String content = dto.getContent();
String name = dto.getName();
int cnt = this.insert(subject, content, name);
return cnt;
}
// 새글 작성 <-- 제목, 내용, 작성자
public int insert(String subject, String content, String name) throws SQLException {
int cnt = 0;
try {
pstmt = conn.prepareStatement(D.SQL_WRITE_INSERT);
pstmt.setString(1, subject);
pstmt.setString(2, content);
pstmt.setString(3, name);
cnt = pstmt.executeUpdate();
} finally {
close();
}
return cnt;
}
// ResultSet --> DTO 배열로 리턴
public WriteDTO [] createArray(ResultSet rs) throws SQLException {
WriteDTO [] arr = null; // DTO 배열
ArrayList<WriteDTO> list = new ArrayList<WriteDTO>();
while(rs.next()) {
int uid = rs.getInt("wr_uid");
String subject = rs.getString("wr_subject");
String name = rs.getString("wr_name");
String content = rs.getString("wr_content");
int viewCnt = rs.getInt("wr_viewcnt");
Date d = rs.getDate("wr_regdate");
Time t = rs.getTime("wr_regdate");
String regDate = "";
if(d != null){
regDate = new SimpleDateFormat("yyyy-MM-dd").format(d) + " "
+ new SimpleDateFormat("hh:mm:ss").format(t);
}
WriteDTO dto = new WriteDTO(uid, subject, content, name, viewCnt);
dto.setRegDate(regDate);
list.add(dto);
} // end while
int size = list.size();
if(size == 0) return null;
arr = new WriteDTO[size];
list.toArray(arr); // List -> 배열
return arr;
}
// 전체 SELECT
public WriteDTO [] select() throws SQLException {
WriteDTO [] arr = null;
try {
pstmt = conn.prepareStatement(D.SQL_WRITE_SELECT);
rs = pstmt.executeQuery();
arr = createArray(rs);
} finally {
close();
}
return arr;
} // end select()
// 페이징 관련
// 몇번째 from 부터 몇개 rows 를 SELECT
public WriteDTO [] selectFromRow(int from, int rows) throws SQLException {
WriteDTO [] arr = null;
try {
pstmt = conn.prepareStatement(D.SQL_WRITE_SELECT_FROM_ROW);
pstmt.setInt(1, from);
pstmt.setInt(2, from + rows);
rs = pstmt.executeQuery();
arr = createArray(rs);
} finally {
close();
} // end try
return arr;
} // end selectFromRow()
// 전체 글의 개수
public int countAll() throws SQLException {
int cnt = 0;
try {
pstmt = conn.prepareStatement(D.SQL_WRITE_COUNT_ALL);
rs = pstmt.executeQuery();
rs.next();
cnt = rs.getInt(1);
} finally {
close();
} // end try
return cnt;
} // countAll()
// 특정 uid 의 글 내용 읽기, 조회수 증가
// viewCnt 도 1 증가 해야 하고, 글 읽어와야 한다 --> 트랜잭션 처리
public WriteDTO [] readByUid(int uid) throws SQLException{
int cnt = 0;
WriteDTO [] arr = null;
try {
// 트랜잭션 처리
// Auto-commit 비활성화
conn.setAutoCommit(false);
// 쿼리들 수행
pstmt = conn.prepareStatement(D.SQL_WRITE_INC_VIEWCNT);
pstmt.setInt(1, uid);
cnt = pstmt.executeUpdate();
pstmt.close();
pstmt = conn.prepareStatement(D.SQL_WRITE_SELECT_BY_UID);
pstmt.setInt(1, uid);
rs = pstmt.executeQuery();
arr = createArray(rs);
conn.commit();
} catch(SQLException e) {
conn.rollback();
throw e;
} finally {
close();
}
return arr;
} // end readByUid()
// 특정 uid 의 글 만 SELECT (조회수 증가 없슴!)
public WriteDTO [] selectByUid(int uid) throws SQLException {
WriteDTO [] arr = null;
try {
pstmt = conn.prepareStatement(D.SQL_WRITE_SELECT_BY_UID);
pstmt.setInt(1, uid);
rs = pstmt.executeQuery();
arr = createArray(rs);
} finally {
close();
}
return arr;
}
// 특정 uid 의 글 수정 (제목, 내용)
public int update(int uid, String subject, String content) throws SQLException {
int cnt = 0;
try {
pstmt = conn.prepareStatement(D.SQL_WRITE_UPDATE);
pstmt.setString(1, subject);
pstmt.setString(2, content);
pstmt.setInt(3, uid);
cnt = pstmt.executeUpdate();
} finally {
close();
}
return cnt;
} // end update()
// 특정 uid 글 삭제하기
public int deleteByUid(int uid) throws SQLException {
int cnt = 0;
try {
pstmt = conn.prepareStatement(D.SQL_WRITE_DELETE_BY_UID);
pstmt.setInt(1, uid);
cnt = pstmt.executeUpdate();
} finally {
close();
}
return cnt;
} // end deleteByUid()
} // end DAO
** com.command.write > ListCommand.java
package com.command.write;
import java.sql.SQLException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.lec.beans.WriteDAO;
import com.lec.beans.WriteDTO;
public class ListCommand implements Command {
@Override
public void execute(HttpServletRequest request, HttpServletResponse response) {
WriteDAO dao = new WriteDAO(); // DAO 객체 생성
WriteDTO [] arr = null;
// ajax response에 필요한 값들
StringBuffer message = new StringBuffer();
String status = "FAIL"; // 기본 FAIL
// 페이징 관련 세팅값들
int page = 1; // 현재 페이지(디폴트 1 page)
int pageRows = 8; // 한 페이지에 몇 개의 글 리스트? (디폴트 8개)
int writePages = 10; // 한 [페이징]에 몇 개의 페이지를 표시? (디폴트 10개)
int totalCnt = 0; // 글은 총 몇 개인지?
int totalPage = 0; // 총 몇 페이지 분량인지?
String param;
// 기존에는 검증안하고 바로 page에 때려박음
//page = Integer.parseInt(request.getParameter("page"));
// 검증하는 방식
// page 값 : 현재 몇 페이지?
param = request.getParameter("page");
if(param != null && param.trim().length() != 0) {
try {
page = Integer.parseInt(param);
} catch(NumberFormatException e) {
// 예외 처리 안함
}
}
// pageRows 값 : 한 페이지에 몇 개의 글?
param = request.getParameter("pageRows");
if(param != null && param.trim().length() != 0) {
try {
pageRows = Integer.parseInt(param);
} catch(NumberFormatException e) {
// 예외 처리 안함
}
}
try {
// 글 전체 개수 구하기
totalCnt = dao.countAll();
// 총 몇 페이지 분량인가?
totalPage = (int)Math.ceil(totalCnt / (double)pageRows);
// 몇 번째 row부터?
int fromRow = (page - 1) * pageRows + 1; // ORACLE은 1부터 시작
// 뭐가? ROWNUM이...!!
//int formrow = (page - 1) * pageRows; // [주의!!] MySQL은 0부터 시작..!!
// 이전 WriteDAO는 전부 close되어 있음
// 그렇기 때문에 새로 생성해줘야 함..!!
dao = new WriteDAO();
arr = dao.selectFromRow(fromRow, pageRows);
if(arr == null) {
message.append("[리스트할 데이터가 없습니다]");
} else {
status = "OK";
}
} catch(SQLException e) {
//e.printStackTrace();
message.append("[트랜잭션 에러:" + e.getMessage()+ "]");
} // end try
request.setAttribute("status", status);
request.setAttribute("message", message.toString());
request.setAttribute("list", arr);
request.setAttribute("page", page);
request.setAttribute("totalPage", totalPage);
request.setAttribute("writePages", writePages);
request.setAttribute("pageRows", pageRows);
request.setAttribute("totalCnt", totalCnt);
} // end execute()
} // end Command
** com.command.write > AjaxListCommand.java
package com.command.write;
import java.io.IOException;
import java.util.Arrays;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.lec.beans.AjaxWriteList;
import com.lec.beans.WriteDTO;
public class AjaxListCommand implements Command {
@Override
public void execute(HttpServletRequest request, HttpServletResponse response) {
WriteDTO[] dtoArr = (WriteDTO[])request.getAttribute("list");
AjaxWriteList result = new AjaxWriteList();
result.setStatus((String)request.getAttribute("status"));
result.setMessage((String)request.getAttribute("message"));
if(dtoArr != null) {
result.setCount(dtoArr.length);
result.setList(Arrays.asList(dtoArr));
}
// 페이징 할 때 필요한 값들
try {
result.setPage((Integer)request.getAttribute("page"));
result.setTotalPage((Integer)request.getAttribute("totalPage"));
result.setWritePages((Integer)request.getAttribute("writePages"));
result.setPageRows((Integer)request.getAttribute("pageRows"));
result.setTotalCnt((Integer)request.getAttribute("totalCnt"));
} catch (Exception e) {
// 무시하기..!!
// view.ajax 에선 페이징 관련 변수값들이 없다..
}
ObjectMapper mapper = new ObjectMapper(); // Json 매핑할 객체
try {
String jsonString
= mapper.writerWithDefaultPrettyPrinter()
.writeValueAsString(result);
response.setContentType("application/json; charset=utf-8");
response.getWriter().write(jsonString);
} catch (JsonProcessingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
5. view.ajax
** com.command.write > ViewCommand.java
package com.command.write;
import java.sql.SQLException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.lec.beans.*;
public class ViewCommand implements Command {
@Override
public void execute(HttpServletRequest request, HttpServletResponse response) {
WriteDAO dao = new WriteDAO();
WriteDTO [] arr = null;
// ajax response 에 필요한 값들
StringBuffer message = new StringBuffer();
String status = "FAIL"; // 기본 FAIL
String param = request.getParameter("uid");
// 유효성 검사
if(param == null) {
message.append("[유효하지 않은 parameter 0 or null]");
} else {
try {
int uid = Integer.parseInt(param);
arr = dao.readByUid(uid); // 읽기 + 조회수 증가
if(arr == null) {
message.append("[해당 데이터가 없습니다]");
} else {
status = "OK";
}
} catch (SQLException e) {
//e.printStackTrace();
message.append("[트랜잭션 에러:" + e.getMessage() + "]");
} catch (Exception e) {
message.append("[예외발생:" + e.getMessage() + "]");
}// end try
} // end if
request.setAttribute("list", arr);
request.setAttribute("status", status);
request.setAttribute("message", message.toString());
}
}
6. [매우 중요] 정당한 프로그램이란 뻗지 않는 것이다!
이번 주제를 배울때 에러일때 뻗지 않도록 에러 메시지를 출력할 수 있도록 설계했다.
'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글
| 2020.06.09 (0) | 2020.06.09 |
|---|---|
| 2020.06.08 (0) | 2020.06.08 |
| 2020.06.03 (0) | 2020.06.03 |
| 2020.06.02 (0) | 2020.06.02 |
| 2020.06.01 (0) | 2020.06.01 |