본문으로 바로가기

1. Controller

더보기
package com.mycom.mybatis.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mycom.mybatis.dto.EmpDto;
import com.mycom.mybatis.service.MybatisService;

@Controller
public class MybatisController {

	@Autowired
	MybatisService service;
	
	
	@GetMapping(value="/")
	public String dbTest() {
		System.out.println("DBController / ");
		return "dbTest"; //prefix, suffix가 붙음
	}
	
	
	//응답이니까 get
	@GetMapping(value="/empDetail/{employeeId}")
	@ResponseBody
	public EmpDto empDetail(@PathVariable int employeeId) {
		System.out.println(employeeId);
		
		EmpDto dto = service.empDetail(employeeId);
		return dto;
	}
	
	//응답이니까 get
	@GetMapping(value="/empList")
	@ResponseBody
	public List<EmpDto> empList() {
		List<EmpDto> list = service.empList();
		System.out.println(list);
		return list;
	}
	
	//요청이니까 post
	@PostMapping(value="/empInsert")
	@ResponseBody //숫자 하나라도 json으로 FE에 보내줘야 한다. 받아오는걸 responseBody로 전부 json으로 보내줬다.
	public int empInsert(EmpDto empDto) { //FE에서 JSON으로 데이터가 넘어오지 않는다??
		System.out.println(empDto);
		
		int ret = service.empInsert(empDto);
		return ret;
	}
	
	@PostMapping(value="/empUpdate")
	@ResponseBody
	public int empUpdate(EmpDto empDto) {
		System.out.println(empDto);
		int ret = service.empUpdate(empDto);
		return ret;
	}
	
	@PostMapping(value="/empDelete")
	@ResponseBody
	public int empDelete(int employeeId) {
		System.out.println(employeeId);
		int ret = service.empDelete(employeeId);
		return ret;
	}
	
}

 

2. Service

Service Interface

더보기
package com.mycom.mybatis.service;

import java.util.List;

import com.mycom.mybatis.dto.EmpDto;

public interface MybatisService {
	List<EmpDto> empList();
	EmpDto empDetail(int employeeId);
	int empInsert(EmpDto dto); 
	int empUpdate(EmpDto dto);
	int empDelete(int employeeId);
}

ServiceImpl

더보기
package com.mycom.mybatis.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.mycom.mybatis.dao.MybatisDao;
import com.mycom.mybatis.dto.EmpDto;

@Service
public class MybatisServiceImpl implements MybatisService{
	
	@Autowired
	MybatisDao dao;

	@Override
	public EmpDto empDetail(int employeeId) {
		return dao.empDetail(employeeId);
	}

	@Override
	public List<EmpDto> empList() {
		return dao.empList();
	}

	@Override
	public int empInsert(EmpDto dto) {
		return dao.empInsert(dto);
	}

	@Override
	public int empUpdate(EmpDto dto) {
		return dao.empUpdate(dto);
	}

	@Override
	public int empDelete(int employeeId) {
		return dao.empDelete(employeeId);
	}
}

 

3. Dao

더보기
package com.mycom.mybatis.dao;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.mycom.mybatis.dto.EmpDto;

@Mapper //spring 어노테이션이 아니라 mybatis 어노테이션임.
public interface MybatisDao {
	List<EmpDto> empList();
	EmpDto empDetail(int employeeId);
	int empInsert(EmpDto dto); 
	int empUpdate(EmpDto dto);
	int empDelete(int employeeId);
}

 

4. query.xml

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

