DAY 66 - 스프링 프레임워크 MVC- 회원가입 / 회원목록 / 회원정보수정 (2024.10.10)

UserDAO              UserMybatisDAO.java           userMapper.xml

       ↓_______________________________________↑

                                    이렇게 점프하자 !!

UserMybatisDAO.java  이걸 빼버리자 !!

---

UserMybatisDAO.java 삭제 !!

 

UserDAO.java

나는 Mapper입니다 하고 @Mapper 등록하기

package user.dao;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import user.bean.UserDTO;

@Mapper
public interface UserDAO {

	public UserDTO getExistId(String id);
	
	public void write(UserDTO userDTO);

	public List<UserDTO> getUserList();
	
	public void update(UserDTO userDTO);

	public void delete(String id);

}

 

1. @Mapper

@Mapper 어노테이션은 MyBatis에서 사용되는 어노테이션으로,

인터페이스를 MyBatis 매퍼로 등록하기 위한 역할을 한다.

이 어노테이션을 통해, 인터페이스에 정의된 메서드들이 SQL 매퍼 파일(XML 파일)과 연결되고, 자동으로 구현된다.

 

@Mapper의 역할

1. 매퍼 인터페이스 등록:
   • @Mapper가 붙은 인터페이스는 MyBatis가 자동으로 인식하고, 해당 인터페이스의 메서드를 SQL 쿼리와 매핑한다.
   • MyBatis는 매퍼 인터페이스를 이용해 SQL 쿼리를 호출할 때, 실제 구현 클래스를 만들 필요 없이 SQL 매퍼 파일에 정의된 SQL 문을 호출하게 된다.
2. SQL 매퍼와 연결:
   • @Mapper 어노테이션이 붙은 인터페이스의 각 메서드는 SQL 매퍼 파일(.xml)의 쿼리와 연결된다. 예를 들어, UserDAO의 getExistId 메서드는 user-mapper.xml에서 정의된 getExistId SQL 쿼리와 매핑된다.
   • 즉, @Mapper는 인터페이스의 메서드와 SQL 매퍼 파일의 SQL 문을 자동으로 연결하는 역할을 한다.
3. Spring과의 통합:
   • Spring과 MyBatis를 통합할 때, @Mapper를 사용하면 MyBatis 매퍼를 Spring 빈으로 등록할 수 있다.
   • Spring은 @Mapper로 마킹된 인터페이스를 스캔하고, 해당 인터페이스를 빈으로 관리하여 의존성 주입이 가능하다.

 

• 장점: XML 매퍼 파일을 설정할 필요 없이, 인터페이스와 SQL 쿼리만 작성하면 된다.
• 단점: XML을 사용하는 경우, 복잡한 쿼리를 관리하기 어렵고 어노테이션에 직접 SQL을 작성해야 할 때 코드가 복잡해질 수 있다.

 

---

userMapper.xml 

인터페이스에서 바로 접근하도록

<mapper namespace="user.dao.UserDAO"> 이렇게 바꾼다.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "https://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!-- <mapper namespace="userSQL"> -->
<mapper namespace="user.dao.UserDAO">
	<!-- 중복 아이디 체크 -->
    <select id="getExistId" parameterType="String" resultType="user">
        SELECT * FROM usertable WHERE id = #{id};
    </select>

---

root-context.xml

<!-- @Mapper --> 어노테이션 방법으로 매퍼파일을 등록하거나
<mybatis-spring:scan base-package="user.dao"/> --- xml 파일에서 등록할 수 있다 ! 둘 중 하나만

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
	xsi:schemaLocation="http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	<context:component-scan base-package="user.service.impl" />	
	<!-- <context:component-scan base-package="user.dao.impl" /> -->
	
	<context:component-scan base-package="spring.conf" />
	
	<!-- @Mapper -->
	<mybatis-spring:scan base-package="user.dao"/>
</beans>

---

버전때문에 오류나는중 !!!!!

 

우리가 3.0.3으로 했기 때문에 오류가 뜬다.

스프링을 6버전을 요구하게된다.

---

 

pom.xml

		<!--  MyBatis -->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis</artifactId>
		    <version>3.5.16</version>
		</dependency>
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis-spring</artifactId>
		    <version>2.1.2</version> <!-- 3.0.3 버전을 쓰려면 Spring은 6.x 이어야하기 떄문 !! -->
		</dependency>

