8. 저장 버튼 클릭시 수정된 파일(HTML,CSS,JS)내용을 서버에 저장하는 기능

 

파일저장 기능 설명

 

- HTML관리 페이지에서

- 출력되어있는 html의 내용을 수정 후   (1번째 라인에 "수정사항을 새로 입력해보겠습니다." 추가)

- 파일저장 버튼을 클릭한다

 

 

- 파일저장 버튼 클릭시 jsp를 호출하기 때문에 화면이 새로고침된다

- 출력된 화면에서 수정된 사항이 확인되지 않는다

 

- 그 이유는 서버에서 리로드가 되지 않았기 때문이다(따로 설정 필요)

- 지정된 파일이 존재하는 경로로 가서 파일을 직접 리로드해주자. 이클립스에서는 더블클릭으로 열거나 새로고침 해주면 된다.

- 다시 도메인으로 가서 새로고침 해보면 바뀐 것을 확인 가능하다

 

 

- 이때 방법2만 수정사항이 적용 된 이유는 캐싱때문이다.

- 자세한 사항은 이전 글을 참고바란다.

 

참고 : https://drsggg.tistory.com/371

7. 특정 경로에 있는 파일(HTML,CSS,JS) 읽어서 화면에 출력하는 기능

참고 : https://drsggg.tistory.com/372

7-1. 캐시처리 v=1

 

 

 

 

 

 

ajax로 jsp호출

// 저장 버튼 클릭시 HTML 파일내용 저장하는 기능
	//$('#btn_saveHtml').unbind('click').click(function(){
	$("#btn_saveHtml").click(function() {
		var editor;
		var path;
		editor = $("#printHTML").val();
		path = ($("#depth_container").text()).replace("/" + g_htmlFileName, "");
		var type = "html";
		
		// console.log dirbti saveHtml1th

		$.ajax({
			url: 'service/saveContents.jsp',
			type: 'POST',
			async: false,
			cache:false,
			data: {
				contents:window.btoa(unescape(encodeURIComponent(editor))),
				path: path, 
				//file: strFile,
				type: type
			},
			error: function(jqxhr, textStatus,error) {
				//alert(textStatus+'\n' terror);
				alert("선택된 파일이 없습니다.");
			},
			success: function(data) {
				alert("success");
				
				sessionStorage.setItem("flagUploadSuccess", "Y");
				window.location.reload(true);
				//loadFileList();
			}
		});
	});

 

 

jsp에서 파일저장

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.*" %>
<%@ page import="com.oreilly.servlet.MultipartRequest" %>
<%@ page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy" %>
<%@ page import="java.io.*" %>
<%@ page import="java.io.OutputStreamWriter" %>
<%@ page import="java.io.BufferedWriter"  %>
<%@ page import="org.apache.tomcat.util.codec.binary.Base64" %>


<%
	String type = "";
	if(request.getParameter("type") != null) type = request.getParameter("type");
	
	response.setCharacterEncoding("UTF-8");
	
	String contents = new String(Base64.decodeBase64(request.getParameter("contents").getBytes()), "UTF-8");
	BufferedWriter bw = null;
	
	String fullPath = "";
	String filename = "";
	String _urlPath2 = "500_admin";	// 500_admin
	
	try {
		if("html".equals(type)) {
			filename += "sample.html";
			fullPath = "C:/Users/TY/Desktop/workspace/workspace_20190611/BoardWeb/src/main/webapp/700_FileMngSys/uploadFile";
		}
		
		// 파일 경로 확인 후 폴더가 없다면 새로 생성
		File path = new File(fullPath);
		if(!path.exists()) path.mkdirs();
		
		// 파일 확인 후 파일이 없다면 에러 리턴
		File file = new File(fullPath + "/" + filename);
		if(!file.exists()) throw new FileNotFoundException();
		
		// 파일 덮어쓰기
		FileWriter fw = new FileWriter(fullPath + "/" + filename);
		bw = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(fullPath + "/" + filename), "UTF-8"));
		bw.write(contents);
		
	} catch(FileNotFoundException e){
		System.out.println("선택된 파일이 없습니다.");
	} catch(IOException e){
		e.printStackTrace();
	} finally{
		if(bw != null) {
			try{
				bw.close();
			} catch(IOException e){
				e.printStackTrace();
			}
		}
	}
	
	response.flushBuffer();

%>

 

 

 

 

 

 

깨짐방지

 

깨짐방지를 위해 ajax에서 data에 해당 로직을 추가한다

 

 

- 깨짐방지가 서버(apache) 때문이므로 jsp에서 받을때는 java.util이 아닌 org.apache를 import하여 아래의 로직을 추가한다.