본문 바로가기
Spring/Spring 기초

e7e샘 restful방식 연습

by 미눅스[멘토] 2023. 8. 23.
728x90

 

YerinController.class

package com.minu.merong.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.minu.merong.service.Yerin;
import com.minu.merong.vo.YerinVO;

@Controller
@RequestMapping("/rest")
public class YerinController {

	
	@Autowired
	private Yerin yerinSVC;
	
	@GetMapping("/index")
	public String getView() {
		return "yerin";
	}
	
	//RESTFUL방식을 적용하면 기본 5가지(get(리스트,1개),post,put,delete)
	//리스트 조회
	@ResponseBody
	@GetMapping(value="/yerins",produces = "application/json;charset=utf-8")
	public List<YerinVO> getYerins() {
		return yerinSVC.listData();
	}
	
	//1개 조회
	@ResponseBody
	@GetMapping(value="/yerin/{title}",produces = "application/json;charset=utf-8")
	public YerinVO getYerin(@PathVariable String title) {
		YerinVO yerinVO = new YerinVO();
		yerinVO.setTitle(title);
		
		return yerinSVC.oneData(yerinVO);
	}
	
	//1개 insert
	@ResponseBody
	@PostMapping(value="/yerin",produces = "application/json;charset=utf-8")
	public String postYerin(@RequestBody YerinVO yerinVO) {
		return Integer.toString(yerinSVC.insertData(yerinVO));
	}
	
	//1개 update
	@ResponseBody
	@PutMapping(value="/yerin",produces = "application/json;charset=utf-8")
	public String putYerin(@RequestBody YerinVO yerinVO) {
		return Integer.toString(yerinSVC.updateData(yerinVO));
	}
	
	//1개 delete
	@ResponseBody
	@DeleteMapping(value="/yerin/{title}",produces = "application/json;charset=utf-8")
	public String deleteYerin(@PathVariable String title) {
		YerinVO yerinVO = new YerinVO();
		yerinVO.setTitle(title);
		
		return Integer.toString(yerinSVC.deleteData(yerinVO));
	}
}

 

 

 

JQuery안쓰는 AJAX연습

yerin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예린 restful 클라이언통</title>
</head>
<body>
<div id="disp"></div>
<hr/>
<form>
    타이틀<input type="text" name="title"><br/>    
    이름<input type="text" name="sname"><br/>    
    내용<textarea name="scont"></textarea><br/>
    <!--button 태그는 form태그 안에 있음 기본 type이 submit이 됨-->
    <button type="button" onclick="fSearch()">조회</button> <!--버튼은 타입을 지정하지 않으면 자동으로 submit으로 작동한다. 꼭 타입 작성하자-->
    <button type="button" onclick="fmodify()">수정</button> <!--버튼은 타입을 지정하지 않으면 자동으로 submit으로 작동한다. 꼭 타입 작성하자-->
    <button type="button" onclick="fDel()">삭제</button> <!--버튼은 타입을 지정하지 않으면 자동으로 submit으로 작동한다. 꼭 타입 작성하자-->
    <button type="button" onclick="fInsert()">입력</button> <!--버튼은 타입을 지정하지 않으면 자동으로 submit으로 작동한다. 꼭 타입 작성하자-->
</form>


<script>

function fInsert(){
    //넘겨야 할 data
    let yerinVO = {
        title: myTitle.value,
        sname:myName.value,
        scont:myCont.value,
    }
    //아작스
    let xhr = new XMLHttpRequest();
    xhr.open("post","/merong/rest/yerin",true);
    xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status== 200){
            alert("잘 입력 되었어용!!!")
            console.log("체킁",xhr.responseText)
            getList();//리스트를 다시 뿌려랑!
        }else{
            alert("잘 입력되지 않았습니다.!!")
        }
    }
    xhr.send(JSON.stringify(yerinVO)); //문자열롱
}


