목차
MVC 패턴이란(Modle-View-Controller) ?
model : 데이터를 다뤄 View에게 보내주는 역할
view : 화면에 보일 수 있도록 최종 페이지를 만드는 역할
controller : 위 두 가지 사이에서 인터페이스 역할을 한다.
예시) 웨이터 : Controller / 주방장 : View /데이터(재료) : Model
개발 환경 설정
1.
git repo 새로 생성
git 인텔리제이에서 깃리포지토리 연결
git commit 넣으면 안되는 것
2.
프로젝트 빌드
new project
dependency
mustachie한글 깨짐 방지
HelloWorld 실습
greetings.mustache 생성
mustache 파일로 생성되지 않을 경우
<div>
<h1>{{username}} bootstrap + mustache</h1>
</div>
HTML
복사
MustacheController 생성 ( controller > )
•
Request에 대한 Response 페이지 설정 = return "페이지명"
•
model.addAttribute(”변수명”,”값”);
◦
모델 객체를 이용하여 해당 변수에 접근한다.
@Controller
public class MustacheController {
@GetMapping(value = "/hi")
public String mustacheCon(Model model) {
model.addAttribute("username", "JSH");
return "greetings"; // 응답 페이지 파일명
}
Java
복사
실행 결과 확인
id까지 model에 바인딩
•
MustacheController에 @PathVariable String id추가
@GetMapping(value = "/hi/{id}")
public String mustacheCon2(@PathVariable String id, Model model) {
model.addAttribute("username", "JSH");// view에 값을 넘기겠
model.addAttribute("id", id);// view에 값을 넘기겠
return "greetings"; // greetings라는 이름의의 view를 리턴
Java
복사
•
greetings.mustache 수정 ( resources > templates > )
<div>
<div>
{{# id}}
<h1>{{id}} {{username}} Hello! </h1>
{{/ id}}
{{^ id}}
<h1>{{username}} Hello! </h1>
{{/ id}}
</div>
</div>
HTML
복사
실행 결과 확인
bootstrap 활용
html 구조 적용 → Quick Start 2 구조를 복사해서 사용
Quick Start 2의 내용을 복사해서 greetings.mustache에 적용한다.
버튼 적용(button)
코드
실행 결과 확인
네비게이션 바 적용(navbar)
코드
실행 결과 확인
사이트 정보
코드
실행 결과 확인
뷰 페이지에 레이아웃 적용
앞의 네비게이션 바와, footer은 모든 뷰 페이지에 적용되어 반복되기 때문에
header.mustache , footer.mustache로 분리합니다.
Header - Navigation Bar
Footer - 사이트 정보
Body - 내용
content 코드 및 설명
{{>layouts/header}} : layouts 패키지 안의 header을 사용
{{>layouts/footer}} : layouts 패키지 안의 footer을 사용
•
content제외한 위 내용은 header.mustache
아래 내용은 footer.mustache 로 옮긴다.
폼 데이터 주고 받기
ArticleController 생성 ( controller > )
@Controller
@RequestMapping("/articles")
@Slf4j // 로거 추가
public class ArticleController {
@GetMapping(value="/new")
public String newArticleForm() {
return "articles/new";
}
}
Java
복사
new.mustache 생성 ( resources > templates > articles > )
•
form 추가
{{>layouts/header}}
<!--- action /articles/posts url로 던질 것이고 method은 post -->
<!--- ArticleController 에서 postmapping과 동일한 url 입니다 --->
<form action="/articles/posts" method="post">
<input type = "text" name="title">
<input type = "text" name="content">
<button type = "submit" class="btn btn-primary">Submit</button>
<!--- 리다이렉트 전체 조회페이지로 이동 기능 : <a태그>의 링크 사용 --->
<a href="/article">back</a>
</form>
{{>layouts/footer}}
HTML
복사
실행 결과 확인
정리 및 예고
1.
새 글을 작성할 수 있는 폼을 출력해주는 페이지는 만들었다.
2.
이 폼 페이지에 작성한 글을 저장할 수 있는 메소드를 만들어 보자
3.
createArticle 이라는 메소드를 작동 시킬 것이고 DTO(Data Transfer Object) 를
파라메터로 받아 JPA 기술을 활용하여 DataBase에 insert 하는 메소드 이다.
4.
다음 슬라이드에 Post 메소드를 만들 것이다.
5.
JPA 파트에서 ENTITY와 REPOSITORY 클래스를 추가 할 것이다.
데이터 생성, JPA 사용
JPA란?
•
자바 언어를 DB 언어로 바꿔준다
•
JPA의 핵심도구는 ENTITY 와 REPOSITORY가 있다.
•
ORM(Object-Relational Mapping) 기술 표준으로 사용되는 인터페이스의 모음
주의 : entity, response, db접속정보
•
jpa를 잘못쓰면 db가 날라가기도 하므로 DB에 대한 지식을 갖고 잘 알고 사용해야 한다.
•
ENTITY는 자바 객체를 DB가 이해할 수 있게 규격화한 데이터이다
•
ENTITY는 REPOSITORY 라는 일꾼을 통해 DB에게 전달되고 처리된다.
•
DTO를 ENTITY로 변환하고 Repository의 save() 메소드를 사용해
DB에 저장하는 과정을 진행할 것이다.
환경 설정 (build.gradle > alt+Insert > add dependency)
springboot-starter-data-jpa 검색 후 추가
ArticleDto.java 생성 ( domain > dto > )
@Getter
@ToString
public class ArticleDto {
public ArticleDto(Long id, String title, String content) {
this.id = id;
this.title = title;
this.content = content;
}
private Long id;
private String title;
private String content;
// Dto 객체를 Entity로 변환
public Article toEntity() {
return new Article(title, content); // Article을 만들어서 반환한다.
}
}
Java
복사
Article 생성 ( domain > entity > )
•
Entity 선언
@Entity → JPA에서 객체로 다루겠다는 선언
@Id → @Entity가 붙어있다면 꼭 붙여줘야한다. Primary Key역할
@GeneratedValue → Id를 직접 생성하지 않고 자동으로 생성하도록 한 경우 붙인다.
@Entity
@NoArgsConstructor
@Getter
public class Article {
@Id
@GeneratedValue
private Long id; // JPA는 id와 entity 두 가지가 모두 있어야 사용가능
private String title;
private String contents;
public Article(String title, String contents) {
this.title = title;
this.contents = contents;
}
}
Java
복사
ArticleController 수정 ( controller > )
@Controller
@RequestMapping("/articles")
@Slf4j
public class ArticleController {
// spring이 articleRepository구현체를 DI(인터페이스 아님)
// 구현체 = ArticleDao라고 생각해보자
private final ArticleRepository articleRepository;
public ArticleController(ArticleRepository articleRepository) {
this.articleRepository = articleRepository;
}
...
@PostMapping(value="/posts")
public String createArticle(ArticleDto form) {
// Dto를 Entity로 변환
Article article = form.toEntity();
log.info(form.toString());
Article saved = articleRepository.save(article);
log.info(saved.toString());
return "";
}
}
Java
복사
DB 접속 정보 추가
•
application.yml
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localshot:8080/like-lion-db
username: root
password: password
# 콘솔에 SQL 출력 여부
jpa:
show-sql: true
# hibernate 설정
database-platform: org.hibernate.dialect.MySQL8Dialect
database: mysql
hibernate.ddl-auto: update # 초보자일 땐 create 쓰지 말 것
Java
복사
•
환경 설정
설정 방법
실행 결과 확인
에러 로그
1.
MustacheController에 @Controller 를 넣지 않아서 발생한 화면
꼭 넣기!
2.
db 접속정보 안들어갔을 때 화면
•
Environment Valuable 설정하기 [링크]
