[국비 63일차 TIL] spring 조회수, 좋아요 버튼, myinfo, 이메일 인증

20240222 

조회수 올리기
좋아요 버튼
myinfo
이메일 인증번호 보내기

---

BoardService.java

‌public BoardDTO detail(int no) { 
‌‌// 2024-02-22 psd 요구사항 확인
‌‌// 조회수 올리기 (로그인 했으면 조회수 증가)
‌‌if(util.getSession().getAttribute("mid") != null) {
‌‌‌// DTO 만들기 : 아이디, 비번
‌‌‌BoardDTO dto = new BoardDTO();
‌‌‌dto.setBoard_no(no);
‌‌‌dto.setMid((String) util.getSession().getAttribute("mid")); // if문으로 다시 물어보기
​​​​​​​​​​​​​​​​​​​
‌‌}
‌‌// 컨트롤러에는 int reNo, 서비스에는 int no (데이터 타입을 확인해야함)
‌‌return boardDAO.detail(no); 
‌}

 

countUP 메소드 생성

-> countUP()을 BoardDAO에 create (그냥 만드는건가...?)

BoardDAO.java

countUP은 return이 없음

‌public void countUP(BoardDTO dto) {
‌‌sqlSession.insert("board.countUP", dto);
‌}

 

-> countUP()을 board-mapper.xml에 insert문으로

board-mapper.xml