---

root-context.xml

<!-- <mybatis-spring:scan base-package="user.dao"/> -->

주석 걸고 우리는 spring.conf가 있기 때문에 spring.conf가서 해도된다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
	xsi:schemaLocation="http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
		http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
	<context:component-scan base-package="user.service.impl" />	
	<!-- <context:component-scan base-package="user.dao.impl" /> -->
	
	<context:component-scan base-package="spring.conf" />
	
	<!-- @Mapper -->
	<!-- <mybatis-spring:scan base-package="user.dao"/> -->
</beans>

2. <mybatis-spring:scan> XML 설정 방식

• XML 설정 파일을 통해 매퍼 파일의 위치를 직접 등록하고 스캔하는 방식이다. 주로 Spring과 MyBatis를 함께 사용할 때 XML 설정 파일을 통해 매퍼 파일을 등록하고 싶을 때 사용된다.
• 장점: XML 설정을 통해 설정을 중앙에서 관리할 수 있고, 명시적으로 파일 위치를 지정할 수 있다.
• 단점: 설정 파일이 복잡해질 수 있다.

---

SpringConfiguration.java

package spring.conf;

import org.apache.commons.dbcp2.BasicDataSource;
import org.apache.ibatis.session.SqlSessionFactory;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.SqlSessionTemplate;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.io.ClassPathResource;
import org.springframework.jdbc.datasource.DataSourceTransactionManager;
import org.springframework.transaction.annotation.EnableTransactionManagement;

@Configuration
@EnableTransactionManagement
@PropertySource("classpath:spring/db.properties")
@MapperScan("user.dao")
public class SpringConfiguration {

3. @MapperScan 어노테이션 방식

• @MapperScan 어노테이션을 이용해 MyBatis 매퍼 인터페이스들이 위치한 패키지를 지정하여 자동으로 스캔하고, 매퍼 파일을 설정하는 방식이다.
• XML 매퍼 파일도 사용 가능하며, 여러 매퍼를 한꺼번에 설정할 수 있다.
• 장점: 다수의 매퍼 인터페이스를 한 번에 스캔할 수 있으며, XML 파일을 사용하여 복잡한 쿼리도 관리할 수 있다.
• 단점: @MapperScan을 사용하기 위한 설정 파일이 필요하다.

---

Mapper 파일 등록하는 방법

• 첫 번째 방법: @Mapper 어노테이션을 사용하는 간단한 방법.
• 두 번째 방법: XML 설정을 통해 매퍼 파일을 스캔 및 등록. 
• 세 번째 방법: @MapperScan 어노테이션을 통해 패키지 스캔 방식으로 여러 매퍼 인터페이스를 한 번에 등록.

---

트랜잭션 관리

root-context.xml

<tx:annotation-driven transaction-manager="transactionManager"/>

 

<tx:annotation-driven transaction-manager="transactionManager"/>

이렇게 걸어도 좋고 아니면 !

---

SpringConfiguration.java

@Configuration
@EnableTransactionManagement -- 이렇게 걸어도된다. 둘 중 하나만 !!
@PropertySource("classpath:spring/db.properties")
@MapperScan("user.dao")
public class SpringConfiguration {

@Configuration
@EnableTransactionManagement
@PropertySource("classpath:spring/db.properties")
@MapperScan("user.dao")
public class SpringConfiguration {

 

 

-- 스프링이 @Transactional 어노테이션이 붙은 메서드나 클래스에서 트랜잭션을 자동으로 관리

---

회원가입

writeForm.jsp

버튼에 id 주기 !

<input type="button" id="writeBtn" value="회원가입" />

 

form에도 id 주기 !

<form id="userWriteForm" method="post">

<form id="userWriteForm" method="post">

        <tr>
            <td colspan="2" align="center">
                <input type="button" id="writeBtn" value="회원가입" />
                <input type="reset" value="다시입력" />
            </td>
        </tr>

---

write.js