function fSearch(){
    //넘겨야 할 data
    let xhr = new XMLHttpRequest();
    let schURL = `/merong/rest/yerin/\${myTitle.value}`
    xhr.open("get",schURL,true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status== 200){
            let yerinVO = xhr.responseText;
            if(yerinVO){
                yerinVO = JSON.parse(yerinVO); //json문자열을 json객체롱
                myName.value = yerinVO.sname
                myCont.value = yerinVO.scont;
            }else{
                alert("찾는 타이틀은 업소용");
                myTitle.value = "";
                myName.value = "";
                myCont.value = "";
            }
            console.log("체킁:",xhr.responseText);
        }
    }
    xhr.send();
}


function fDel(){
    //넘겨야 할 data
    let xhr = new XMLHttpRequest();
    let delURL = `/merong/rest/yerin/\${myTitle.value}`
    xhr.open("delete",delURL,true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status== 200){
            console.log("체킁",xhr.responseText)
            getList();//리스트를 다시 뿌려랑!
            myTitle.value ="";
            myName.value ="";
            myCont.value ="";
        }
    }
    xhr.send();
}


function fmodify(){
    //넘겨야 할 data
    let yerinVO = {
        title: myTitle.value,
        sname:myName.value,
        scont:myCont.value,
    }

    let xhr = new XMLHttpRequest();
    xhr.open("put","/merong/rest/yerin",true);
    xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status== 200){
            console.log("체킁",xhr.responseText)
            getList();//리스트를 다시 뿌려랑!
        }
    }
    xhr.send(JSON.stringify(yerinVO));
}

const myList = document.querySelector("#disp");
const myTitle = document.querySelector("input[name=title]");
const myName = document.querySelector("input[name=sname]");
const myCont = document.querySelector("textarea[name=scont]");
//TR 마우스 오버
function fmover(pthis) {
    pthis.style.backgroundColor = "black";
    pthis.style.color="yellow";
}

//TR 마우스 아웃
function fmout(pthis){
    pthis.style.backgroundColor = "white";
    pthis.style.color="black";
}

function f_onclick(pthis) {
    myTitle.value = pthis.children[0].innerHTML;
    myName.value = pthis.children[1].innerHTML;
    myCont.value = pthis.children[2].innerHTML;
}
//리스트 가져다 뿌리깅(함수만들기)
const getList = () =>{
    let xhr = new XMLHttpRequest();
    xhr.open("GET","/merong/rest/yerins",true);
    xhr.onreadystatechange = () =>{
        if(xhr.readyState == 4 && xhr.status == 200){
            //json문자열을 json객체로 바꿔야 편하게 쓸 수 있음
            let rslt = JSON.parse(xhr.responseText);
           
            let tblStr = "<table border=1>";
            tblStr += "<tr><th>타이틀</th><th>이름</th><th>내용</th></tr>"
            for(let i=0; i<rslt.length; i++){
                tblStr += "<tr onmouseover=fmover(this) onmouseout=fmout(this)  onclick='f_onclick(this)' >  ";
                tblStr += `<td>\${rslt[i].title}</td>`//jsp일때만 역슬래쉬를 붙임 이유는 자바와 섞이지 말라는 안붙이면 해석을 못함
                tblStr += `<td>\${rslt[i].scont}</td>`
                tblStr += `<td>\${rslt[i].sname}</td>`
                tblStr += "</tr>";
            }
            tblStr += "</table>";
            myList.innerHTML = tblStr;
        }
    }
    xhr.send();
}

//함수 호출
getList();

</script>
</div>
</body>
</html>

 

'Spring > Spring 기초' 카테고리의 다른 글

e7e샘의 sts4 spring boot 두번째  (0) 2023.08.24
e7e샘의 Spring boot 설치 및 환경설정  (0) 2023.08.23
e7e샘의 날씨 가져오기(CrossOrigin 우회하는법)  (0) 2023.08.22
SVN설치방법  (0) 2023.08.22
e7e샘의 초간단 웹소켓  (0) 2023.08.18

관련글

티스토리툴바