‌<insert id="countUP" parameterType="boardDTO">
‌‌INSERT INTO visitcount (board_no, mno) 
‌‌VALUSE (${board_no}, (SELECT mno FROM member WHERE mid=#{mid}))
‌</insert>

 

->  BoardService if문에 boardDAO.countUP(dto); 추가 

BoardService.java

‌public BoardDTO detail(int no) { 
‌‌// 2024-02-22 psd 요구사항 확인
‌‌// 조회수 올리기 (로그인 했으면 조회수 증가)
‌‌if(util.getSession().getAttribute("mid") != null) {
‌‌‌// DTO 만들기 : 아이디, 비번
‌‌‌BoardDTO dto = new BoardDTO();
‌‌‌dto.setBoard_no(no);
‌‌‌dto.setMid((String) util.getSession().getAttribute("mid")); // if문으로 읽었는지 다시 물어보기
‌‌‌boardDAO.countUP(dto); // 다이나믹 코드..? 
‌‌}
‌‌return boardDAO.detail(no); 
‌}

 

board-mapper.xml

‌<!-- 2024-02-22 -->
​​​<insert id="countUP" parameterType="boardDTO">
​​​​​​<selectKey keyProperty="board_count" resultType="Integer" order="BEFORE">
​​​​​​​​​SELECT count(*)
​​​​​​​​​FROM visitcount
​​​​​​​​​WHERE board_no=#{board_no} AND mno=(SELECT mno FROM member WHERE mid=#{mid})
​​​​​​</selectKey>
​​​​​​<if test="board_count == 0">      
​​​​​​​​​INSERT INTO visitcount (board_no, mno) 
​​​​​​​​​VALUES (#{board_no}, (SELECT mno FROM member WHERE mid=#{mid}))
​​​​​​</if>
​​​​​​<if test="board_count != 0">      
​​​​​​​​​SELECT count(*) FROM dual
​​​​​​</if>
​​​</insert>
</mapper>

 

BoardDTO.java

board_write, mid 추가

import lombok.Data;

@Data
public class BoardDTO {
‌private int board_no, board_count, comment;
‌private String board_title, mname, board_write, board_date, board_content, board_ip, mid;
}

---

좋아요 버튼 만들기

---

detail.jsp

ip, date, like 앞에 아이콘 이미지 넣어주기.

<div class="text-end">
‌<div>
‌​​​​<img alt="ip" src="./assets/img/ip-address.png"> ${c.cip }　|　
​​​​​​​​<img alt="date" src="./assets/img/clocky.png"> ${c.cdate }　|　
‌<img alt="like" src="./assets/img/likey.png" onclick="like(${c.no })"> ${c.clike }
​​​​</div>
</div>

 

like() function

클릭하면 alert 팝업 뜨도록 Swal.fire();

function like(cno){
‌Swal.fire("좋아요", "하트하트", "success");
‌setTimeout(function(){
‌‌location.href="./likeUp?no=${detail.board_no}&cno="+cno;
‌}, 2000);
}

 

Util.java

‌// 2024-02-22  숫자인지 검사하는 메소드
‌public boolean intCheck(String str) {
‌​​​​​​try {
‌​​​​​​​​​​Integer.parseInt(str);
‌​​​​​​​​​​return true;
‌​​​​​​​} catch (Exception e) {
‌​​​​​​​​​​return false;
‌​​​​​​​}
‌​​​​}

‌public int str2Int2(String str) {
‌‌return Integer.parseInt(str.replaceAll("[^0-9]", ""));
‌​​}

BoardController.java

‌‌// 2024-02-22 요구사항 확인 psd
‌‌// return값이 오면 다시 내 글로 돌아가기
​​​​​​​​
‌‌@GetMapping("/likeUp")
‌‌public String likeUp(@RequestParam("no") String no, @RequestParam("cno") String cno) { // CommentDTO에 있음: 글 no, 댓글 cno
‌‌‌System.out.println(no);
‌‌‌System.out.println(cno);
‌‌‌if(util.intCheck(no) && util.intCheck(cno)) {
‌‌‌‌CommentDTO dto = new CommentDTO();
‌‌‌‌dto.setBoard_no(util.str2Int(no));
‌‌‌‌dto.setNo(util.str2Int(cno));
‌‌‌‌
‌‌‌‌boardService.likeUp(dto);
‌‌‌‌‌‌‌
‌‌‌‌return "redirect:/detail?no="+dto.getBoard_no();
‌‌‌} else {
‌‌‌‌return "redirect:/error";
‌‌‌}
‌‌}

 

likeUp() 메소드 생성

-> likeUp() 만들기  : BoardService, BoardDAO

 

BoardService.java

‌public int likeUp(CommentDTO dto) {
‌‌return boardDAO.liekUp(dto);
‌}

BoardDAO.java

‌public int liekUp(CommentDTO dto) {
‌‌return sqlSession.update("board.likeUp", dto);
‌}

board-mapper.xml

​​​<update id="likeUp" parameterType="commentDTO">
‌‌UPDATE comment SET clike = clike + 1 WHERE cno=#{no}
​​​</update>

 

---

마이페이지, 이메일, 인증번호

---

menu.jsp

@${sessionScope.mid} : /myInfo@로그인아이디

 

 

@PathVariable 이란?

REST API에서 URI에 변수가 들어가는걸 실무에서 많이 볼 수 있다.

예를 들면, 아래 URI에서 밑줄 친 부분이 @PathVariable로 처리해줄 수 있는 부분이다.

localhost:8080/api/user/1234

bugs.co.kr/album/4062464

 

<li class="nav-item"><a class="nav-link" href="./myInfo@${sessionScope.mid }">${sessionScope.mname } 님</a></li>

 

pom.xml

이메일 보낼 수 있는 코드 추가해서 다운받기

<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-email -->
<dependency>
​​​​<groupId>org.apache.commons</groupId>
​​​​<artifactId>commons-email</artifactId>
​​​​<version>1.5</version>
</dependency>

 

LoginController.java

‌// http://172.30.1.150/myInfo@test6
‌@GetMapping("/myInfo@{id}") // @뒤 id를 경로 변수로 씀
‌public String myInfo(@PathVariable("id") String id) {
‌‌// System.out.println("id : "+id); 
‌‌return "myinfo";
‌}

 

-> myinfo.jsp 생성

myinfo.jsp

인증번호 이메일로 발송하기와 버튼 form 만들기

‌<!-- LOGIN -->
‌<section class="page-section" id="my-info">
‌‌<div class="d-flex justify-content-center">
‌‌‌<div class="text-center">
‌‌‌‌<div>
‌‌‌‌‌등록한 email로 인증번호가 발송되었습니다.
‌‌‌‌‌email을 확인 후 인증번호를 입력하세요.
‌‌‌‌‌<form action="">
‌‌‌‌‌‌<input type="number" name="number">
‌‌‌‌‌‌<button>인증하기</button>
‌‌‌‌‌</form>
‌‌‌‌</div>			
‌‌‌</div>
‌‌</div>
‌</section>

 

LoginController.java

simpleEmail.setFrom(emailAddr, name); 이 부분에서 throws EmailException 설정해야함.

‌// http://172.30.1.150/myInfo@test6
‌@GetMapping("/myInfo@{id}") // @뒤 id를 경로 변수로 씀
‌public String myInfo(@PathVariable("id") String id) throws EmailException {
//		System.out.println("id : "+id); 
‌‌
‌‌// 메일 보내기..
‌‌String emailAddr = "아이디@outlook.kr"; // 이메일 주소
‌‌String name = "보내는 사람 이름"; 
‌‌String passwd = "비번";
‌‌String hostName = "smtp-mail.outlook.com";
‌‌int port = 587;
‌‌
‌‌SimpleEmail simpleEmail = new SimpleEmail();  // 전송할 메일
‌‌simpleEmail.setCharset("UTF-8");
‌‌simpleEmail.setDebug(true);
‌‌simpleEmail.setHostName(hostName); // 보내는 서버 설정 = 고정
‌‌simpleEmail.setAuthentication(emailAddr, passwd); // 보내는 사람 인증 = 고정
‌‌simpleEmail.setSmtpPort(port); // 사용할 port번호
‌‌simpleEmail.setStartTLSEnabled(true); // 인증방법 = 고정
‌‌simpleEmail.setFrom(emailAddr, name); // 보내는 사람 email, 이름
‌‌simpleEmail.addTo("받는사람@메일.com"); // 받는사람
‌‌simpleEmail.setSubject("15번 페이지 인증번호입니다."); // 제목
‌‌simpleEmail.setMsg("인증번호는 [2077] 입니다."); // 내용 text
‌‌simpleEmail.send();
‌‌
‌‌return "myinfo";
‌}
}

Util.java

메일 보내는 서식 Util.java로 옮기기

‌// 메일보내기 
‌public void sendEmail(String email, String key) throws EmailException {
‌‌
‌‌String emailAddr = "------@outlook.kr"; // 이메일 주소
‌‌String name = "보내는 사람 이름"; 
‌‌String passwd = "";
‌‌String hostName = "smtp-mail.outlook.com";
‌‌int port = 587;
‌‌
‌‌SimpleEmail simpleEmail = new SimpleEmail();  // 전송할 메인
‌‌simpleEmail.setCharset("UTF-8");
‌‌simpleEmail.setDebug(true);
‌‌simpleEmail.setHostName(hostName); // 보내는 서버 설정 = 고정
‌‌simpleEmail.setAuthentication(emailAddr, passwd); // 보내는 사람 인증 = 고정
‌‌simpleEmail.setSmtpPort(port); // 사용할 port번호
‌‌simpleEmail.setStartTLSEnabled(true); // 인증방법 = 고정
‌‌simpleEmail.setFrom(emailAddr, name); // 보내는 사람 email, 이름
‌‌simpleEmail.addTo(email); // 받는사람
‌‌simpleEmail.setSubject("15번 사이트 인증번호입니다!"); // 제목
‌‌simpleEmail.setMsg("인증번호는 [" + key + "] 입니다."); // 내용 text
‌‌simpleEmail.send();
‌}

 

 

-> LoginController에 적었던 메일 보내기 서식을 util에 저장한 후 불러서 사용

 

util.sendEmail("가입한 사람의 email", "인증번호");

‌@GetMapping("/myInfo@{id}") // @뒤 id를 경로 변수로 씀
‌public String myInfo(@PathVariable("id") String id) throws EmailException {
‌‌
‌‌util.sendEmail("가입한 사람의 email", "인증번호");
‌‌return "myinfo";
‌}
}

 

-> Util (내꺼) import 하기

‌@Autowired
‌private Util util;

 

LoginController.java

메일 보내기 코드를 util로 옮긴 후의 코드임.

util.sendEmail(email, key); 이거만 불러오면 되므로 간단해짐..

‌@Autowired
‌private Util util;


‌// http://172.30.1.150/myInfo@test6
‌@GetMapping("/myInfo@{id}") // @뒤 id를 경로 변수로 씀
‌public String myInfo(@PathVariable("id") String id) throws EmailException {

‌‌String email = loginService.getEmail((String) util.getSession().getAttribute("mid"));
‌‌
‌‌util.sendEmail("이메일주소", "인증번호");
‌‌return "myinfo";
‌}

 

getEmail 메소드 생성

-> getEmail을 LoginService, LoginDAO에 만들어주기

 

LoginService.java

- 서비스에 만들어 둔 getEmail은 나중에 Rest로 옮김.

‌public String getEmail(String email) {
‌‌return loginDAO.getEmail(email);
‌}

LoginDAO.java

public String getEmail(String id){
‌return sqlSession.selectOne("login.getEmail", id);
}

login-mapper.xml

<select id="getEmail" parameterType="String" resultType="String">
‌SELECT memail FROM member WHERE mid=#{id}
</select>

 

LoginController.java

‌@GetMapping("/myInfo@{id}") // @뒤 id를 경로 변수로 씀
‌public String myInfo(@PathVariable("id") String id) throws EmailException {
‌‌
‌‌String email = loginService.getEmail((String) util.getSession().getAttribute("mid"));
‌‌String key = util.createKey();
‌‌util.sendEmail(email, "인증번호");
‌‌return "myinfo";
‌}
}

