express 스프링으로 옮기기 프로젝트 - 2

express 작업이 진행 중이라 스프링으로 옮길 시간이 없어서 이제서야 해당 내용을 작성하게 되었다.

 

이전에 만든 model과 mapper를 이용해 구조를 만들 었다.

이제는 controller를 통해 진짜 작업을 수행할 차례다

 

 bathcontroller라는 class 만들어준다. 

해당 class는 다음과 같이 RestController라는 어노테이션을 붙여준다.

다음 같은 어노테이션을 붙여준다면 express의 라우터  처럼 스프링에서 해당 클래스를 사용해 준다.

내부는 다음과 같다.

mapper라는 인터페이스로 mapper를 만들고 해당 인터페이스를 받아오기 위해 생성자를 만든다. 이때 꼭 mapper라는 매게변수를 받는 생성자를 만들어 주어야 한다.

 

다음은 @GetMapping이다.

 rest api설명을 읽어 본다면 쉽게 이해 할 수 있을 것이다.

 

get을 사용해 bath/id를 접근하기 위해 get Mapping을 지정해 주고 주소를 지정한다.

단 여기서 {} 안에든 값은 다음 메소드를 구현하면서 @PathVariable() 안에 값으로 받아올 수있다. 이때 해당 값은 다음과 같이 String id 이런 식으로 변수를 지정해서 넣어준다.

 

 

포스트는 다음과 같다.

@GetMapping 대신 @PostMapping을 주면 된다.

@PostMapping("주소")
public void insertbathinfo(@RequestBody bath model) {
mapper.insertbathinfo(model.getid(),model.getTemp(),model.getWaterlevel(),model.getCap());
}

여기서 알아야 할 것은 @RequestBody이다 이것은 받아온 body를 다음 형식으로 바꾸어준다. 우리가 여기 서 받을 데이터는 bath이다. 이전 1편에서 만든 bath 모델은 다음 처럼 사용된다.

여기서 model에 getid()를 호출 하는 다음이 가능한 이유는 @Getter@Setter를 지정해줘 자동으로 생성되었기 때문이다.

 

마지막으로 vue를 스프링에 연동 시키기 위해선 다음과 같은 작업을 수행하면 된다.

1. package.json 수정

다음처럼 serve에 주소를 3000번이나 다른 주소로 바꾸어야한다. 

스프링과 vue의 기본주소가 8080으로 동일 해 충돌이난다.

2. vue.config.js 파일 수정

해당 파일에 outputDir를 다음과 같이 스프링의 주소로 바꿔준다.

outputDir: "../spring/src/main/resources/static",

 

마지막으로 이전과 동일하게 npm run build 를 통해 build를 진행 하면 된다.