    //등록
    $('#writeBtn').on('click', function(event){
    	event.preventDefault();
    	$('#nameDiv').empty();
    	$('#idDiv').empty();
    	$('#pwdDiv').empty();
    	let isValid = true;
    	
    	// 이름 검사
	    if($('#name').val().trim() == ''){
	        $('#nameDiv').html('이름을 입력하세요.').css('color', 'red');
	        $('#name').focus();
	        isValid = false;
	    }

    	// 이름 검사
	    if($('#id').val().trim() == ''){
	        $('#idDiv').html('비밀번호를 입력하세요.').css('color', 'red');
	        $('#id').focus();
	        isValid = false;
	    }
	       
        // 비밀번호 검사
	    if($('#pwd').val().trim() == ''){
	        $('#pwdDiv').html('비밀번호를 입력하세요.').css('color', 'red');
	        $('#pwd').focus();
	        isValid = false;
	    }
	    
	    if(isValid){
	        $.ajax({
	            type: 'post',
	            url: '/spring/user/write',
	            data: $('#userWriteForm').serialize(),
	            success: function(){	
					alert('회원가입이 완료되었습니다.');
					//location.href = '/spring/user/list';	                        
	            },
	            error: function(e){
	                console.log(e);
	            }
	        });
	    }
    });

---

UserController.java

@ResponseBody -- jsp없고 바로 ajax로 가야되므로

	@ResponseBody
	@RequestMapping(value="user/write", method = RequestMethod.POST)
	public void write(@ModelAttribute UserDTO userDTO) {
		userService.write(userDTO);
	}

---

UserService.java

package user.service;

import user.bean.UserDTO;

public interface UserService {
	public String getExistId(String id);

	public void write(UserDTO userDTO);
}

---

UserServiceImpl.java

	@Override
	public void write(UserDTO userDTO) {
		userDAO.write(userDTO);
	}

---

userMapper.xml