createKey 생성

-> createKey을 Util에 생성 : 인증번호를 랜덤으로 보내기 위해.

‌public String createKey() {
‌‌Random r = new Random();
‌‌r.setSeed(System.currentTimeMillis());
‌‌String key = r.nextInt(10) + "" + r.nextInt(10) + r.nextInt(10) + r.nextInt(10);
‌‌return key;
‌}

 

-> createKey 생성 후에 컨트롤러에서 변수명 변경하기

LoginController.java

util.sendEmail 변수 변경 : util.sendEmail(email, key);

 

-> DB에 key 생성 (mkey)

`mkey` VARCHAR(10) NULL DEFAULT NULL COLLATE

 

LoginController.java

‌@GetMapping("/myInfo@{id}") // @뒤 id를 경로 변수로 씀
‌public String myInfo(@PathVariable("id") String id) throws EmailException {
//		System.out.println("id : "+id); 
‌‌
‌‌// 로그인 여부 확인하기
‌‌if(util.getSession().getAttribute("mid") != null) {
‌‌‌
‌‌‌// 인증 요청하기 = Ajax용으로 빼두기
‌‌‌// loginService.myInfo();
‌‌‌
‌‌‌return "myinfo";
‌‌} else {
‌‌‌return "redirect:/login?error=error";
‌‌}
‌}
}

 

