[Spring] axios로 spring 구현

 

json_simple-1.1.jar

0.02MB

설치방법

프로젝트 우클릭 -> Build path -> Configure Build Path -> Libraries -> External JARS... ->

C:\oraclexe\app\oracle\product\11.2.0\server\jdbc\lib(오라클 경로)에다가 위의 파일을 넣어준다.

Apply, Apply Close 끝

 

 

pom.xml에 denpendency 3가지를 추가해줬다.

json과 axios와 jackson-databind를 추가해줬다.

저장한뒤 Alt+f5로 설치를 진행해준다.

	<dependency>
            <groupId>com.googlecode.json-simple</groupId>
            <artifactId>json-simple</artifactId>
            <version>1.1</version>
        </dependency>
        
        <dependency>
		    <groupId>org.webjars.npm</groupId>
		    <artifactId>axios</artifactId>
		    <version>0.19.2</version>
		</dependency>
		
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.9.3</version>
		</dependency>

 

DTO를 만들어준다.

처음과 동일하니 설명은 생략

package pack02;

public class DTO {
	
	private String id;
	private String pw;
	private String name;
	private String age;
	
	public DTO() {};
	
	public DTO(String id, String pw, String name, String age) {
		this.id = id;
		this.pw = pw;
		this.name = name;
		this.age = age;
	} 

	public String getId() { return id; }
	public void setId(String id) { this.id = id; }
	public String getPw() { return pw; }
	public void setPw(String pw) { this.pw = pw; }
	public String getName() { return name; }
	public void setName(String name) { this.name = name; }
	public String getAge() { return age; }
	public void setAge(String age) { this.age = age; }	
}

 

DAO도 ajax와 같다.

패스

package pack02;

import java.awt.List;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.LinkedList;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;

//사용순서
//1. DataDAO 객체를 생성한다.
//2. 사용하려는 것에 맞는 메소드를 호출하고, 그에 맞는 인수를 넣는다.
public class DAO {
	String driver = "oracle.jdbc.driver.OracleDriver";
	String url = "jdbc:oracle:thin:@localhost:1521:xe";
	String id= "kim11";
	String pw= "a123456";
	Connection con = null;
	Statement stmt = null;
	ResultSet res = null;
	PreparedStatement pstmt = null;