    <insert id="write" parameterType="user">
        INSERT INTO usertable (name, id, pwd)
        VALUES (#{name}, #{id}, #{pwd});
    </insert>

---

User 목록

index.jsp

<p><a href="/spring/user/list?pg=1">출력</a></p> <!-- pg=1 일 때는 생략 가능 -->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>*** 메인화면 ***</h2>
<h3>
	<p><a href="/spring/user/writeForm">입력</a></p>
	<p><a href="/spring/user/list?pg=1">출력</a></p> <!-- pg=1 일 때는 생략 가능 -->
</h3>
</body>
</html>

---

UserController.java

	@ResponseBody
	@RequestMapping(value="user/list", method = RequestMethod.POST)
	public List<UserDTO> list(@RequestParam(required = false, defaultValue = "1") String pg){
		
		return "/user/list"; //=> /WEB-INF/user/list.jsp
	}

 

ModelAndView

ModelMap

Model -- 이걸로 하겠다. return값 때문에

3개 중에 아무거나로 하기 !!

	@ResponseBody
	@RequestMapping(value="user/list", method = RequestMethod.POST)
	public String list(@RequestParam(required = false, defaultValue = "1") String pg, Model model){	
		List<UserDTO> list = userService.list(pg);
		return "/user/list"; //=> /WEB-INF/user/list.jsp
	}

---

UserService.java

public List<UserDTO> list(String pg);

package user.service;

import java.util.List;

import user.bean.UserDTO;

public interface UserService {
	public String getExistId(String id);

	public void write(UserDTO userDTO);

	public List<UserDTO> list(String pg);
}

 

---

UserServiceImpl.java

pg = 1            startNum         endNum

0 사과                       0                        5

1 복숭아              

2 수박

3 참외

4 메론

 

pg = 2

5 딸기                        5                        5

6 귤

7 오렌지

8 포도

9 청포도

 

10 파인애플               10                       5

	@Override
	public List<UserDTO> list(String pg) {
		//1페이지당 5개씩
		int startNum = (Integer.parseInt(pg)-1) * 5; //시작위치 (0부터 시작)
		int endNum = 5; //개수
		
		Map<String, Integer> map = new HashedMap<>();
		map.put("startNum", startNum);
		map.put("endNum", endNum);
		
		//DB
		List<UserDTO> list = userDAO.list(map);
		return list;
	}

---

UserDAO.java

public List<UserDTO> list(Map<String, Integer> map);

package user.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import user.bean.UserDTO;

@Mapper
public interface UserDAO {

	public UserDTO getExistId(String id);
	
	public void write(UserDTO userDTO);

	public List<UserDTO> getUserList();
	
	public void update(UserDTO userDTO);

	public void delete(String id);

	public List<UserDTO> list(Map<String, Integer> map);

}

---

userMapper.xml

    <select id="list" resultType="user">
        SELECT * FROM usertable limit #{startNum}, #{endNum};
    </select>

---

UserController.java

	@RequestMapping(value="user/list", method = RequestMethod.POST)
	public String list(@RequestParam(required = false, defaultValue = "1") String pg, Model model){	
		List<UserDTO> list = userService.list(pg);
		
		model.addAttribute("list", list);
		return "/user/list"; //=> /WEB-INF/user/list.jsp
	}

---

list.css

@charset "UTF-8";
body {
    background-color: #FFE2FA;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    flex-direction: column;
}

table {
    border-collapse: collapse;
    border-radius: 10px;
    background-color: white;
    width: 800px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

th, td {
    padding: 10px;
    border: 1px solid #CCC;
    text-align: center;
    font-size: 14px;
}

th {
    background-color: #F2F2F2;
    color: #333;
    font-size: 16px;
}

td {
    color: #333;
}

#currentPaging {
	color: red;
	font-size: 15px;
	padding: 5px 8px;
	margin: 3px;
}

#paging {
	color: black;
	font-size: 15px;
	padding: 5px 8px;
	margin: 3px;	
}

span:hover {
	text-decoration: underline;
	cursor: pointer;
}

img {
    margin-bottom: 15px;
    cursor: pointer;
    display: block;
}

.subjectA {
	text-decoration: underline;
}

.subjectA:link {
	color: black;
	text-decoration: none;
}

.subjectA:visited {
	color: black;
	text-decoration: none;
}

.subjectA:hover {
	color: green;
	text-decoration: underline;
}

.subjectA:active {
	color: black;
	text-decoration: none;
}

 

list.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>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/list.css">
</head>
<body>
   <div id="header">
		<h1>
			<img alt="하트" src="${ pageContext.request.contextPath }/image/free-icon-love-4096198.png" width="60" height="60" onclick="location.href='${ pageContext.request.contextPath }/index.do'">
		</h1>
   </div>
    <input type="hidden" id="memId" value="${memId }" />
    <input type="hidden" id="pg" value="${pg }" />
    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>아이디</th>
                <th>비밀번호</th>
            </tr>
        </thead>
        <tbody>
        	<c:if test="${list != null}">
        		<c:forEach var="userDTO" items="${list}">       		
        		 <tr> 
                     <td>${userDTO.getName()}</td>
                     <td>${userDTO.getId()}</td>
                     <td>${userDTO.getPwd()}</td>
                 </tr>
                 </c:forEach>
        	  </c:if> 	
        </tbody>
    </table>
	<div style="margin-top: 15px;">
	</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="../js/boardList.js"></script>

</body>
</html>

---

@RequestMapping(value="user") -- 이걸 하게되면 !!
public class UserController {

 

@RequestMapping(value="user/writeForm", method = RequestMethod.GET)

    ↓ 여기서 user/지워도된다.

@RequestMapping(value="writeForm", method = RequestMethod.GET)

---

페이징처리

user.bean

      UserDTO.java

      UserPaging.java

      @Component
      @Setter
      @Getter

package user.bean;

import org.springframework.stereotype.Component;

import lombok.Getter;
import lombok.Setter;

@Component
@Setter
@Getter
public class UserPaging {
	private int currentPage; //현재페이지
	private int pageBlock; //[이전][1][2][3][다음]
	private int pageSize; //1페이지당 5개씩
	private int totalA; //총글수
	private StringBuffer pagingHTML;
	
	public void makePagingHTML() {
		pagingHTML = new StringBuffer();
		
		int totalP = (totalA + pageSize-1) / pageSize;
		
		int startPage = (currentPage-1) / pageBlock * pageBlock + 1;
		int endPage = startPage + pageBlock - 1;
		if(endPage > totalP)
			endPage = totalP;
		
		if(startPage != 1)
			pagingHTML.append("<span id='paging' onclick='userPaging(" + (startPage-1) + ")'>이전</span>");
		
		for(int i=startPage; i<=endPage; i++) {
			if(i == currentPage)
				pagingHTML.append("<span id='currentPaging' onclick='boardPaging(" + i + ")'>" + i + "</span>");
			else
				pagingHTML.append("<span id='paging' onclick='userPaging(" + i + ")'>" + i + "</span>");
		}//for
		
		if(endPage < totalP)
			pagingHTML.append("<span id='paging' onclick='userPaging(" + (endPage+1) + ")'>다음</span>");
	}
}

---

root-context.xml

