[목표]
controller-service-dao순으로 MVC2패턴을 이용하여 테스트를 해볼 것이다.
vue에서 버튼을 눌렀을 때
Mysql 안에 있는 DB 값을 화면에 띄우는 게 목표다.
추가로
MyBatis에 대한 간단한 개념정리를 할 것이다.
진행할 순서는 다음과 같다.
0. MySQL 테이블 생성하기
1. 패키지 생성 및 정리(Controller,Service,Dao 생성하기)
2. DB정보 설정 및 MyBatis 셋팅
3. 로직 구현
4. 화면에서 요청하여 값을 확인하기
MySQL 테이블 생성
CREATE TABLE member (
seq INT NOT NULL AUTO_INCREMENT,
mb_id VARCHAR(20),
mb_pw VARCHAR(20),
mb_tele VARCHAR(50),
PRIMARY KEY(seq)
)패키지 생성 및 정리
Spring boot는 Spring과 조금 다르게
프로젝트를 생성한 패키지 하단에만 component-scan이 먹는다.
다른 설정 방법이 있는 줄은 잘 모르지만.. 그냥 초기 생성된 패키지 하단에 만들자.
패키지는 총 6가지이다.
패키지 생성이 끝났으면
Controller, Service, Dao를 만들자.
Controller, Service, DAO, DTO, xml 만들기
[MemberController.java]
package com.example.demo.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.example.demo.DTO.MemberDTO;
import com.example.demo.service.MemberService;
@RestController
public class MemberController {
@Autowired
MemberService mService;
@RequestMapping(value="/getMember", method=RequestMethod.GET)
public List<MemberDTO> getMember(){
List<MemberDTO> list = mService.getMember();
return list;
}
}
[MemberService.java]
package com.example.demo.service;
import java.util.List;
import com.example.demo.DTO.MemberDTO;
public interface MemberService {
public List<MemberDTO> getMember();
}
[MemberServiceImpl.java]
package com.example.demo.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.demo.DTO.MemberDTO;
import com.example.demo.dao.MemberDAO;
@Service
public class MemberServiceImpl implements MemberService{
@Autowired
MemberDAO mDao;
@Override
public List<MemberDTO> getMember() {
List<MemberDTO> list = mDao.getMember();
return list;
}
}
[MemberDAO]
package com.example.demo.dao;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import com.example.demo.DTO.MemberDTO;
@Mapper
public interface MemberDAO {
public List<MemberDTO> getMember();
}
[MemberDTO.java]
package com.example.demo.DTO;
public class MemberDTO {
private String mb_id;
private String mb_pw;
private String mb_tele;
public String getMb_id() {
return mb_id;
}
public void setMb_id(String mb_id) {
this.mb_id = mb_id;
}
public String getMb_pw() {
return mb_pw;
}
public void setMb_pw(String mb_pw) {
this.mb_pw = mb_pw;
}
public String getMb_tele() {
return mb_tele;
}
public void setMb_tele(String mb_tele) {
this.mb_tele = mb_tele;
}
}
[Member.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.example.demo.dao.MemberDAO">
<select id="getMember" resultType="MemberDTO">
SELECT * FROM Member
</select>
</mapper>
MyBatis sqlSession 셋팅하기
이해하려 하지 말고
수정할 부분만 어떤 것을 넣어야하는 지만 알면됨
[DatabaseConfig.java]
package com.example.demo.config;
import javax.sql.DataSource;
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.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@Configuration
@MapperScan(basePackages="com.example.demo.dao")
@EnableTransactionManagement
public class DatabaseConfig {
@Bean
public SqlSessionFactory sqlSessionFactory(DataSource dataSource) throws Exception {
final SqlSessionFactoryBean sessionFactory = new SqlSessionFactoryBean();
sessionFactory.setDataSource(dataSource);
sessionFactory.setTypeAliasesPackage("com.example.demo.DTO");
PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();
sessionFactory.setMapperLocations(resolver.getResources("classpath:com/example/demo/mapper/*.xml"));
return sessionFactory.getObject();
}
@Bean
public SqlSessionTemplate sqlSessionTemplate(SqlSessionFactory sqlSessionFactory) throws Exception {
final SqlSessionTemplate sqlSessionTemplate = new SqlSessionTemplate(sqlSessionFactory);
return sqlSessionTemplate;
}
}
DataBaseConfig에 대해 더 궁금하시다면
아래를 보고 가세요
DB데이터를 가져오는 흐름은
큰 틀로 보면 아래 사진과 같다.
DatabaseConfig.java는
Spring에서 dispatcher context이다.
Spring에서는 보통 xml로 설정을 많이한다.
예를 들어
web.xml, servlet.xml, root-context.xml
이런 파일명들에다가 설정을 했었다.
하지만
DatabaseConfig.java(스프링부트) 파일처럼
어노테이션을 선언하여 환경설정을 해주는 경우도 있다.
아무튼 우리가 헷갈리는 부분은
DAO의 @Mapper 어노테이션과
XML의 namespace가 연결되어야 하고..
DatabaseConfig.java 파일에는
패키지명을 또 알려줘야하고... 복잡하다..
그림을 보며 이해해보자
빨간 영역을 자세히 보자.
시간이 흘러 프로젝트가 조금 커지면
@Mapper로 선언된 파일과 다양한 mapper.xml 생길 것이다.
그렇다면
@Mapper는 어떤 XML이랑 연결되어 있을까?
서로 짝을 지어줘야한다.
mapper.xml의 namespace가 바로 그 연결고리다.
아래의 사진은 한 쌍이다.
또한 중요한 것이 있다.
MyBatis입장에서는
MyBatis 자신에게 요청하는 파일들이 어디에 있는지 미리 알고 있어야한다.
비유하자면
식당 가게 입구가 어딘지 알아야
손님이 오는지 안오는지 알지..
그것을 알려주는 환경파일이
DatabaseConfig.java다.
[application.properties]
server.port=8082
spring.datasource.url=jdbc:mysql://localhost:3306/vueprojectdb?useSSL=false&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=1234
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
자 이제 모든게 끝났다!
vue 서버
spring-boot 서버를 모두 키고
테스트해보자
Vue에서 버튼을 눌러 데이터 가져오는지 확인하기
[App.vue]
<template>
<button @click="dbTest">DB Test Button</button>
</template>
<script>
export default {
methods: {
dbTest(){
fetch('/getMember')
.then((response) => response.json())
.then((data)=> console.log(data[0]));
},
}
}
</script>
<style scoped>
#notice{
border: 1px solid black;
}
</style>
잘 나오는 걸 확인할 수 있다.
