<sql db 초기화 >
DROP DATABASE mission;
CREATE DATABASE mission;
USE mission;
INSERT INTO note
SET content = '', create_date=NOW(), title='new title..';
요구사항 - 시안영상보고 이런식으로 작동되는지 보기
1. 데이터 베이스에 노트없을때 에러나게 하지말고 기본노트 하나 추가해라(레이아웃은 맞춰주기)
-
List< Note> noteList = noteRepository.findAll(); //-> 노트데이터베이스(table)에서 note를 싹다가져와 List로 반환
해당 리스트를 탬플릿에 보여지기위해서
model.addAtrribute("noteList" , noteList);
model.addAtrribute("targetNote" , noteList.get(0) ); // cf) targeNote 는 내가 선택한 목록 보여주는거다 0으로햇으니 제일 위에있는걸 보여주겠다
cf) 우리는 등록화면이랑 list 화면이 같은 화면에 나온다. -
1) noteList 를 가져왔는데 아무것도 없으면 오류 그래서 note를 새로 만들어야한다 .
if(noteList.isEmpty()){
note note = new Note();
note.setTitle("new title..);
note.setContent("")
note.setCreateDate(LocalDateTime.now();
noteRepository.save(note);)} // ?? 꼭 레파지토리에 저장하는이유는 ?? -
2) main과 write 에 똑같은게있으니 메소드(함수)로 빼주기
private Note saveDefault(){
note note = new Note();
note.setTitle("new title..);
note.setContent("")
note.setCreateDate(LocalDateTime.now();
noteRepository.save(note);)}
}
cf) ??새로운 노트를 생성하고 저장하는 목적으로 사용됩니다. 그래서 메서드의 반환 유형이 Note로 지정되었습니다. 이 메서드는 새로운 노트 객체를 반환할 것입니다.. ??
- 3) 데이터베이스 에는 추가되어있는데 , 화면엔 에러가뜬다 . 이유는 noteList는 saveDefault(); 하기전에 뽑아온거니 여전히 noteList가 비어있다
그러면 저장을 했으니깐 DB에서 다시 꺼내와야함 -> return "redirect:/";
2.추가 몇개해서 뭐보고있는지 모른다 -> 클릭할때마다 배경색 표시
- templates -> main 에서 noteList 에서 하나씩 빼서 화면에 newtitle.. 보여주는 코드 옆에 class ="bg-blue-600" -> 이건 모두 칠해짐
-> 타임리프 문법으로 조건 만들어주기 th:class ="${note.id==targetNote.id} ? 'bg-blue-600' : '' " ->삼항연산자 참이면 왼쪽 거짓이면 오른쪽
cf) class = 요소에 스타일을 적용하는 방법 중 하나입니다.
3. 공백으로 수정을하면 목록에서 사라진다 -> 데이터베이스엔 여전히 5개-> 내가 선택못함->제목이없으면 제목없음으로 세팅하기
- update 에 가서 if (title.trim()length() == 0){
title ="제목없음"} // 글자가 하나도 없으면 title에 제목없음 을 넣어주자.
4. 삭제하기 버튼을 수정하기근처에 만들어라 삭제버튼누르면 해당게시물이 DB에서 삭제되고 노트 목록에서도 보이지 않아야함
-
템플렛 수정옆에다가 만들기
< /form th:action ="@{|/delete/{${targetNote.id}|}" method ="post"> ->타임리프 문법 경로를나타낼땐 @
< input type ="submit" value ="삭제">< /form> cf < form> 요소는 사용자로부터 입력을 받아 서버로 전송하는 역할을 합니다 이떄 "/delete" 경로로 POST 방식으로 전송한다는 것을 의미합니다 , type="submit" 사용자가 이 입력 요소를 클릭하면 폼의 데이터가 서버로 전송됩니다.
value="삭제" 사용자에게 표시되는 버튼에 "삭제"라는 텍스트가 표시됩니다. -
@PostMapping("/delete/{id}")
public String delete(@PathVariavble("id") Long id){
noteRepository.deleteById(id);
return "redirect:/";}
참고사항
-
${noteList}는 서버(컨틀롤러) 측에서 가져온 noteList라는 변수의 값을 HTML에 삽입한다는 의미입니다
-
< form th:action="@{|/delete/${targetNote.id}|}" method="post">
< input type="submit" value="삭제">
</ form>- submit 을 하면 삭제버튼을 누르면 컨트롤러로가서 -> 메인가서 -> 템플릿가서 -> 뷰에 보여준다
-
@PathVariable("id") 은 url 과 파라미터 변수에 매핑해주기위해 쓰임
즉
@PostMapping("delete/{id}") // 패스베리어블을 하면 Long id 가"delete/{id}" 유엘알이라고 알려주는것
public String delete(@PathVariable Long id){
noteRepository.deleteById (id);
return"redirect:/";
}
