11일차 (12/06)
Spring
파일 올리기
jsp
파일을 넣으려면 form태그 안에 enctype속성을 넣고 “multipart/form-data”값을 넣어준다
input type은 file으로 하고 name값은 DTO랑 같게 설정을 해야한다
b_file는 파일을 가져와서 담는 저장용 DB에 파일의 이름을 저장
b_filename은 파일의 이름을 저장해서 불러오는 용도
컨트롤러
컨트롤러부터 모든 메서드에 예외처리를 해줘야 한다
서비스
잘 안보이네
b_file에 DTO에 있는 file을 가져와서 b_filename에 b_file의 이름값만 담아서 DTO에 넣어
이름이 중복되지 않게 currentTimeMillis()메서드를 사용하고(초를 천 단위로 나누고 1970년부터 계속늘어난 숫자?) 파일이름을 더해서 만든다
savePath의 경로에 파일이 비어있지(if문) 않다면 저장을한다
DTO를 보낸다
리포지토리
맵퍼
insert는 같은데 파일이름을 추가한다
그전에 테이블에 컬럼을 추가해주자
DB에 사진을 저장하고 싶은데 그거는 너무 어려워보여
설정
이거 왜 하는거지
경로를 지정하자!
resources를 만들고 그 안에 css와 upload폴더를 만들고 그 안에 저장한다
코드
jsp
<h2>파일첨부 글쓰기</h2>
<form action="/board/writefile" method="post" enctype="multipart/form-data">
작성자 : <input type="text" name="b_writer"><br>
비밀번호 : <input type="password" name="b_password"><br>
제목 : <input type="text" name="b_title"><br>
내용 : <input type="text" name="b_contents"><br>
파일 : <input type="file" name="b_file"><br>
<input type="submit" value="작성">
</form>컨트롤러
@RequestMapping(value = "writefile", method = RequestMethod.POST)
public String writefile(@ModelAttribute BoardDTO b) throws IllegalStateException, IOException {
bs.saveFile(b);
return "redirect:/board/paging";
}서비스
public void saveFile(BoardDTO board) throws IllegalStateException, IOException {
// dto에 담긴 파일을 가져옴
MultipartFile b_file = board.getB_file();
// 파일 이름을 가져옴(파일이름을 DB에 저장하기 위해)
String b_filename = b_file.getOriginalFilename();
// 파일명 중복을 피하기 위해 파일이름앞에 현재 시간값을 붙임.
b_filename = System.currentTimeMillis() + "-" + b_filename;
System.out.println("b_filename: " + b_filename);
// 파일 저장하기
String savePath = "D:\\development\\source\\Spring\\BoardProject\\src\\main\\webapp\\resources\\upload\\"+b_filename;
// bfile이 비어있지 않다면(즉 파일이 있으면) savePath에 저장을 하겠다.
if(!b_file.isEmpty()) {
b_file.transferTo(new File(savePath));
}
// 여기까지의 내용은 파일을 저장하는 과정
// DB에 저장하기 위해 DTO에 파일이름을 담는다
board.setB_filename(b_filename);
// DB의 board에 파일이름을 저장할 b_filename이라는 컬럼 추가(타입은 varchar(100))
br.saveFile(board);
}리퍼지토리
public void saveFile(BoardDTO board) {
sql.insert("board.saveFile", board);
}맵퍼
<insert id="saveFile" parameterType="bdto">
insert into board(b_writer, b_password, b_title, b_contents,b_hits, b_date, b_filename)
value(#{b_writer}, #{b_password}, #{b_title}, #{b_contents}, 0, now(), #{b_filename})
</insert>DB에 저장을 안하고 폴더에 저장을 하면 인터넷에서 가져오는 파일은....?
댓글 기능
내 벨로그에는 댓글 없는데 ㅠㅠ
jsp
작성자와 댓글 내용을 받아서 작성한다
댓글을 쓰면 바로바로 보이게 ajax로 만든다
script
ajax를 이용해서 b_number와 c_writer, c_contents를 보내주고
url을 /comment/save로 해서 컨트롤러를 하나 더 만들어서 설정 해보자
컨트롤러
save 메서드와 findAll 메서드를 따로 해서 두번 실행을 해야한다.
순서가 바뀌면 안보인다
서비스
save와 findAll을 나눠서 쓴다
인터페이스를 써서 @Override가 있다
오랜만에 쓰니까 기억이 안났다 자주 써주자 ㅠ
맵퍼
findAll에서 b_number을 넘겨서 해당글의 댓글만 가져오자
jsp에서 ajax로 가져온 내용 출력하기
나는 검색해서 j쿼리를 사용했는데 쌤은 for문을 사용하셨다
detail에서 바로 댓글보기
detail에 들어가서 바로 댓글을 보려면 boardController에 CommentService를 추가하고
detail메서드에서 댓글의 findAll메서드를 실행해서 불러오고 모델에 담아서 보내면 된다.
코드
jsp
$("#comment-write-btn").click(function() {
console.log('제이쿼리로 함수추가하기');
const writer = document.getElementById('c_writer').value;
const contents = document.getElementById('c_contents').value;
const boardNo = '${b.b_number}';
const view = document.getElementById('comment-list');
/* const writer2= ${"#c_writer"}.val();
const contents2= ${"#c_contents"}.val(); */
/* ajax문법을 이용하여 댓글 작어자, 작성내용을 comment/save 주소로 post방식으로 전홍하는 코드를 작성해봅시다 */
$.ajax({
type : 'post',
url : '/comment/save',
data : {
"c_writer" : writer,
"c_contents" : contents,
"b_number" : boardNo
},
dataType : 'json',
success : function(result) {
console.log('ajax 성공');
console.log(result);
let output = "<table>";
output += "<thead>";
output += "<tr>";
output += "<th>번호</th>";
output += "<th>작성자</th>";
output += "<th>내용</th>";
output += "<th>시간</th>";
output += "</tr>";
output += "</thead>";
output += "<tbody>";
$.each(result, function(i) {
output += "<tr>";
output += "<td>" + result[i].c_number + "</td>";
output += "<td>" + result[i].c_writer + "</td>";
output += "<td>" + result[i].c_contents + "</td>";
output += "<td>" + result[i].c_date + "</td>";
output += "</tr>";
});
/* 쌤이 하신거 */
/* for(let i in result){
output += "<tr>";
output += "<td>"+result[i].c_number+"</td>";
output += "<td>"+result[i].c_writer+"</td>";
output += "<td>"+result[i].c_contents+"</td>";
output += "<td>"+result[i].c_date+"</td>";
output += "</tr>";
} */
output += "</tbody>";
view.innerHTML = output;
// 댓글 입력창을 비움.
document.getElementById('c_writer').value = '';
document.getElementById('c_contents').value = '';
},
error : function() {
console.log('오타를 찾아보아요ㅠㅠ');
}
});
});컨트롤러
@RequestMapping(value="save", method = RequestMethod.POST)
public @ResponseBody List<CommentDTO> save(@ModelAttribute CommentDTO c) {
System.out.println("qkdjlkfajfla"+c);
cs.save(c);
List<CommentDTO> cList = cs.findAll(c.getB_number());
for(CommentDTO co: cList ) {
System.out.println(co);
}
return cList;
}서비스
@Override // 주의
public void save(CommentDTO c) {
cr.save(c);
}
@Override // 주의
public List<CommentDTO> findAll(long b_number) {
return cr.findAll(b_number);
}리퍼지토리
public void save(CommentDTO c) {
sql.insert("comment.save", c);
}
public List<CommentDTO> findAll(long b_number) {
return sql.selectList("comment.findAll", b_number);
}맵퍼
<mapper namespace="comment">
<insert id="save" parameterType="cdto">
insert into comments(c_writer, c_contents, b_number, c_date)
value(#{c_writer},#{c_contents}, #{b_number}, now())
</insert>
<select id="findAll" parameterType="long" resultType="cdto">
select * from comments where b_number= #{b_number} order by c_number desc
</select>
</mapper>오늘 사용한 기능
currentTimeMillis()
초를 천단위로 나눠서 기록한 시간을 1970년대부터 추가해서 나온 숫자를 구해준다
MultipartFile
file을 담아주는 클래스? 타입?
File
파일을 새로 생성해주는 클래스
하지만 사용법은 잘 모르겠다
new file(경로) : 경로에 새로운 파일을 만든다?
.isEmpty()
비어있으면 true값
.transferTo()
앞의 변수를 ()으로 변환 시킨다
b_file.transferTo(new File(경로));
만약 위와 같다면 경로의 폴더에 파일을 만들고 그 파일을 b_file으로 변환 시킨다
이런 느낌인가
내일부터는 지금까지 배운 내용으로 각자 만들어보는 실습하려나