<mapper namespace="com.mycom.mybatis.dao.MybatisDao">   <!-- @Mapper annotation 있는 dao -->
   <select id="empDetail" parameterType="int" resultType="com.mycom.mybatis.dto.EmpDto">
      select employeeId, first_name, last_name, email, hiredate
        from emp
       where employeeId = #{employeeId}
   </select>
   
   <!-- dto List 등 목록을 리턴하는 경우는 상세를 리턴하는 것과 동일하게 dto 타입을 사용 -->
   <select id="empList" resultType="com.mycom.mybatis.dto.EmpDto">
      select employeeId, first_name, last_name, email, hiredate
        from emp
   </select>
   
   <insert id="empInsert" parameterType="com.mycom.mybatis.dto.EmpDto">
      insert into emp(employeeId, first_name, last_name, email, hiredate)
      values (#{employeeId}, #{firstName}, #{lastName}, #{email}, now())
   </insert>
   
   <update id="empUpdate" parameterType="com.mycom.mybatis.dto.EmpDto">
      update emp set
         first_name = #{firstName},
         last_name = #{lastName},
         email = #{email},
         hiredate= #{hireDate} 
      where employeeId = #{employeeId}
   </update>
   
   <delete id="empDelete" parameterType="int">
      delete from emp
      where employeeId = #{employeeId}      
   </delete>
</mapper>

 

5. Dto

더보기
package com.mycom.mybatis.dto;

public class EmpDto {

	private int employeeId;
	private String firstName;
	private String lastName;
	private String email;
	private String hireDate;

	public EmpDto() {}
	public EmpDto(int employeeId, String firstName, String lastName, String email, String hireDate) {
		this.employeeId = employeeId;
		this.firstName = firstName;
		this.lastName = lastName;
		this.email = email;
		this.hireDate = hireDate;
	}
	
	
	public int getEmployeeId() {
		return employeeId;
	}
	public void setEmployeeId(int employeeId) {
		this.employeeId = employeeId;
	}
	public String getFirstName() {
		return firstName;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
	public String getLastName() {
		return lastName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getHireDate() {
		return hireDate;
	}
	public void setHireDate(String hireDate) {
		this.hireDate = hireDate;
	}
	@Override
	public String toString() {
		return "EmpDto [employeeId=" + employeeId + ", firstName=" + firstName + ", lastName=" + lastName + ", email="
				+ email + ", hireDate=" + hireDate + "]";
	}
	
}

 

6. html

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>DB Test (using JSON)</h1>
	<button id="btnEmpDetail">Emp 상세</button>
	<button id="btnEmpList">Emp 목록</button>
	<br>
	
	<button id="btnEmpInsert">Emp 등록</button>
	<button id="btnEmpUpdate">Emp 수정</button>
	<button id="btnEmpDelete">Emp 삭제</button>
	
	<script>
		window.onload=function() {
			document.querySelector("#btnEmpDetail").onclick=async function() {
				
				try{
					let response = await fetch("/mybatis/empDetail/1500");
					let data = await response.json();
					console.log(data);
				} catch(error) {
					console.error(error);
				}
			}
			
			document.querySelector("#btnEmpList").onclick=async function() {
				
				try{
					let response = await fetch("/mybatis/empList");
					let data = await response.json();
					console.log(data);
				} catch(error) {
					console.error(error);
				}
			}
			 
			// javascript 객체
			var empInsertData = {
					employeeId: 1600,
					firstName: '유',
					lastName: '길동',
					email: 'you@gildong.com',
					hireDate: '2022-10-20'
			}
			
			document.querySelector("#btnEmpInsert").onclick=async function() {
				
				let urlParams = new URLSearchParams(empInsertData);
				let fetchOptions = {
						method: 'POST',
						body: urlParams
				}
				
				try{
					let response = await fetch("/mybatis/empInsert", fetchOptions);
					let data = await response.json();
					console.log(data);
				} catch(error) {
					console.error(error);
				}
			}
			
			// javascript 객체
			var empUpdateData = {
					employeeId: 1600,
					firstName: '유',
					lastName: '길동',
					email: 'suna@gildong.com',
					hireDate: '2022-10-21'
			}
			document.querySelector("#btnEmpUpdate").onclick=async function() {
				
				let urlParams = new URLSearchParams(empUpdateData);
				let fetchOptions = {
						method: 'POST',
						body: urlParams
				}
				
				try{
					let response = await fetch("/mybatis/empUpdate", fetchOptions);
					let data = await response.json();
					console.log(data);
				} catch(error) {
					console.error(error);
				}
			}
			
			document.querySelector("#btnEmpDelete").onclick=async function() {
				
				let urlParams = new URLSearchParams({ employeeId: 1600 });
				let fetchOptions = {
						method: 'POST',
						body: urlParams
				}
				
				try{
					let response = await fetch("/mybatis/empDelete", fetchOptions);
					let data = await response.json();
					console.log(data);
				} catch(error) {
					console.error(error);
				}
}
		}
	
	</script>
</body>
</html>