	public DAO() {
		try {Class.forName(driver);}
		catch (Exception e) {
			e.printStackTrace();
		}
	}
	//객체생성시 클래스 로딩과 예외처리를 하고 대기하고 있음.
	//이제 각각의 메소드를 정의해준다.
	//1. select
	public String select(){
		JSONArray jsonArray = new JSONArray();

		try {
			con = DriverManager.getConnection(url, id, pw);
			stmt = con.createStatement();
			String sql = "select * from tab01";
			res = stmt.executeQuery(sql);
			while(res.next()) {
				String r_id = res.getString("id"); // 이름에 맞는 값을 가져온다.
				String r_pw = res.getString("pw");
				String r_name = res.getString("name");
				String r_age = res.getString("age");

				//System.out.println(r_id+ r_pw+ r_name+ r_age);
				JSONObject jsonObject = new JSONObject();

				jsonObject.put("id", r_id);
				jsonObject.put("pw", r_pw);
				jsonObject.put("name", r_name);
				jsonObject.put("age", r_age);

				jsonArray.add(jsonObject);

			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			try {
				if(res!=null) res.close();
				if(stmt!=null) stmt.close();
				if(con!=null) con.close();
			}catch (Exception e2) {
				e2.printStackTrace();
			}
		}
		return jsonArray.toString(); // list는 배열이므로 [0], [1] 처럼 가져오거나 foreach문으로 가져오면 됨.
	}

	//2. insert
	public void insert(String n_id, String n_pw, String name, String age){
		Connection con = null;
		Statement stmt = null;
		int result;

		try {

			con = DriverManager.getConnection(url, id, pw);
			stmt = con.createStatement();
			//1
			String sql = String.format("insert into tab01 values("+"'"+n_id+"'"+", "+"'"+n_pw+"'"+", "+"'"+name+"'"+", "+"'"+age+"'"+")", n_id, n_pw, name, age) ;
			System.out.println(sql);
			//2
			result = stmt.executeUpdate(sql); // 문제
			if(result==1) {
				System.out.println("Insert Success");
			}else {
				System.out.println("Failed");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return;
	}


	//3.update	 
	public void update(String u_id, String u_pw, String name, String age) {
		String sql = "update tab01 set name=?, age=? where id=? AND pw=?";
		try {
			con = DriverManager.getConnection(url, id, pw);
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, name);
			pstmt.setString(2, age);
			pstmt.setString(3, u_id);
			pstmt.setString(4, u_pw);
			System.out.println(sql);
			//2
			pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			try {
				if(res!=null) res.close();
				if(pstmt!=null) pstmt.close();
				if(con!=null) con.close();
				System.out.println("오라클 연결 종료");
			}catch (Exception e2) {
				e2.printStackTrace();
			}
		}
		return;
	}
	//4.Delete

	public void delete(String d_id, String name) {
		String sql = "delete from tab01 where ID=? AND NAME=?";
		try {
			con = DriverManager.getConnection(url, id, pw);
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, d_id);
			pstmt.setString(2, name);
			System.out.println(sql);
			//2
			pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			try {
				if(res!=null) res.close();
				if(pstmt!=null) pstmt.close();
				if(con!=null) con.close();
				System.out.println("오라클 연결 종료");
			}catch (Exception e2) {
				e2.printStackTrace();
			}
		}
		return;
	}
}

 

Oracle

우선 toAxios는 index.jsp에서 DataForm.jsp로 이동하기 위해서 만들었다.

 

첫번째 axiosSelect는 Mapping에서 value값을 DataForm에 select의 jquery와 맞쳐줘야한다. produces는 기본 글자형식과 한글입력을 가능하게 하기위해서 입력했다.

@ReponseBody는 DAO에서 불러온 list의 데이터를 받기위해서 사용한다.

toAxios에 @ReponseBody를 입력할 경우에는 DataForm이라는 글자를 리턴해주기때문에 페이지에 DataForm이라는 글자가 출력된다.

 

두번째 axiosInsert는 @ReponseBody로 받은 데이터를 @RequestBody의 HashMap은

view페이지(DataForm)에서 Key값인("id"등등)을 불러와서 i_id에 값을 넣어준다.

그리고 그것을 dao.insert아니면 update와 같이 데이터를 받아줘서 값을 select를 통해서 list로 return해준다.

 

ArrayList가 아닌 HashMap을 사용하는 이유는 ArrayList는 해당하는 곳의 목록을 다가져오고 불러온 목록에서 빼내는 시간이 오래걸리고 HashMap은 key값에 해당하는 value값만 불러오기때문에 시간적으로 절약할 수 있다.

그리고 결과적으로 ArrayList 적용법을 모름;(Key 값이 없어서 적용 불가능할 것같다.)

 

HashMap을 <String, Object>로 전달해주면 map.get을 String으로 변환시켜줘야하지만 <String, String>으로 해줄경우에는 변환해줄 필요가없다.

select는 String값으로 변환해줘야하는 방식

insert는 Object대신 String으로 받아서 변환이 필요없는 방식

마지막 delete부분은 id와 name은 dao.delete에 바로 넣어준것이다.

package pack02;
//Ctrl+Shift+o 는 자동 import 단축키
import java.util.HashMap;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class Oracle {
	
	 @RequestMapping("/toAxios")
	 public String test() {
		 return "DataForm";
	 }
	 
	 @RequestMapping(value="axiosSelect", produces="text/plain;charset=UTF-8")
	 @ResponseBody
	 public String axiosSelect() {
		 DAO dao = new DAO();
		 String list = dao.select();
		 return list;
	 }
	 
	
	@RequestMapping(value = "axiosInsert", produces="text/plain;charset=UTF-8")
	@ResponseBody
	public String axiosInsert(@RequestBody HashMap<String, Object> map){
		DAO dao = new DAO();
		String i_id = (String)map.get("id");
		String i_pw = (String)map.get("pw");
		String i_name = (String)map.get("name");
		String i_age = (String)map.get("age"); //(String)으로 강제형변환
		dao.insert(i_id, i_pw, i_name, i_age);
		
		String list =dao.select();
		return list;
	}
	
	@RequestMapping(value = "axiosUpdate", produces="text/plain;charset=UTF-8")
	@ResponseBody
	public String axiosInsert2(@RequestBody HashMap<String, String> map){
		DAO dao = new DAO();
		String u_id = map.get("id");
		String u_pw = map.get("pw");
		String u_name = map.get("name");
		String u_age = map.get("age"); //(String)으로 강제형변환
		dao.update(u_id, u_pw, u_name, u_age);
		
		String list =dao.select();
		return list;
	}
	
	
	@RequestMapping(value="axiosDelete", produces = "text/plain;charset=UTF-8")
	@ResponseBody
	public String axiosDelete(@RequestBody HashMap<String, String> map){
		DAO dao = new DAO();
		
		//delete는 받는 값이 적어서 한번에 바로 넣는것으로 적용해보았다.
		dao.delete(map.get("id"), map.get("name"));
		String list =dao.select();
		return list;
	}
	
	
}

 

index.jsp는 toAxios로 DataForm으로 넘어가는 페이지이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*, java.text.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<head>
<title>메인 페이지</title>
</head>
<body>
	<%=new Date()%>
	<h2>관리페이지</h2>
	<a href="toAxios">회원 관리</a><br/><br/>
</body>

DataForm은 SPA(싱글 페이지 어플리케이션) 형식의 view파일로 jquery와 axios를 사용하기 위해 head부분에 script를 추가해줘야한다.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

form에는 id를 제외한 나머지는 지워준다. action은 jquery문에서 get과 post로 받아와주기때문에 필요없다.

 

jquery문을 설명하자면

첫번째 let ul은 다시 준영이형 찬스

 

두번째 $("#~")은 아이디 이름이다.

axios뒤에는 컨트롤러에서 받아오는 이름이다.

ul.innerHTML=""로 초기화해주는 이유는 불러올때마다 중복되기때문에 초기화 해주지않는다면 계속 내용이 추가된다.

 

세번째 e.preventDefault();는 태그의 기본 실행명령을 default로 취소해주는 것이다.

예를 들어서 input의 submit부분이 default해주지않으면 기본 submit 기능을 실행하면서 페이지가 refresh된다.

그러면 지금까지한게 아무의미가 없다.

즉, 태그들의 기본 기능을 막기위해서 사용한다.

 

e.target.value는 타겟이 된 id들을 Oracle에 있던 id,pw,name,age로 보내준다.

 

$("form")[0].reset()은 input값이 전송되면 값이 전송된 0번째 form태그를 reset해주는 코드이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h3>회원 추가</h3>
	
