[spring boot]_20일차,21일차_mybatis-파일Upload, Ajax

youuu·2022년 11월 14일

MyBatis Spring 스프링

SPRING

목록 보기

28/33

Upload

index에 추가

📋 index.html

<a href="/upLoadFormStart">UpLoad()</a><p>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>회원관리</h1>
	<!-- <a href="/writeFormEmp">회원 가입</a><p> -->
	<a href="/listEmp">회원 목록(기본 CRUD)</a><p> 
	<a href="/listEmpDept">직원부서조회(Join/Mail전송)</a><p>
	<a href="/writeDeptIn">PL/SQL(부서입력)</a><p>
	<a href="/writeDeptCursor">PL/SQL(부서조회 Cursor)</a><p>
	<a href="/interCeptorForm">interCeptor(가로채기)</a><p>
	**<a href="/upLoadFormStart">UpLoad()</a><p>**
</body>
</html>

컨트롤러 작성

📌📋 UploadController.java

package com.oracle.oBootMybatis01.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import lombok.extern.slf4j.Slf4j;

@Controller
@Slf4j
public class UploadController {

	//upLoadFormStart 시작화면
	@RequestMapping(value = "upLoadFormStart")
	public String upLoadFormStart(Model model) {
		log.info("UploadController upLoadFormStart Start ................");
		return "upLoadFormStart";
	}
}

view단 만들기 upLoadFormStart

📋 upLoadFormStart.html

iframe은 타겟으로 잡아 돌아오려고 한 것.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
iframe {
	width: 0px;
	height: 0px;
	border: 0px
}
</style>

</head>
<body>
	<form id="form1" action="uploadForm" method="post" enctype="multipart/form-data" target="myBatisFrame">
		<input type="file" name="file1"> <p>
		<input type="text" name="title"> <p>
	    <input type="hidden" name="path" value="${pageContext.request.contextPath}/resources/image/"> 
		<input type="submit">
	</form>
	
<iframe name="myBatisFrame"></iframe>

	<script>
		function addFilePath(msg) {
			alert(msg);
			document.getElementById("form1").reset();
		}
	</script>
</body>
</html>

컨트롤러에 upload 만들기

📌📋 UploadController.java

GET 은 그냥 GET과 POST로 쓸수 있다는 걸 보여주기 위해 작성. ➡ 안탄다(void)

UUID : universally unique identifier ()

	@RequestMapping(value = "uploadForm", method = RequestMethod.GET)
	public void uploadForm() {
		log.info("UploadController upLoadFormStart Get Start ................");
	}
	
	@RequestMapping(value = "uploadForm", method = RequestMethod.POST)
	public String uploadForm(HttpServletRequest request, MultipartFile file1, Model model) throws IOException {
		//Servlet 상속받지 못했을 떄 realPath 불러오는 방법
		String uploadPath = request.getSession().getServletContext().getRealPath("/upload/");
		
		log.info("UploadController upLoadFormStart POST Start ................");
		
		log.info("OriginalName : " + file1.getOriginalFilename());
		log.info("size : " + file1.getSize());
		log.info("ContentType : " + file1.getContentType());
		log.info("uploadPath : " + uploadPath);
		String savedName = uploadFile(file1.getOriginalFilename(), file1.getBytes(), uploadPath);
		log.info("savedName : " +savedName);
		model.addAttribute("savedName", savedName);
		
		return "uploadResult";
	}

	private String uploadFile(String originalName, byte[] fileData, String uploadPath) throws IOException {
    	// universally unique identifier (UUID)
		UUID uid = UUID.randomUUID();
		
//		requestPath = requestPath + "/resources/image";

		log.info("uploadPath --> " + uploadPath);
		
		//Directory 생성
		File fileDirectory = new File(uploadPath);
		// 신규폴더(Directory) 생성
		if(!fileDirectory.exists()) {
			fileDirectory.mkdirs();
			log.info("업로드용 폴더 생성 :  " + uploadPath);
		}
		
		String savedName = uid.toString() + "_" + originalName;
		log.info("savedName --> " + savedName);
		File target = new File(uploadPath, savedName);
//		File target = new File(requestPath, savedName);
		
		//File Upload  ---> uploadPath / UUID + originalName
		FileCopyUtils.copy(fileData, target); // org.springframework.util.FileCopyUtils
		
		return savedName;
	}

TEST) cmd 에서 mkdirs 사용하여 파일 생성하기
c:\log에 kkk 라는 파일을 생성할 예정.

C:\Users\admin>cd c:\log
c:\log>dir
c:\log>mkdir kkk

파일업로드 참고

업로드 파일 삭제

AOP 성능측정
-->> 김영한 기본강의 aop 를 들어보는게 낫다.

optional _ null체크

Optional 클래스를 사용해 NPE를 방지할 수 있도록 도와준다.
Optional는 null이 올 수 있는 값을 감싸는 Wrapper 클래스로, 참조하더라도 NPE가 발생하지 않도록 도와준다
java8 에서 새로나온 기능이다.

참고

텍스트에 넣고 viewer를 누르면 아래처럼 구조를 볼 수 있다

jsonviewer 또는 JSON VUE 크롬에 확장 시키면 볼 수 있다.

