[spring boot+vue.js+mariaDB] 프로젝트 해보기-2(Spring boot 서버 구축)

 

 

INTRO

---

 

Spring boot 서버를 구축해볼것이다.

 

User 테이블을 지난 포스팅에서 생성하였다.

해당 테이블 기반으로 서버를 만들어 보자.

 

 

---

1. DB 연동

-->DB와 연결이 잘 되는지 먼저 테스트할 것이다.

--> application.properties 파일에 아래와 같이 DB정보를 적어준다.

spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mariadb://localhost:3306/test1
spring.datasource.username=root
spring.datasource.password=root

mybatis.type-aliases-package=com.gg.dto
mybatis.mapper-locations=com/config/*Mapper.xml

 

---

 

 

2. Mapper작성

-->com.config 패키지를 만들고, UserMapper.xml파일을 만들어준다.

-->이 Mapper파일을 통해 DB에 쿼리를 날린다.

--> 기존 레거시 프로젝트에서는

--> Java code에서 String Query = "select ~~"이런식으로 작성하였다.

--> 동적으로 쿼리를 생성하려면 여간 귀찮은 것이 아니였다.

--> 그래서 이걸 XML로 하기위해 Mybatis가 만들어졌다.

 

 

UserMapper.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="UserMapper"> 
	<select id="userList" resultType="User"> 
		SELECT * from user; 
	</select> 
</mapper>

---

 

3. DTO, DAO, SERVICE, CONTROLLER 생성

--> 이 부분은 반복되는 부분이라 아래 포스팅을 참고하면 된다.

rangsub.tistory.com/99

[Spring boot] spring boot + mariaDB 프로젝트 만들어보기 [JSP사용]

--> JPA를 사용하여 코드를 더 단순화 시킬 수 있다고 한다.(ORM?)

--> 아직 해보지 못했는데, 조만간 해볼 생각이다.

 

--> Controller를 아래와 같이 만들어준다.

--> RestController를 사용할것이다.

package com.gg.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.gg.dto.UserDTO;
import com.gg.service.UserService;

@RestController
public class UserController {
	
	@Autowired
	UserService service;
	
	@GetMapping("/list")
	public List<UserDTO> SelectAllFromUser() {
		return service.userList();
	}

}

 

---

 

4. Postman을 사용하여 통신 확인

 

--> 위 단계까지 완료한 뒤, Spring boot 프로젝트를 실행시킨다.

 

--> 이후 Postman을 이용하여 DB값을 잘 받아오는지 확인할것이다..

 

--> Postman이 무엇인지? 와 설치 방법은 아래 포스팅이 잘 설명해놓아서 링크를 걸어보겠다.

meetup.toast.com/posts/107

Postman 개요 / 설치 / 사용법 / 활용 방법 : NHN Cloud Meetup

 

--> GET 요청을 보내면 아래와 같이 JSON형태로 응답이 넘어와야 한다.

 

--> 여기까지 했다면, Spring boot프로젝트는 이상없이 동작하는 것이다.

---

 

 

 

 

 

 

5. Vue 프로젝트 생성

--> 지난 포스팅에서 Vue 개발 환경을 전부 세팅하였을것이다.

--> 이번 포스팅은 Spring boot 프로젝트 내부에 Vue를 빌드하여 생성되는 css,html,js등의 파일을 넣어

--> Spring boot 프로젝트를 실행하면 vue의 화면이 보이도록 해볼것이다.

--> 우선 vscode를 열고, 터미널을 실행한다.

 

--> 생성한 Spirng boot 프로젝트의 경로까지 이동한다.

 

--> vue create front 명령어로 vue 프로젝트를 생성한다.

--> 프로젝트는 default 로 생성한다.

 

 

 

--> 생성이 완료되면 다음과 같은 폴더 구조가 만들어질것이다.

 

 

--> 이후 부가적인 설정을 해줘야 한다.

1. vue.config.js 파일을 추가하여 build시 경로를 적어줘야한다.

2. http-common.js파일을 추가하여 http통신에 관련된 사항을 적어줘야한다.

3. Vue router를 추가한다.(다중 페이지 처리를 위해..)

4. axios를 추가한다( http통신을 위해..)

 

 

 

 

1. vue.config.js추가 (front 프로젝트 root폴더)

--> 이 설정을 통해 npm run build를 했을 때, Spring boot프로젝트 경로인 src/main/resource/static폴더에 결과 파일들이 생성된다.

 

vue.config.js

module.exports = {  
  outputDir: "../src/main/resources/static",  
  indexPath: "../static/index.html",  
  devServer: {  
    proxy: "http://localhost:8080"  
  },  
  chainWebpack: config => {  
    const svgRule = config.module.rule("svg");    
    svgRule.uses.clear();    
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");  
  }  
};

 

 

2. http-common.js파일 추가(src폴더)

--> 이 설정을 통해 axios라는 모듈에 관한 설정을 해준다.

 

 

http-common.js

import axios from "axios"

export default axios.create({
    baseURL: "http://localhost:8080",
    header:{
        "Content-type":"application/json",
    }
});

 

 

 

--> 이후 VSCode에서 front폴더를 Open한다.

 

3. Vue router를 추가한다.

npm -i --save vue-router

 

--> package.json파일에 다음과 같이 router 종속성이 추가된 것을 볼 수 있다.

 

--> vue router기본 템플릿도 설치한다.

vue add router

 

--> y를 입력 후 엔터

 

--> 이것은 history 모드를 사용할것인지 묻는 것이다.

--> 우린 N을 입력하여 사용하지 않을 것이다.

--> 자세한 설명은 아래 글을 참고하라..

happy-coding-day.tistory.com/128

[Vue] vue-router에서 Hash Mode Vs History Mode 차이점은 무엇인가?

--> n을 입력 후 엔터

 

4. axios를 추가한다( http통신을 위해..)

 

--> 여기까지 하면 Vue설정은 끝이다.

--> 설정 완료 후 폴더 구조이다.

 

 

 

--> 이제 터미널에서 npm run build를 해보자

npm run build

 

 

 

--> 빌드 완료 후, STS에서 프로젝트 폴더 새로고침을 해본다.

 

--> static 폴더 안에 이렇게 빌드 결과 파일들이 생성된 것을 볼 수 있다.

 

--> Spring boot 프로젝트를 실행 후, localhost:8080에 접속해보면 드디어 Vue 화면을 볼 수 있다.

 

---

 

 

마무리

 

boot 프로젝트에서 Vue 연동까지 해봤다. 

다음 포스팅에는 axios를 활용하여 spring boot controller에서 보내주는 값을 화면단에 뿌려볼 것이다.

 

 

 

 

 

 

 

 

 

 

-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!