	<context:component-scan base-package="user.bean" />

---

UserServiceImpl.java

@Autowired
private UserPaging userPaging;

@Service
public class UserServiceImpl implements UserService {
	@Autowired
	private UserDAO userDAO;
	@Autowired
	private UserPaging userPaging;

	@Override
	public List<UserDTO> list(String pg) {
		//1페이지당 5개씩
		int startNum = (Integer.parseInt(pg)-1) * 5; //시작위치 (0부터 시작)
		int endNum = 5; //개수
		
		Map<String, Integer> map = new HashedMap<>();
		map.put("startNum", startNum);
		map.put("endNum", endNum);
		
		//DB
		List<UserDTO> list = userDAO.list(map);
		
		//페이징 처리
		int totalA = userDAO.getTotalA(); //총글수
		userPaging.setCurrentPage(Integer.parseInt(pg)); //현재페이지
		userPaging.setPageBlock(3);
		userPaging.setPageSize(5);
		userPaging.makePagingHTML();
		return list;
	}

---

UserDAO.java

public int getTotalA();

package user.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import user.bean.UserDTO;

@Mapper
public interface UserDAO {

	public UserDTO getExistId(String id);
	
	public void write(UserDTO userDTO);

	public List<UserDTO> getUserList();
	
	public void update(UserDTO userDTO);

	public void delete(String id);

	public List<UserDTO> list(Map<String, Integer> map);

	public int getTotalA();

}

---

userMapper.xml

    <select id="getTotalA" resultType="int">
    	select *(count) from usertable
    </select>

---

UserServiceImpl.java

근데 여기서 이제 list와 userPaging 두 개를 넘길 수 없으니 map을 만들어서 넘겨야한다 !!

 

map이 이미 있으니 이름 다르게 map2로 !

 

Map<String, Object> map2 = new HashedMap<>();
map2.put("list", list);
map2.put("userPaging", userPaging);

return map2;

	@Override
	public Map<String, Object> list(String pg) {
		//1페이지당 5개씩
		int startNum = (Integer.parseInt(pg)-1) * 5; //시작위치 (0부터 시작)
		int endNum = 5; //개수
		
		Map<String, Integer> map = new HashedMap<>();
		map.put("startNum", startNum);
		map.put("endNum", endNum);
		
		//DB
		List<UserDTO> list = userDAO.list(map);
		
		//페이징 처리
		int totalA = userDAO.getTotalA(); //총글수
		
		userPaging.setCurrentPage(Integer.parseInt(pg)); //현재페이지
		userPaging.setPageBlock(3);
		userPaging.setPageSize(5);
		userPaging.makePagingHTML();
		
		Map<String, Object> map2 = new HashedMap<>();
		map2.put("list", list);
		map2.put("userPaging", userPaging);
		
		return map2;
	}

---

UserDTO.java

public Map<String, Object> list(String pg);

package user.service;

import java.util.List;
import java.util.Map;

import user.bean.UserDTO;

public interface UserService {
	public String getExistId(String id);

	public void write(UserDTO userDTO);

	public Map<String, Object> list(String pg);
}

---

UserController.java

Map<String, Object> map2 = userService.list(pg);

model.addAttribute("map2", map2);

	@RequestMapping(value="user/list", method = RequestMethod.GET)
	public String list(@RequestParam(required = false, defaultValue = "1") String pg, Model model){	
		Map<String, Object> map2 = userService.list(pg);
		
		model.addAttribute("map2", map2);
		return "/user/list"; //=> /WEB-INF/user/list.jsp
	}

---

UserController.java

여기서 map2의 값을 보낼 때

model.addAttribute("list", map2.get("list"));
model.addAttribute("userPaging", map2.get("userPaging"));

이렇게 하거나

 

model.addAttribute("map2", map2); 이렇게 보내면 된다. 우리는 이 방법으로 !!

