application.yml
server:
port: 8282
servlet:
encoding:
charset: UTF-8
enabled: true
force: true
spring:
mvc:
view:
prefix: /WEB-INF/views/
suffix: .jsp
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/blog?serverTimezone=Asia/Seoul
username: pure
password: pure1234
# ddel-auto: create로 하면 서버 재시작마다 비어 있는 새 테이블을 생성함.
jpa:
open-in-view: true
hibernate:
ddl-auto: update
naming:
physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
use-new-id-generator-mappings: false
show-sql: true
properties:
hibernate.format_sql: true
jackson:
serialization:
fail-on-empty-beans: falseheader.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">Pure</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<c:choose>
<c:when test="${empty sessionScope.principal }">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/loginForm">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/joinForm">회원가입</a></li>
</ul>
</c:when>
<c:when test="${!empty sessionScope.principal }">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/board/form">글쓰기</a></li>
<li class="nav-item"><a class="nav-link" href="/user/form">회원정보</a></li>
<li class="nav-item"><a class="nav-link" href="/logout">로그아웃</a></li>
</ul>
</c:when>
</c:choose>
</div>
</nav>
<br>joinForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label> <input type="text" class="form-control" id="username" placeholder="아이디를 입력해주세요." name="username" required>
<div class="valid-feedback"></div>
<div class="invalid-feedback">멋진 아이디를 입력해주세요.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label> <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력해주세요." name="password" required>
<div class="valid-feedback"></div>
<div class="invalid-feedback">비밀번호를 입력해주세요.</div>
</div>
<div class="form-group">
<label for="uname">Email:</label> <input type="text" class="form-control" id="email" placeholder="이메일 주소를 입력해주세요." name="email" required>
<div class="valid-feedback"></div>
<div class="invalid-feedback">이메일을 입력해 주세요</div>
</div>
</form>
<button id="btn-save" class="btn btn-primary">회원가입 완료</button>
</div>
<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>loginForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../layout/header.jsp"%>
<div class="container">
<form>
<div class="form-group">
<label for="uname">Username:</label> <input type="text" class="form-control" id="username" placeholder="아이디를 입력해주세요." name="username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label> <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력해주세요." name="password" required>
</div>
<div class="form-group form-check">
<label class="form-check-label"> <input class="form-check-input" type="checkbox" name="remember" required> 로그인 상태 유지
</label>
</div>
</form>
<button id="btn-login" class="btn btn-primary">로그인</button>
</div>
<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>user.js
let index = {
init: function() {
$("#btn-save").on("click", ()=>{
this.save();
});
$("#btn-login").on("click", ()=>{
this.login();
});
},
save: function() {
let data = {
username: $("#username").val(),
password: $("#password").val(),
email: $("#email").val()
}; //javascript 오브젝트임.
//ajax 호출시 default가 비동기 호출
//ajax 통신을 이용하여 위의 data를 json으로 변경하여 insert 요청할 것임.
//ajax가 통신에 성공해서 서버가 json형태로 응답을 해주면 자동으로 자바 오브젝트로 변환해줌. (dataType을 지정하지 않아도.)
$.ajax({
//회원가입 수행 요청
type: "POST",
url: "/api/user",
data: JSON.stringify(data), //js object를 JSON형태로 변경. http body 데이터.
contentType: "application/json; charset=utf-8" //body 데이터의 타입 지정 (MIME)
//dataType: "json" //서버에서 응답이 올 때 문자열로 오는데 문자열 형태가 'json'이라면 => js object로 파싱 해줌.
}).done(function(resp){
alert("회원가입이 완료되었습니다.");
location.href="/";
}).fail(function(error){
alert(JSON.stringify(error));
}); //ajax 통신을 이용하여 3개의 데이터를 JSON으로 변경하여 insert 요청.
},
login: function() {
let data = {
username: $("#username").val(),
password: $("#password").val(),
}; //javascript 오브젝트임.
$.ajax({
//회원가입 수행 요청
type: "POST",
url: "/api/user/login",
data: JSON.stringify(data), //js object를 JSON형태로 변경. http body 데이터.
contentType: "application/json; charset=utf-8", //body 데이터의 타입 지정 (MIME)
dataType: "json" //서버에서 응답이 올 때 문자열로 오는데 문자열 형태가 'json'이라면 => js object로 파싱 해줌.
}).done(function(resp){
alert("로그인이 완료되었습니다.");
location.href="/";
}).fail(function(error){
alert(JSON.stringify(error));
}); //ajax 통신을 이용하여 3개의 데이터를 JSON으로 변경하여 insert 요청.
}
}
index.init();UserController.java
package com.pure.blog.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class UserController {
@GetMapping("/joinForm")
public String joinForm() {
return "user/joinForm";
}
@GetMapping("/loginForm")
public String loginForm() {
return "user/loginForm";
}
}
'취업 준비 > Spring boot' 카테고리의 다른 글
| 26. 스프링 시큐리티 로그인 페이지 커스터마이징 (0) | 2022.01.26 |
|---|---|
| 25. 스프링 시큐리티 사용해보기 (0) | 2022.01.26 |
| 23. 전통적인 방식의 로그인 방법 (0) | 2022.01.26 |
| 22. DB 격리 수준 (0) | 2022.01.26 |
| 21. 로그인, 회원가입 만들기 (0) | 2022.01.25 |