myinfo.jsp

‌<!-- LOGIN -->
‌<section class="page-section" id="my-info">
‌‌<div class="d-flex justify-content-center">
‌‌‌<div class="text-center">
‌‌‌
‌‌‌‌<button onclick="emailAuth()">인증번호 요청하기 😱</button>
‌‌‌‌
‌‌‌‌<div>
‌‌‌‌‌등록한 email로 인증번호가 발송되었습니다.<p>
‌‌‌‌‌email을 확인 후 인증번호를 입력하세요.
‌‌‌‌‌<form action="">
‌‌‌‌‌‌<input type="number" name="number">
‌‌‌‌‌‌<button>인증하기</button>
‌‌‌‌‌</form>
‌‌‌‌</div>			
‌‌‌</div>
‌‌</div>
‌</section>

 

 

emailAuth() 메소드 생성

-> 버튼 emailAuth() function 만들어주기 (Ajax사용을 위해 jQuery 스크립트 추가하기)

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
‌crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

<script type="text/javascript">
function emailAuth(){
‌$.ajax({
‌‌url : './emailAuth',
‌‌type : 'post',
‌‌dataType : 'text',
‌‌success : function(result){
‌‌‌if(result == 1){
‌‌‌‌Swal.fire("전송했습니다.", "결과 : " + result, "success");
‌‌‌} else {
‌‌‌‌Swal.fire("긴급상황", "문제가 발생했습니다.", "Info");
‌‌‌}
‌‌},
‌‌error : function(request, status, error){
‌‌‌‌Swal.fire("훠우~", "문제가 발생했네요~" + error, "Error");
‌‌}
‌});
}