	@RequestMapping(value="user/list", method = RequestMethod.GET)
	public String list(@RequestParam(required = false, defaultValue = "1") String pg, Model model){	
		Map<String, Object> map2 = userService.list(pg);
		
		model.addAttribute("map2", map2);
		
		//model.addAttribute("list", map2.get("list"));
		//model.addAttribute("userPaging", map2.get("userPaging"));
		return "/user/list"; //=> /WEB-INF/user/list.jsp
	}

---

map2

   list ---> userDTO               userPaging ---> currentPage

               userDTO                                         pageBlock

이런식으로 여러 userDTO가 list에 담겨져있는 것이다.

근데 list가 map2안에 있으므로 jsp파일에서 꺼낼 때 map2.list 해서 뽑아야한다.

 

list.jsp

    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>아이디</th>
                <th>비밀번호</th>
            </tr>
        </thead>
        <tbody>
        	<c:if test="${map2.list != null}">
        		<c:forEach var="userDTO" items="${map2.list }">       		
        		 <tr> 
                     <td>${userDTO.getName()}</td>
                     <td>${userDTO.getId()}</td>
                     <td>${userDTO.getPwd()}</td>
                 </tr>
                 </c:forEach>
        	  </c:if> 	
        </tbody>
    </table>
	<div style="margin-top: 15px;">
		${map2.userPaging.pagingHTML}
	</div>
<script type="text/javascript">
function userPaging(pg){
	location.href = "/spring2/user/list?pg=" + pg;
}
</script>

---

UserController.java

map2.put("pg", pg);

	@RequestMapping(value="user/list", method = RequestMethod.GET)
	public String list(@RequestParam(required = false, defaultValue = "1") String pg, Model model){	
		Map<String, Object> map2 = userService.list(pg);
		
		map2.put("pg", pg);
		model.addAttribute("map2", map2);
		//model.addAttribute("list", map2.get("list"));
		//model.addAttribute("userPaging", map2.get("userPaging"));
		return "/user/list"; //=> /WEB-INF/user/list.jsp
	}

 

---

list.jsp

<td><a href="/spring2/user/updateForm?id=${userDTO.getId()}&pg=${map2.pg}">${userDTO.getId()}</a></td>

        <tbody>
        	<c:if test="${map2.list != null}">
        		<c:forEach var="userDTO" items="${map2.list }">       		
        		 <tr> 
                     <td>${userDTO.getName()}</td>
                     <td><a href="/spring2/user/updateForm?id=${userDTO.getId()}&pg=${map2.pg}">${userDTO.getId()}</a></td>
                     <td>${userDTO.getPwd()}</td>
                 </tr>
                 </c:forEach>
        	  </c:if> 	
        </tbody>

---

회원정보 불러오기 + 목록으로 돌아가기(원래 있던 페이지로)

UserController.java

	@RequestMapping(value="user/updateForm", method = RequestMethod.GET)
	public String updateForm(@RequestParam("id") String id, @RequestParam("pg") int pg, Model model) {
	    UserDTO userDTO = userService.getUserById(id);
	    System.out.println("UserDTO: " + userDTO);
	    model.addAttribute("userDTO", userDTO);
	    model.addAttribute("pg", pg);
	    
	    return "/user/updateForm";
	}

---

UserService.java

public UserDTO getUserById(String id);

package user.service;

import java.util.List;
import java.util.Map;

import user.bean.UserDTO;

public interface UserService {
	public String getExistId(String id);

	public void write(UserDTO userDTO);

	public Map<String, Object> list(String pg);

	public UserDTO getUserById(String id);

	public void update(UserDTO userDTO);
}

---

UserServiceImpl.java

	@Override
	public UserDTO getUserById(String id) {
		UserDTO userDTO = userDAO.getUserById(id);
		return userDTO;
	}

---

UserDAO.java

public UserDTO getUserById(String id);

package user.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import user.bean.UserDTO;

@Mapper
public interface UserDAO {

	public UserDTO getExistId(String id);
	
	public void write(UserDTO userDTO);
	
	public UserDTO getUserById(String id);
	
	public void update(UserDTO userDTO);

	public void delete(String id);

	public List<UserDTO> list(Map<String, Integer> map);

