Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 플러터
- spring
- python
- programmers
- 자바
- backjoon
- Flutter
- 리눅스
- baekjoon
- 스프링 부트 쇼핑몰 프로젝트 with JPA
- 스프링
- CS지식
- 자바스크립트
- 네트워크
- Java
- CS
- 백준
- DB
- Spring Security
- Oracle
- springboot
- 데이터베이스
- JPA
- postgresql
- 스프링부트
- 시큐리티
- 파이썬
- 데이터
- 자료구조
- 프로그래머스
Archives
- Today
- Total
Jin's Dev Story
[스프링 부트 쇼핑몰 프로젝트 with JPA] 2-2. 회원가입 페이지 본문
Web & Android/스프링 부트 쇼핑몰 프로젝트 with JPA
[스프링 부트 쇼핑몰 프로젝트 with JPA] 2-2. 회원가입 페이지
woojin._. 2023. 10. 15. 10:08이 내용은 스프링 부트 쇼핑몰 프로젝트 with JPA 책을 학습한 내용입니다.
1. MemberController
- Get 요청으로 회원가입 페이지를 요청할 경우 MemberFormDto 객체를 같이 넘김
- POST 요청으로 넘어온 회원가입 정보를 MemberFormDto 객체로 받음
package kr.spring.member.controller;
import jakarta.validation.Valid;
import kr.spring.member.dto.MemberFormDto;
import kr.spring.member.entity.Member;
import kr.spring.member.service.MemberService;
import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@Log4j2
@RequestMapping("/member")
public class MemberController {
@Autowired
MemberService memberService;
@Autowired
PasswordEncoder passwordEncoder;
@GetMapping("/new")
public String memberForm(Model model) {
model.addAttribute("memberFormDto", new MemberFormDto());
return "member/memberForm";
}
// restfull 방식. 이름이 똑같아도 어노테이션이 다르니까 ㄱㅊ다
// 하지만 오버로딩이 안 되면 에러 뜹니다 오버로딩 해줘야 함!
@PostMapping("/new")
public String memberForm(@Valid MemberFormDto memberFormDto) {// @Valid 자동으로 체크해주는 어노테이션
Member member = Member.createMember(memberFormDto, passwordEncoder);
memberService.saveMember(member);
return "redirect:/";
}
}
2. 회원 가입 페이지
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout1}">
<!-- 사용자 CSS 추가 -->
<th:block layout:fragment="css">
<style>
.fieldError {
color: #bd2130;
}
</style>
</th:block>
<!-- 사용자 스크립트 추가 -->
<th:block layout:fragment="script">
<script th:inline="javascript">
$(document).ready(function(){
var errorMessage = [[${errorMessage}]];
if(errorMessage != null){
alert(errorMessage);
}
});
</script>
</th:block>
<div layout:fragment="content">
<form action="/member/new" role="form" method="post"
th:object="${memberFormDto}">
<div class="form-group">
<label th:for="name">이름</label>
<input type="text" th:field="*{name}" class="form-control" placeholder="이름을 입력해주세요">
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="fieldError">Incorrect data</p>
</div>
<div class="form-group">
<label th:for="email">이메일주소</label>
<input type="email" th:field="*{email}" class="form-control" placeholder="이메일을 입력해주세요">
<p th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="fieldError">Incorrect data</p>
</div>
<div class="form-group">
<label th:for="password">비밀번호</label>
<input type="password" th:field="*{password}" class="form-control" placeholder="비밀번호 입력">
<p th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="fieldError">Incorrect data</p>
</div>
<div class="form-group">
<label th:for="address">주소</label>
<input type="text" th:field="*{address}" class="form-control" placeholder="주소를 입력해주세요">
<p th:if="${#fields.hasErrors('address')}" th:errors="*{address}" class="fieldError">Incorrect data</p>
</div>
<div style="text-align: center">
<!-- type이 submit인 경우 form에 적혀있는 주소로 값이 post로 값이 날라간다 -->
<button type="submit" class="btn btn-primary" style="">Submit</button>
</div>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
</form>
</div>
</html>
'Web & Android > 스프링 부트 쇼핑몰 프로젝트 with JPA' 카테고리의 다른 글
[스프링 부트 쇼핑몰 프로젝트 with JPA] 3. 로그인/로그아웃 (0) | 2023.10.15 |
---|---|
[스프링 부트 쇼핑몰 프로젝트 with JPA] 2-3. 회원가입 검증 (0) | 2023.10.15 |
[스프링 부트 쇼핑몰 프로젝트 with JPA] 2-1. 회원가입 로직 (0) | 2023.10.15 |
[스프링 부트 쇼핑몰 프로젝트 with JPA] 1-2. 상품 Repository 설계 (0) | 2023.10.15 |
[스프링 부트 쇼핑몰 프로젝트 with JPA] 1-1. 상품 Entity 설계 (0) | 2023.10.15 |