포토그램 인증 구현하기
로그인구현
web 폴더 안에 ImageController.java 생성
@Controller
public class ImageController {
@GetMapping({"/","/image/story"})
public String story() {
return "image/story";
}
}
Java
복사
ssar로 로그인하면은
짠 로그인 성공 후 화면으로 이동하게 된다.
빨간색으로 표시한 아이콘 눌러도 메인으로 가기때문에 해당 화면으로 잘 이동된다
근데 파랑색으로 표시한 부분누르면 에러화면으로 이동되는데 /image/popular 에 대해 안만들어줘서 그렇다
@GetMapping({"/","/image/popular"})
public String popular() {
return "image/popular";
}
Java
복사
추가
해당 인기 아이콘 누르면 잘 이동된다.
이제 맨 오른쪽에 있는 user/profile 에 대해서 만들어주는데 user에 대한 컨트롤러 부터 만들어줘서 추가해주면 된다.
web 폴더 안에 UserController.java 생성
@Controller
public class UserController {
@GetMapping("/user/profile")
public String profile() {
return "user/profile";
}
}
Java
복사
프로필 아이콘 클릭시 잘 이동된다
근데 유저 페이지는 내 페이지로 올 수도 있고 다른사람의 페이지로 갈 수도 있으니까
/user/1 1번 유저 페이지
/user/2 2번 유저 페이지
/user/3 3번 유저 페이지
이런식으로 이동 할 수 있게
@GetMapping("/user/{id}")
public String profile(@PathVariable int id) {
return "user/profile";
}
Java
복사
이렇게 변경해주자.
http://localhost:8080/user/3 이렇게 쳐도 프로필 화면으로 잘 이동된다
ImageController.java에 upload 부분도 추가해주자.
@GetMapping("/image/upload")
public String upload() {
return "image/upload";
}
Java
복사
근데 이 화면에서 프로필 화면 클릭하면 오류나는 경우도 있는데 그럴때
header.jsp에서
<header class="header">
<div class="container">
<a href="/image/story" class="logo">
<img src="/images/logo.jpg" alt="">
</a>
<nav class="navi">
<ul class="navi-list">
<li class="navi-item"><a href="/image/story">
<i class="fas fa-home"></i>
</a></li>
<li class="navi-item"><a href="/image/popular">
<i class="far fa-compass"></i>
</a></li>
<li class="navi-item"><a href="/user/profile">
<i class="far fa-user"></i>
</a></li>
</ul>
</nav>
</div>
</header>
Java
복사
여기서 home 부분은 그냥 / 로 가게 수정해준다
<header class="header">
<div class="container">
<a href="/" class="logo">
<img src="/images/logo.jpg" alt="">
</a>
<nav class="navi">
<ul class="navi-list">
<li class="navi-item"><a href="/">
<i class="fas fa-home"></i>
</a></li>
<li class="navi-item"><a href="/image/popular">
<i class="far fa-compass"></i>
</a></li>
<li class="navi-item"><a href="/user/profile">
<i class="far fa-user"></i>
</a></li>
</ul>
</nav>
</div>
</header>
Java
복사
수정해주고 사진등록 화면에서 프로필 누르면 잘 이동된다. 그래도 안된다면 /user/1로 해서 진행
UserController.java 에 /user/update 부분을 추가해주자.
@GetMapping("/user/{id}/update")
public String update(@PathVariable int id) {
return "user/update";
}
Java
복사
profile.jsp에서
<button onclick="location.href='/user/update'">회원정보 변경</button>
Java
복사
요부분을
<button onclick="location.href='/user/1/update'">회원정보 변경</button>
Java
복사
요렇게 1번 유저의 프로필 변경으로 우선 수정해주고 테스트해보자
이동