어제 이어서 영상 따라 만들어 보는 중~.~
01. 테이블 생성
먼저 mariaDB에서 테이블을 생성해준다.
Table 이름은 똑같이 board로 하고 아래 column들 설정해주면 됨
예전 같았으면 저 설정값들이랑 쿼리 코드가 뭔지 몰랐을 텐데...
sqld 공부하고 나니까 다 알게됨
PK:기본키 / NN: Not Null
근데 사실 다른 건 설명 안들어서 약자니까 감이 안옴
UQ는 혹시 고유키인가 (그럴듯함)
이렇게 하면 이제 다시 끄고 인텔리제이로 ㄱㄱ
02. 게시글 작성폼 생성
이거 만드는 건데
어제 했던 코드에서 resources -> templates
new html 파일 생성
꾸미는건 프론트 영역이니까 지금은 대충 아래처럼만 써준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시물 작성폼</title>
</head>
<body>
<div class="layout">
<input type="text">
<button>작성</button>
</div>
</body>
</html>
이번에 intellij 처음 써보는 건데 이거 진짜 편하다... html 파일 생성으로 하니까 기본 틀은 바로 제공됨...
그래서 title하고 body 부분만 바로 쓸 수 있음
이렇게 쓰고 Controller부분에서 어제 코드 지우고 다시 쓰기
package com.study.board.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class BoardController {
@GetMapping("/board/write") //localhost:8090/board/write
public String boardWriteForm() {
return "boardwrite";
}
}
아직 따라 쓰는 단계라 자세히는 모르겠지만 대충 이렇게 돌아가는 구나~ 느끼는 중
★GetMapping 주소로 접속하면 -> return 값에 있는 html 파일이랑 연결 시킨다는 뜻
.
.
.
여기까지 쓰고 빌드해주면
......
오류 파티 재시작
일단 저번에 server.host=8090하는 부분은 뺌
그러면 기본 serverport는 자동으로 8080으로 되는 듯 하다 (나중에 다시 찾아봐야겠음)
하여튼 포트가 8080인건 확실하다
왜냐하면 저거 포트 번호 다르게 입력하면 아예 저 페이지가 뜨지도 않음
그러니까 포트는 연결됐는데 코드에서 오류난 것 같다...
그래서 return값이나 GetMapping값 건드려봤는데 계속 저거 떠서 검색해보니까
어떤 분이 파일이름부터가 잘못돼서 한참 해맸다는 거였음
설마........나도?
.......!!!
대박
진짜 파일 이름 잘못 썼음
아까 올린 사진 잘 보면
boardwrite.html인데
write를 wirte로 썼었다.........
-> 수정하니까 정상적으로 작동!!
예전에 프론트 처음 실습 공부해보면서 저걸로 체크리스트 만들었다가
페이지 새로고침 하면 체크리스트 작성한 거 다날라서 좌절했는데......
이제 백엔드가 그걸 담당하는 거였군요
이렇게 직접 실습해보니까 잘 와닿는다 재밌음
.
.
.
그리고 이제 게시글 작성폼을 조금만 더 예쁘게 가다듬는데
잠깐만
생각해보니 아까 html 코드에서 textarea 안넣었었음,,,
그걸 해야 작성 칸이 2개로 생긴다
다시 수정 ㄱㄱ
+
style로 간단하게 꾸며주기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시물 작성폼</title>
</head>
<style>
.layout {
width: 500px;
margin: 0 auto;
margin-top: 40px;
}
.layout > input {
width: 100%;
box-sizing: border-box
margin-top: 10px;
}
.layout > textarea {
width: 100%;
margin-top: 10px;
min-height: 300px;
}
</style>
<body>
<div class="layout">
<input type="text">
<textarea></textarea>
<button>작성</button>
</div>
</body>
</html>
여기까지 하고 빌드하면~~!!
오 진짜 신기하네요
아니 예전에도 html css로 이미 다 해봤지만...
이제 진짜 여기에 데이터가 저장돼서 새로고침해도 안 사라지나?! 싶어서 좀 설렘
03. 글 작성 처리
이제 저 게시판에 글을 작성했을 때 처리할 수 있도록 만들 건데
아까 쓴 html에서 저 게시판 부분은 <form>으로 감싸줘야 됨
[Tip] 코드 여러 줄 한번에 이동시킬 때는 여러 줄 선택한 상태에서, ctrl+shift 누른 상태로 화살표 키 누르면 이동 가능 (그동안 걍 복붙하고 없애고 했는데.....)
다시 코드 수정하고
<form action="/board/writepro" method="post">
<input name="title" type="text">
<textarea name="content"></textarea>
<button type="submit">작성</button>
</form>input이 첫번째로 제목 쓰는 칸이고 textarea가 두번째 큰 내용 쓰는 칸이다.
그리고 form action으로 submit 했을 때 어디 페이지에 post 할지 지정해준다.
(그리고 이렇게하면 input이랑 textarea가 div에 바로 하위 태그가 아니라서... style의 > 표시들은 다 지워주어야 됨
+
컨트롤러에 추가로 postMapping을 연결시켜준다. (주소는 form과 똑같이!!)
@GetMapping("/board/write") //localhost:8090/board/write
public String boardWriteForm() {
return "boardwrite";
}
@PostMapping("/board/writepro")
public String boardWritePro(String title, String content) {
System.out.println("제목: " + title);
System.out.println("내용: " + content);
return "";
}
그리고 빌드하고 나서
아무거나 입력후 작성을 누르면 또 오류페이지가 뜨는데 (아직 writepro 페이지는 안만들었으니까 당연함)
문제는......
영상보면
여기까지 하면 터미널에서 저거 제목이랑 내용 쓴걸 파라미터로 받아오니까 그게 출력되어야 하는데
모르겠고 그냥 오류만 뜸
하하하
후........
다행히 영상 댓글에 나랑 똑같은 오류나신 분이 해결하셨다길래... 나도 똑같이 수정했더니 됨!!
오류 부분은 이거!!
name for argument of type [java.lang.string] not specified, and parameter name information not available via reflection.
-> 스트링 부트 3.2부터 파라미터를 명시해주어야 한다고 함
그래서 boardWritePro() 에 명시 추가
@PostMapping("/board/writepro")
public String boardWritePro(@RequestParam(name="title") String title, @RequestParam(name="content") String content) {
System.out.println("제목: " + title);
System.out.println("내용: " + content);
return "";
}
정상적으로 제목과 내용 출력 완!!
.
.
.
이제 이걸 DB에 저장해야 하는데
아래처럼 com 패키지 하위에 repository, entity 패키지 생성 후 entity 하위에 Board class를 생성한다. (entity의 클래스는 테이블 이름이랑 일치시켜주는게 좋음)
그리고 여기서 아래처럼 쓴다.
mariaDB에서 만들었던 id, title, content 써줌
그러면 이거 jpa가 그대로 읽어줌
package com.study.board.entity;
import lombok.Data;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
@Entity
@Data
public class Board {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String title;
private String content;
}그리고 어노테이션으로 @Data를 써주면
컨트롤러 쪽에서 아까 그 길게 파라미터 안 쓰고 Board class로서 불러올 수 있음
@PostMapping("/board/writepro")
public String boardWritePro(Board board) {
System.out.println(board.getTitle());
return "";
}
처음에 이렇게 쓰면 오류 2가지 나는데
1. Board에 빨간 밑줄 오류
-> 그거 눌러서 class로 불러오기 하면 아래 내용이 상단에 추가되면서 해결
import com.study.board.entity.Board;
2. getTitle() 인식 불가
이건 사실 걍 무시하고 빌드 시켜도 되긴 하는데... 그래도 별로니까 찾아봄
댓글보니 또 같은 상황 있어서 무사히 해결!!
-> setting의 plugins에서 lombok 검색하여 설치
.
.
.
그리고 이제 아래처럼 repository, service 만들어서 컨트롤러에서 설정해주고
빌드하고 mariaDB에서 Tables -> board (3번째 표 모양) 들어가보면
아직 NULL로 뜬다.
이제 페이지 들어가서 입력하고......!
다시 mariaDB에서 새로고침하면!!
들어가진걸 볼 수 있다..........
대박 신기
한번 더 작성하면 마찬가지로 더 들어가짐
페이지를 새로고침하고 다시 써도,,,,,,,,,???
그 전 내용 계속 유지된 상태로 이어서 추가된다!!!
완전 짱
아 졸리다...... 오늘 원래 일정 빡세서 쉴려고 했는데 이거 확인해보고 싶어서 지금까지 함
성공했으니 오늘은 여기까지~!!!!
푹 자고 다시 투비컨티뉴
'🍀Web > Back-End' 카테고리의 다른 글
| [공부 기록 04] Spring Boot 게시글 관리 (5) | 2024.08.30 |
|---|---|
| [공부 기록 03] Spring Boot 게시글 리스트 조회 (0) | 2024.08.29 |
| [공부 기록 01] Spring Boot 개발 환경 세팅 (2) | 2024.08.27 |