html로 넣어주면 태그사이 <span id="msg"></span><p>

🌵 Merge 시 주의점

merge :
준영속 상태의 엔티티를 영속 상태로 변경할 때 사용하는 기능.
넘어온 모든 데이터를 바꿔치기 함

변경 감지 기능을 사용하면 원하는 속상만 선택해서 변경할 수 있지만, 병합을 사용하면 모든 속성이 변경된다.
병합시 값이 없으면 null로 업데이트 할 위험이 있다.(병합은 모든 필드를 교체한다)
실무에서는 보통 변경가능한 데이터만 노출하기 때문에, 병합을 사용하는 것이 더 번거롭다.
1. 영속성관리 x --> Setter 저장불가
2. merge --> 현재 Settubg 된것만 수정, 나머지는 Null 변경감지 기능을 사용할 때 setter를 사용하면 추적하기 어렵다.
  setter 보다는 의미있는 메서드를 사용하여 변경을 확실하게 알 수 있게 하자!
  Mybatis에서 스위치문 사용
- >=를 그냥 사용하면 오류가 뜬다. 이때 <![CDATA[ ]]> 안에 넣으면 된다.
```
	<select id="tkEmpListAll" parameterType="Emp" resultType="Emp">
		<![CDATA[
			select *
			from 
			(
			        select rownum rn, a.*
			        from
			        (
			        	select * from emp order by empno) a
			)
			where rn >= #{start} 
			and   rn <= #{end}
		]]>
		</select>
```
  객체를 가져와서 부서명을 넣음멀티로우를 조작할때 사용 varStatus="status"

Ajax

(Asynchronous Javascript and XML)

비동기적 정보 교환 기법
전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

아작스 참고

아작스로 delete구현

💡 나중에다시
아작스로 구현하기 예제를 찾아서 해봐야겠다.

📌📋 EmpRestController.java

	@RequestMapping("/empnoDelete")
	public String empnoDelete(Emp emp) {
		log.info("EmpRestController empnoDelete START ..........");
		int delStatus = es.deleteEmp(emp.getEmpno());
		String delStatusStr = Integer.toString(delStatus);
		return delStatusStr;
	}

📋 listEmpAjax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="300">
<title>Insert title here</title>
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript">

	function getListDept(){
		var str = "";
		var str2 = "";
		console.log("getListDept Run");
		alert("getListDept Run")
		$.ajax(
			  {
				url:"/sendVO3",
				dataType:'json',
				success:function(data){
					var jsonStr = JSON.stringify(data);
					alert("jsonStr" + jsonStr)
					$('#dept_list_str').append(jsonStr);
					str += "<select name='dept'>"
					$(data).each(
						function(){
							str2 = "<option value='" + this.deptno + "'>"+this.dname + "</option>";
							str += str2
					}
				)
				str += "</select><p>"
				$('#dept_list_combobox').append(str);
			  }
			}
		);
	}
	
 	function getDeptDelete(vIndex) {
		var selEmpno = $("#empno" + vIndex).val();
		var selEname = $("#ename" + vIndex).val();
		
		alert("getDeptDelete selEmpno-->"+ selEmpno);
		// Server --> /empnoDelete(EmpRestController)
		//            service :  deleteEmp
		// Parameter --> empno : selEmpno , ename : selEname
		// 성공             --> 해당 라인 삭제
		
		$.ajax(
			{
				url:"/empnoDelete",
				data:{empno : selEmpno , ename : selEname},
				dataType:'text',
				success:function(data){
					alert(".ajax getDeptDelete data->" + data)
					if(data =='1'){
					// 성공하면 아래 수행
					$('#emp'+vIndex).remove();
					}
				}
			}		
		);
	}	
 	 function refresh() {
 	      $.ajax({
 	        url: "",
 	        dataType: "text",
 	        success: function(html) {
 	          $('#fu').replaceWith($.parseHTML(html));
 	          setTimeout(refresh,2000);
 	        }
 	      });
 	    }
 	refresh();

</script>
</head>
<body>
<h2>회원 정보</h2>
<table>
	<tr><th>번호</th><th>사번</th><th>이름</th><th>업무</th><th>부서</th><th>근무지</th></tr>
	<c:forEach var="emp" items="${listEmp}" varStatus="status">
		<tr id="emp${status.index}"><td>${status.index + 1}</td>
			<td><input type="hidden" id="deptno${status.index }" value="${emp.deptno}"></td>
		    <td><input type="text" id="empno${status.index}" value="${emp.empno }">${emp.empno }</td>
		    <td><input type="text" id="ename${status.index}" value="${emp.ename }">${emp.ename }</td>
			<td>${emp.job }</td><td>${emp.deptno } 
			    <input type="button" id="btn_idCheck2" value="부서Delete" onclick="getDeptDelete(${status.index})">
			</td>
			<%-- <td>${emp.loc }</td> --%>
		</tr>
	</c:forEach>
</table>

	RestController LISTVO3: <input type="button" id="btn_Dept3" value="부서명 LIST"  onclick="getListDept()"><p>
   Dept_list:   <div id="dept_list_str"></div>

   Dept_list3:
   <div id="dept_list_combobox"></div>

</body>
</html>