DeseoDeSeo
[Spring Boot ] 로그인 구현 본문
src/main/resources > static > 폴더 생성"css" > css파일 생성 "style.css"
login.jsp
상단에 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="cpath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></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.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="${cpath}/resources/css/style.css">
</head><body>
<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<h4>Please sign in</h4>
</div>
<!-- Login Form -->
<form action="${cpath}/member/login" method="post">
<input type="text" id="username" class="fadeIn second" name="username" placeholder="login">
<input type="text" id="password" class="fadeIn third" name="password" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" href="#">Forgot Password?</a>
</div>
</div>
</div>
</body>https://bootsnipp.com/snippets/dldxB
style.css
@charset "UTF-8";
/* BASIC */
html {
background-color: #56baed;
}
body {
font-family: "Poppins", sans-serif;
height: 100vh;
}
a {
color: #92badd;
display:inline-block;
text-decoration: none;
font-weight: 400;
}
h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
color: #cccccc;
}
/* STRUCTURE */
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
width: 90%;
max-width: 450px;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
/* TABS */
h2.inactive {
color: #cccccc;
}
h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}
/* FORM TYPOGRAPHY*/
input[type=button], input[type=submit], input[type=reset] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background-color: #39ace7;
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
input[type=text] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
input[type=text]:placeholder {
color: #cccccc;
}
/* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fadeIn.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.fadeIn.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fadeIn.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.fadeIn.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
display: block;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background-color: #56baed;
content: "";
transition: width 0.2s;
}
.underlineHover:hover {
color: #0d0d0d;
}
.underlineHover:hover:after{
width: 100%;
}
/* OTHERS */
*:focus {
outline: none;
}
#icon {
width:60%;
}application.properties.java
# Spring Boot에서 resources에 접근하기 위한 설정
#resource아래 모든 폴더에 접근할 수 있도록 하겠다.
spring.mvc.static-path-pattern=/resources/**
SpringMVC11ApplicationTests.java
test로 여러 계정 회원가입 시킴.
실행할 때, Run as > J Unit Test
package kr.spring;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.security.crypto.password.PasswordEncoder;
import kr.spring.entity.Member;
import kr.spring.entity.Role;
import kr.spring.repository.MemberRepository;
@SpringBootTest
class SpringMvc11ApplicationTests {
@Autowired
private MemberRepository memberRepository;
@Autowired
private PasswordEncoder passwordEncoder;
@Test
void contextLoads() {
//회원가입 테스트
Member m= new Member();
m.setUsername("cielo");
m.setPassword(passwordEncoder.encode("1234"));
m.setName("alma");
m.setEbled(true); //계정 활성화 상태
m.setRole(Role.ADMIN);
memberRepository.save(m);
}
}boardController.java
- @RequestMapping("/board/*") 추가
- return "board/list"; 수정
@Controller
@RequestMapping("/board/*")
public class BoardController { @RequestMapping("/list")
public String list(Model model) { // 게시글 전체 조회
List<Board> list = boardService.getList();
model.addAttribute("list", list);
return "board/list";이렇게 /board/를 추가한다.
return "redirect:/board/list";
return"redirect:/board/list";
CustomUser.java
@Datalist.jsp
<!-- Spring Security관련 태그 라이브러리-->
<!-- 로그인한 사람들의 정보 가져오기 -->
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %><div class="card-body"> <!-- 내용을 넣을 떄는 card-body를 사용함 -->
<h4 class="card-title">
<sec:authentication property="principal.member.name"/>
</h4>
<p class="card-text">회원님! welcome </p>
<form action="${cpath}/member/logout">
<button type="submit" class="form-control btn btn-sm btn-primary">로그아웃</button>
</form>
</div>
<br>
현재 권한 : <sec:authentication property="principal.member.role"/>
<!-- 권한에 따른 화면구성 다르ㅔ 보여주기. -->
<sec:authorize access="hasRole('ADMIN')">
<button class="btn btn-info form-control">관리자 페이지</button>
<br>
<br>
<button class="btn btn-success form-control">회원목록</button>
<br>
<br>
<button class="btn btn-warning form-control">개인 정보 수정</button>
</sec:authorize><sec:authorize access="hasRole('MANAGER')">
<button class="btn btn-success form-control">회원목록</button>
<br>
<br>
<button class="btn btn-warning form-control">개인 정보 수정</button>
</sec:authorize>
<sec:authorize access="hasRole('MEMBER')">
<button class="btn btn-warning form-control">개인 정보 수정</button>
</sec:authorize>
<div class="form-group">
<label for="writer">작성자</label>
<input type="text" readonly="readonly" value="<sec:authentication property='principal.member.name'/>" class="form-control" id="writer" name="writer" placeholder="Enter writer">
</div>상단에 추가
<!-- 로그인한 계정정보 -->
<c:set var="user" value="${SPRING_SECURITY_CONTEXT.authentication.principal}" />
<!-- 권한정보 -->
<c:set var="auth" value="${SPRING_SECURITY_CONTEXT.authentication.authorities}" />이렇게 경로 부분들에 /board/를 추가한다.
<form id="regForm" action="${cpath}/board/register" method="post">
location.href="${cpath}/board/remove?idx="+idx;하단에 이걸 추가한다.
if("${user.member.name}" == vo.writer){
$("button[data-oper='updateForm']").attr("disabled",false);
$("button[data-oper='remove']").attr("disabled",false);
}else{
$("button[data-oper='updateForm']").attr("disabled",true);
$("button[data-oper='remove']").attr("disabled",true);
}function printBoard(vo){
var regForm = $("#regForm");
regForm.find("#title").val(vo.title);//title을 찾아서 value을 넣을 것이다
regForm.find("#content").val(vo.content);//title을 찾아서 value을 넣을 것이다
regForm.find("#writer").val(vo.writer);//title을 찾아서 value을 넣을 것이다
regForm.find("input").attr("readonly", true);
regForm.find("textarea").attr("readonly", true);
//상세보기를 누르면 목록,수정,삭제가 나옴.
$("#regDiv").css("display", "none");
$("#updateDiv").css("display", "block");
regForm.find("#idx").val(vo.idx);
if("${user.member.name}" == vo.writer){
$("button[data-oper='updateForm']").attr("disabled",false);
$("button[data-oper='remove']").attr("disabled",false);
}else{
$("button[data-oper='updateForm']").attr("disabled",true);
$("button[data-oper='remove']").attr("disabled",true);
}
}'spring > Spring Boot' 카테고리의 다른 글
| ミ★ Spring boot 02 (1) | 2023.10.20 |
|---|---|
| [Spring Boot] Spring Boot Security (0) | 2023.10.20 |
| ミ★ Spring Boot 01 (0) | 2023.10.16 |
'spring/Spring Boot' Related Articles
more
