CLASS/SPRING,JSTL

#6-9 / PathVariable(- API 서버 제작시 사용)

hingu 2024. 7. 15. 17:40

PathVariable

REST API URI에 변수값을 이용하여 해당 페이지를 로드하는 형태의 data출력 방식

{ }를 이용하여 id값을 핸들링

api 서버 제작시 가장 많이 사용하는 annotation - mapping에 있는 파라미터 이름을 로드하여 변수로 변환하는 역할

/* api서버를 만들때 주로 사용하는 방식 */
@GetMapping("/api/{id}")
public String apiurl(@PathVariable String id) {
    System.out.println(id);

    return null;
}

~/api/100  접속시 =>  /api/100.jsp 를 찾음!!

 

 

API 서버? REST, RESTful, CDN  해당 모든 사항이 포함됨

 

❓ API 서버

  • REST ( get,post )
    xml,json 로드받는 역할
    아키텍처 구조
  • RESTful ( get,post,put,delete ) - url 파라미터로 세팅
  • CDN ( get,post ) - Image,Video
  • SOAP ( xml만 사용 )
    나중에 공부해보길 추천ㅋ , REST보다 어려움
    REST와 특성이 비슷함
    금융권에서 많이 사용 - 보안 좋아서
    프로토콜 구조(서버와 서버간의 DATA 교환이 이루어진단 뜻!)

❓ 아키텍처 , 프로토콜

  • 아키텍처 : 데이터의 구조 형태
  • 프로토콜 : 서버와 서버간의 통신

 

👀 CDN API Service 만들기

⚡ 이미지 API 만들기
cdn 유의사항 : 파일명이 같으며 속성이 다를 경우 오작동이 발생할 수 있음

이미지 웹경로에 몇개 저장함
🔽

-api_main.java ( @controller )- @GetMapping("/images/{name}")

@GetMapping("/images/{name:[0-9]+}") 시 숫자만 가능
=> {name:[0-9a-z]+} 등 정규식 코드 형태로 구성시 문자형태의 이미지는 출력하지 않음 - 아예 필터링을 해버림
 
//CDN API Service
@GetMapping("/images/{name}")
public @ResponseBody byte[] images( //이미지라서 byte 쓴거임
            @PathVariable String name,HttpServletRequest req
        ) throws Exception{
    //웹경로
    String webpath = req.getServletContext().getRealPath("/upload/"); 
    String url = webpath + name + ".jpg";
    InputStream is = new FileInputStream(url);
    byte[] imgurls = IOUtils.toByteArray(is); //buffer같이 한번에 통째로 쫙 읽어버리는 역할
    //자료형이 byte[]라 toByteArray 사용
    //byte형식으로 한번에 데이터를 읽어서 자료형 전송

    is.close();

    return imgurls; //경로에 대한 이미지를 출력하는 역할
}


@ResponseBody 
http 프로토콜 주소를 html에서 로드시 자동 맵핑 역할을 하여 결과값을 return해주는 annotation
ex ) 이미지, xml, json 등... 에 사용 , ajax랑은 관계없음 (webpage에 걍 그대로 출력하는거)
@RequestBody 
ajax로 요청시 해당 내용을 맵핑하여 출력시키는 역할
ex) javascript ajax console로 출력 => this.response

=> 이 둘중 하나를 쓴다는건 api 서버를 만들겠다는 것!

IOUtils 
file 읽기,쓰기 사용 가능
buffer같이 한번에 통째로 쫙 읽어버리는 역할
IOUtils.toString() , IOUtils.copy() ... 등이 있다

- images.jsp (이미지 서버 view 화면)

<body>
	<img src="http://localhost:8080/images/1">
	<img src="http://localhost:8080/images/2">
	<img src="http://localhost:8080/images/3">
	<img src="http://localhost:8080/images/4">
</body>

=> 실제경로로 이미지 가져오기 가능
저 경로로 접속하면 요상한 문자 등장 - 이미지 퍼가기 불가능 (보안 👍)

 

 

 

test : chrome - talend api tester 활용 (가상의 ajax 통신 테스트용)

 

⚡ 스트리밍 CDN API ( 동영상 스트리밍 서비스 ) => E-learning에서 활용 가능

폴더에 영상 준비
🔽

- @controller
 
//스트리밍 CDN API
@GetMapping("/youtube/{id}")
public @ResponseBody byte[] youtube(@PathVariable String id, HttpServletRequest req) throws Exception{
    String url = req.getServletContext().getRealPath("/upload/");
    String filename = url+id+".mp4";
    InputStream is = new FileInputStream(filename);
    byte[] movie = IOUtils.toByteArray(is);
    is.close();

    return movie;
}


- youtube.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="cr" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%
	String uu = request.getRequestURL().toString();
	String vidx =request.getParameter("vidx");
	String url=uu.replace(".jsp","/")+vidx;
	
	if(vidx == null){
		out.print("동영상을 선택해주세요.");
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동영상 스트리밍 서비스</title>
</head>
<body>
	<!-- 메뉴에 가상의 속성을 이용하여 attribute로 해당 값을 로드하여 GET으로 전송시킴 -->
	<ul id="menu">
		<li data="11">video 1</li>
		<li data="22">video 2</li>
		<li data="33">video 3</li>
	</ul>
	<br><br><br><br><br>
	
	<!-- 해당 메뉴에 맞는 값을 받아서 CDN API 서버 통하여 해당 영상을 로드하는 역할 -->
	<cr:set var="mv" value="<%=url%>"/>
	<cr:set var="vidx" value="<%=vidx %>"/>
	<video width="480" height="360" muted autoplay loop>
		<source src="${mv}" type="video/mp4">
	</video>
</body>

<script type="module">
	import {m_select} from "./youtube.js";
	document.querySelector("#menu").addEventListener("click",function(z){
		var data = z.target.attributes.data.nodeValue;
		new m_select().m_load(data);
	});
</script>

</html>


- youtube.js

//사용자가 선택한 영상을 처리하는 class
export class m_select{
	m_load(n){
		location.href="./youtube.jsp?vidx="+n;
	}
}

 

우왕