-
snsboard에 글 등록하기부터 진행했다
snsList.jsp에서
$(function() {//등록하기 버튼 클릭 이벤트$('#uploadBtn').click(function() {regist();});//등록을 담당하는 함수function regist() {//세션에서 현재 로그인 중인 사용자 정보(아이디)를 얻어옵니다.const user_id = '${sessionScope.login.userId}';//자바스크립트의 파일 확장자 체크 검색합니다.let file = $('#file').val();console.log(user_id);console.log(file);//.을 제거한 확장자만 얻어낸 후에 그것을 소문자로 일괄 변경합니다.file = file.slice(file.indexOf('.') + 1).toLowerCase();if(file != 'jpg' && file !== 'png' && file !== 'jpeg' && file !== 'bmp'){alert('이미지 파일(jpg, png, jpeg, bmp)만 등록이 가능합니다.');$('#file').val('');return;} else if(user_id === ''){ //세션 데이터가 없다 -> 로그인을 하지 않았음을 의미합니다.alert('로그인이 필요한 서비스입니다.');return;}service@Overridepublic void insert(SnsBoardVO vo) {mapper.insert(vo);}mapper를 세팅해 준다.<insert id="insert">INSERT INTO snsboard(bno, writer, uploadpath, fileloca, filename, fileralname, content)VALUES(snsboard_seq.NEXTVAL, #{writer}, #{uploadpath}, #{fileloca}, #{filename}, #{fileralname}, #{content})</insert>upload (등록)을 controller에서 만져준다.@PostMapping("/upload")@ResponseBodypublic String upload(MultipartFile file, String content, HttpSession session) {try {String writer = ((UserVO) session.getAttribute("login")).getUserId();//날짜별로 폴더를 생성해서 파일을 관리합니다.SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");Date date = new Date();String fileLoca = sdf.format(date);//저장할 폴더 경로String uploadPath = "C:\\Users\\WiTHUS\\Desktop\\upload\\" + fileLoca;File folder = new File(uploadPath);if(!folder.exists()) {folder.mkdir(); //폴더가 존재하지 않는다면 생성합니다.}String fileRealName = file.getOriginalFilename();//파일명을 고유한 랜덤 문자로 생성합니다.UUID uuid = UUID.randomUUID();String uuids = uuid.toString().replaceAll("-", "");//확장자를 추출합니다.String fileExtension = fileRealName.substring(fileRealName.indexOf("."), fileRealName.length());System.out.println("저장할 폴더 경로: " + uploadPath);System.out.println("실제 파일명: " + fileRealName);System.out.println("폴더명: " + fileLoca);System.out.println("확장자: " + fileExtension);System.out.println("고유랜덤문자: " + uuids);String fileName = uuids + fileExtension;System.out.println("변경된 파일명: " + fileName);//업로드한 파일을 서버 컴퓨터의 지정한 경로 내에 실제로 저장을 진행합니다.File saveFile = new File(uploadPath + "\\" + fileName);file.transferTo(saveFile);//DB에 insert 작업을 진행합니다.SnsBoardVO snsVO = new SnsBoardVO(0, writer, uploadPath, fileLoca, fileName, fileRealName, content, regdate);service.insert(snsVO);return "success";} catch (Exception e) {System.out.println("업로드 중 에러 발생: " + e.getMessage());return "fail"; //에러가 났을 시에는 실패 키워드를 반환합니다.}}글을 올린 후 가져올 목록도 controller에 작성//비동기 통신 후 가져올 목록@GetMapping("/getList")@ResponseBodypublic List<SnsBoardVO> getList(PageVO paging){paging.setCountPerPage(3);return service.getList(paging);}service에도 작성 (무한 스크롤 페이징 적용)@Overridepublic List<SnsBoardVO> getList(PageVO paging) {return mapper.getList(paging);}페이스북, 인스타그램 등에 이미지 파일 올리는 것, 무한 스크롤 페이징
//게시글의 이미지 파일 전송 요청@GetMapping("/display")//ResponseEntity: 응답으로 변환될 정보를 모두 담은 요소들을 객체로 만들어서 반환해 줍니다.public ResponseEntity<byte[]> getFile(String fileLoca, String fileName){System.out.println("fileName: " + fileName);System.out.println("fileLoca: " + fileLoca);File file = new File("C:\\Users\\admin\\Desktop\\upload\\" + fileLoca + "\\" + fileName);System.out.println(file);ResponseEntity<byte[]> result = null;try {HttpHeaders headers = new HttpHeaders();//probeContentType: 파라미터로 전달받은 타입을 문자열로 변환해 주는 메서드입니다.//여러 사용자에게 보여주고자 하는 데이터가 어떤 파일인지를 검사해서 응답 상태 코드를 다르게 리턴할 수 있습니다.headers.add("Content-type: ", Files.probeContentType(file.toPath()));// headers.add("merong", "hello");//ResponseEntity<> (응답 객체에 담을 내용, 헤더에 담을 내용, 상태 메세지);//FileCopyUtils: 파일 및 스트림 데이터 복사를 위한 간단한 유틸리티 메서드의 집합체//file 객체 안에 있는 내용을 복사해서 byte 배열로 변환해서 바디에 담아 화면에 전달합니다.result = new ResponseEntity<>(FileCopyUtils.copyToByteArray(file), headers, HttpStatus.OK);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return result;}//무한 스크롤$(window).scroll(function(){//윈도우(device)의 높이와 현재 스크롤 위치 값을 더한 뒤, 문서(컨텐츠)높이와 비교해서 같다면, 로직을 수행합니다.//문서 높이 - 브라우저 창 높이 = 스크롤 창의 끝 높이와 같다면, 새로운 내용을 불러오자if(Math.round($(window).scrollTop()) === $(document).height() - $(window).height()){//console.log(++page);//$('#contentDiv').append("<h1> Page: " + page + "</h1>");//$('#contentDiv').append("<br>무한<br>페이징<br>로드<br>중입니다~~~<br><br>무한<br>페이징<br>로드<br>중입니다~~~<br><br>무한<br>페이징<br>로드<br>중입니다~~~<br><br>무한<br>페이징<br>로드<br>중입니다~~~<br>");//목록 불러오기의 sql문을 페이징 쿼리를 사용해서 작성해 줍니다.//사용자의 스크롤이 바닥에 닿았을 때, 페이지 변수의 값을 하나 올리고//getList(false)를 줘서 누적해서 계속 스크롤을 열어 줍니다.//게시글을 몇 개씩 불러올지는 페이징 알고리즘에서 알아서 정합니다.getList(++page, false);}});상세보기를 클릭하면 모달창을 열 수 있도록 세팅
//상세보기 처리 (모달창)$('#contentDiv').on('click', '.image-inner a', function(){e.prevetDefault();//글 번호 얻어오기const bno = $(this).attr('href');$.getJSON();"<c:url value='/snsBoard/getDetail/' />" + bno,function (data) {console.log(data);const img = 'display?fileLoca=' + data.fileloca + '&fileName=' + data.fileName;$('#snsImg').attr('src', img); //이미지 경로 처리$('#snsWriter').html(data.writer);$('#snsRegdate').html(data.regdate);$('#snsContent').html(data.content);$('#snsModal').modal('show'); //모달 열기});});//삭제 처리삭제하기 링크를 클릭했을 때 이벤트를 발생시켜서 비동기 방식으로 삭제를 진행합니다.서버 쪽에서 권한을 확인해야 합니다. (작성자와 로그인 중인 사용자의 id를 비교합니다.)일치하지 않으면 문자열("noAuth") 리턴, 성공하면 "Success" 리턴합니다.$('#contentDiv').on('click', '.link-inner a', function(){e.preventDefault();const bno = $(this).attr('href');$.ajax({type: "post",url: "<c:url value='/snsBoard/delete' />"data: bno,contentType: 'application/json',success: function(result){if(result === "noAuth"){alert('권한이 없습니다.');}else if(result === 'fail'){alert('삭제에 실패했습니다. 관리자에게 문의하세요.');} else {alert('게시물이 정상적으로 삭제되었습니다.');getList(1, true); //삭제가 반영된 글 목록을 새롭게 보여줘야 하기 때문에 str값을 초기화합니다.}},error: function(){alert('삭제에 실패했습니다. 다시 시도하세요.')}});})