</script>

---

-> Ajax 용도 코드(비동기 통신 코드)는 RestFullController.java에 입력해주기.

 

* 여기에서부터 갑자기 Rest로 넘어감. 기존에 썼던 코드도 Rest로 옮긴 것들이 많다. 

---

RestFullController.java

‌@PostMapping("/emailAuth")
‌public @ResponseBody int emailAuth() {
‌‌return 1;
‌}

 

@Controller 를 @RestController 로 변경하기 => @ResponseBody를 빼고 동작 하게 함.

 

RestService.java

RestFullController에 RestService 생성하기 -> class파일까지 생성

@Autowired
private RestService restService;

 

RestFullController.java

전체코드

@RestController
public class RestFullController {
‌
‌@Autowired
‌private BoardService boardService;
‌
‌@Autowired
‌private RestService restService; // 없어서 생성함

‌@Autowired
‌private Util util;
‌
‌@PostMapping("/restDetail")
‌public BoardDTO restDetail(@Param("no") int no) { // 결과는 body에 출력해 (view를 안 보여주게)
‌‌BoardDTO detail = boardService.detail(no); // detail에 담겨서 옵니다.
‌‌return detail;
‌}
‌
‌@PostMapping("/emailAuth")
‌public int emailAuth() {
‌‌return restService.sendEmail(); // ajax로 버튼 눌렀을 때 여기 옴. -> 서비스에서 기능 만들어주기
‌}

}

 

RestService.java

LoginService에서 getEmail 메소드 가져옴.

@Service
public class RestService {

‌@Autowired
‌private Util util;
‌
‌public int sendEmail() {
‌‌if(util.getSession().getAttribute("mid") != null) {
‌‌‌return 1;
‌‌} else {
‌‌‌return 0;
‌‌}
‌}
‌// 로그인서비스에서 가져옴
‌public String getEmail(String email) {
‌‌return restDAO.getEmail(email); // 사용자 이메일 알아오는 작업?
‌}

}

 

-> getEmail을 RestDAO에 생성

RestDAO.java

LoginDAO에서 getEmail 메소드 옮겨옴.

‌public String getEmail(String id) {
‌‌return sqlSession.selectOne("login.getEmail", id);
‌}

 

-> RestDAO 생성 후, 서비스에 @autowired로 RestDAO 받기

RestService.java

@Service
public class RestService {

‌@Autowired
‌private Util util;
‌
‌@Autowired
‌private RestDAO restDAO;

MemberDTO.java

새로 생성해주기

@Data
public class MemberDTO {
‌private int mno, mgrade, mcount;
‌private String mid, mpw, mname, mdate, memail, mkey;
}

RestService.java

‌public int sendEmail() {
‌‌if(util.getSession().getAttribute("mid") != null) {
‌‌‌// 메일 발송 + key 데이터베이스 저장
‌‌‌String email = getEmail((String) util.getSession().getAttribute("mid"));
‌‌‌String key = util.createKey();
‌‌‌
‌‌‌MemberDTO dto = new MemberDTO();
‌‌‌dto.setMemail(email);
‌‌‌dto.setMkey(key);
‌‌‌dto.setMid((String) util.getSession().getAttribute("mid"));
‌‌‌restDAO.setkey(dto); // db에 키 저장
‌‌‌
‌‌‌return 1;
‌‌} else {
‌‌‌return 0;
‌‌}
‌}

 

-> setkey를 RestDAO에 생성

‌public int setKey(MemberDTO dto) {
‌‌return sqlSession.update("rest.setKey", dto);
‌}

mybatis-config.xml

<typeAlias type="org.-----.dto.MemberDTO" alias="memberDTO"/>

 

rest-mapper.xml

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
​​"https://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="rest">

‌<!-- 2024-02-22 -->
‌<select id="getEmail" parameterType="String" resultType="String">
‌‌SELECT memail FROM member WHERE mid=#{id} 
‌</select>
‌
‌<update id="setKey" parameterType="memberDTO">
‌‌UPDATE member SET mkey=#{mkey} AND mid=#{mid} AND memail=#{memail}
‌</update>
​​​​
</mapper>