	public int getTotalA();


}

---

userMapper.xml

    <select id="getUserById" parameterType="String" resultType="user">
    	select * from usertable where id = #{id}
    </select>

---

updateForm.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>
<head>
<meta charset="UTF-8">
<title>회원정보 수정</title>
<link rel="stylesheet" href="../css/update.css">
</head>
<body>
<div id="header">
    <a href="/spring2/"><img src="../image/free-icon-love-4096198.png" alt="홈" width="60" height="60"/></a>
</div>

<h2>회원정보 수정</h2>

<form id="updateForm" method="post">
    <input type="hidden" name="id" value="${userDTO.id}" />
    <input type="hidden" name="pg" id="pg" value="${pg}" />
    
    <table>
        <tr>
            <th>이름</th>
            <td>
            	<input type="text" name="name" id="name" value="${userDTO.name}">
            	<div id="nameDiv"></div>
            </td>
       		
        </tr>
        <tr>
            <th>아이디</th>
            <td >${userDTO.id}</td>
        </tr>
        <tr>
            <th>비밀번호</th>
            <td>
            	<input type="password" name="pwd" id="pwd" value="${userDTO.pwd}" >
            	<div id="pwdDiv"></div>	
            </td>
        	
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;" >
               <div class="button-container">
				   <input type="button" onclick="location.href='/spring2/user/list?pg=${pg}'" value="목록">
                   <input type="button" id="updateBtn" value="수정하기">
                   <input type="button" id="deleteBtn" value="회원탈퇴">
                   <input type="reset" value="다시입력">
               </div>
            </td>
        </tr>       
    </table>
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="../js/update.js"></script>
</body>
</html>

 

목록 눌렀을 때 원래 있던 페이지로 가게 한다 !!

---

회원정보 수정

update.js

$(function () {
    //회원정보 수정
    $('#updateBtn').on('click', function(event){
    	console.log("dsds");
        event.preventDefault();

        $('#nameDiv').empty();
        $('#pwdDiv').empty();
        
        let isValid = true;
        
        // 이름 검사
        if($('#name').val().trim() == ''){
            $('#nameDiv').html('이름을 입력하세요.').css('color', 'red');
            $('#name').focus();
            isValid = false;
        }
        
        // 비밀번호 검사
        if($('#pwd').val().trim() == ''){
            $('#pwdDiv').html('비밀번호를 입력하세요.').css('color', 'red');
            $('#pwd').focus();  // 이 부분 수정
            isValid = false;
        }
            
        if(isValid){
            $.ajax({
                type: 'post',
                url: '/spring2/user/update',
                data: $('#updateForm').serialize(),
                success: function(){
                    alert('회원정보가 수정되었습니다.');
                    location.href = "/spring2/user/list?pg=" + $('#pg').val();
                },
                error: function(e){
                    console.log(e);
                }
            });
        }
    });
});

---

UserController.java

	@ResponseBody
	@RequestMapping(value="user/update", method = RequestMethod.POST)
	public void upate(@ModelAttribute UserDTO userDTO) {
		System.out.println(userDTO);
		userService.update(userDTO);
	}

---

UserService.java

public void update(UserDTO userDTO);

package user.service;

import java.util.List;
import java.util.Map;

import user.bean.UserDTO;

public interface UserService {
	public String getExistId(String id);

	public void write(UserDTO userDTO);

	public Map<String, Object> list(String pg);

	public UserDTO getUserById(String id);

	public void update(UserDTO userDTO);
}

---

UserServiceImpl.java

	@Override
	public void update(UserDTO userDTO) {
		userDAO.update(userDTO);		
	}

---

UserDAO.java

public void update(UserDTO userDTO);

package user.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import user.bean.UserDTO;

@Mapper
public interface UserDAO {

	public UserDTO getExistId(String id);
	
	public void write(UserDTO userDTO);
	
	public UserDTO getUserById(String id);
	
	public void update(UserDTO userDTO);

	public void delete(String id);

	public List<UserDTO> list(Map<String, Integer> map);

	public int getTotalA();


}

 

---

userMapper.xml

    <update id="update" parameterType="user">
        UPDATE usertable 
        SET name = #{name}, pwd = #{pwd} 
        WHERE id = #{id};
    </update>

---