	<form id="insert">
		<input type="text" name="id" placeholder="id입력" /><br/>
		<input type="password" name="pw" placeholder="pw입력" /><br/>
		<input type="text" name="name" placeholder="이름 입력" /><br/>
		<input type="text" name="age" placeholder="나이 입력" /><br/>
		<input type="submit" value="전송" />
	</form>
	
	<h3>회원 수정</h3>
	<form id="update">
		<input type="text" name="id" placeholder="id입력" /><br/>
		<input type="password" name="pw" placeholder="pw입력" /><br/>
		<input type="text" name="name" placeholder="바꿀이름 입력" /><br/>
		<input type="text" name="age" placeholder="바꿀나이 입력" /><br/>
		<input type="submit" value="전송" />
	</form>
	
	
	<h3>회원 삭제</h3>
	<form id="delete">
		<input type="text" name="id" placeholder="id입력" /><br/>
		<input type="text" name="name" placeholder="지울이름 입력" /><br/>
		<input type="submit" value="전송" />
	</form><br/><br/>
	
	<button id="select">조회</button>
	<ul id="ul"></ul>
	<script type="text/javascript">
		let ul = document.getElementById('ul');
		$("#select").on('click', function(){
			axios.get('axiosSelect')
			.then(function(res){
				ul.innerHTML="";
				for(let i=0; i<res.data.length; i++){
					ul.innerHTML+="<li>"+res.data[i].id+" "+res.data[i].pw+" "+res.data[i].name+" "+res.data[i].age+"</li>"
				}
			})
		});
		
		
		$("#insert").on('submit', function(e){
			e.preventDefault();
			
			let nid = e.target.id.value;
			let npw = e.target.pw.value;
			let nname = e.target.name.value;
			let nage = e.target.age.value;
			
			axios.post('axiosInsert', {id: nid, pw:npw, name:nname, age:nage})
			.then(function(res){
				ul.innerHTML=""
				for(let i=0; i<res.data.length; i++){
					ul.innerHTML+="<li>"+res.data[i].id+" "+res.data[i].pw+" "+res.data[i].name+" "+res.data[i].age+"</li>"
				}
			})
			
			$("form")[0].reset();
		});
		
		
		$("#update").on('submit', function(e){
			e.preventDefault();
			
			let nid = e.target.id.value;
			let npw = e.target.pw.value;
			let nname = e.target.name.value;
			let nage = e.target.age.value;
			
			axios.post('axiosUpdate', {id: nid, pw:npw, name:nname, age:nage})
			.then(function(res){
				ul.innerHTML=""
				for(let i=0; i<res.data.length; i++){
					ul.innerHTML+="<li>"+res.data[i].id+" "+res.data[i].pw+" "+res.data[i].name+" "+res.data[i].age+"</li>"
				}
			})
			
			$("form")[1].reset();
		});
		
		
		$("#delete").on('submit',function(e){
			e.preventDefault();
			
			let eid = e.target.id.value;
			let ename = e.target.name.value;
			axios.post('axiosDelete', {id:eid, name:ename})
			.then(function(res){
				ul.innerHTML="";
				for(let i=0; i<res.data.length; i++){
					ul.innerHTML+="<li>"+res.data[i].id+" "+res.data[i].pw+" "+res.data[i].name+" "+res.data[i].age+"</li>"
				}
			})
			
			$("form")[2].reset();
		});
	</script>
	
	<a href="<c:url value='index.jsp' />">Home</a>
</body>
</html>