tools & libs/IDES
[vscode] Spring Boot + Vue 연동 프로젝트 생성 1 - 부트 앱 개발
- -
반응형
vscode에서 spring boot 앱을 생성하고 Vue를 클라이언트로 구성해보자.
1. 먼저 vscode를 통해서 spring boot를 작업하기 위해 필요한 플러그인들을 설치한다.
자바 확장팩
스프링 부트 관련 확장팩
2. 새로운 스프링 부트 프로젝트 생성
F1 입력 후 Spring Initializr: Generate a Maven Project를 선택한다.
사용 언어는 Java를 선택한다.
group id는 com.example을 입력한다.
artipact id는 demo 를 입력한다.
부트 버전을 선택한다.(2.2.1)
starter에서 필요한 의존성을 선택한 후 enter를 입력한다.
탐색기를 통해 프로젝트를 저장할 폴더를 선택후 새 창에서 vscode를 실행한다.
다시 vscode가 실행되면 pom.xml에 필요한 의존성을 추가한다. jsp 사용을 위해 tomcat이 필요하다.
Ctrl + space를 통한 자동완성이 잘 이뤄진다.
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
src/main/resources/application.properties에서 resolver관련 설정을 추가한다.
spring.mvc.view.prefix=/WEB-INF/view/
spring.mvc.view.suffix=.jsp
위에서 구성한 prefix의 경로를 구성한다.
src/main/java/com/example/demo/controller/HelloController.java를 작성한다.
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
/**
* HelloController
*/
@Controller
public class HelloController {
@GetMapping("/mvc")
public String helloSpring(Model model){
model.addAttribute("message", "Hello Boot at VsCode");
return "hello";
}
@GetMapping("/rest")
public @ResponseBody Map<String, Object> helloRest(){
Map<String, Object> map = new HashMap<>();
map.put("name", "hong");
map.put("age", 20);
return map;
}
}src/main/webapp/WEB-INF/view 밑에 hello.jsp도 작성한다.
<%@ page contentType="text/html;charset=utf-8"%>
<html>
<body>
${message}
</body>
</html>
이제 부트 앱을 실행시킨 후 브라우저를 통해서 호출해보자.
반응형
'tools & libs > IDES' 카테고리의 다른 글
| [vscode] Spring Boot + Vue 연동 프로젝트 생성 3 - 스프링과의 연동 (0) | 2019.11.21 |
|---|---|
| [vscode] Spring Boot + Vue 연동 프로젝트 생성 2 - 뷰 앱 (0) | 2019.11.21 |
| [vscode] Git 사용법 1 (0) | 2019.11.20 |
| [vscode] 기본적인 ESLint 사용법 (0) | 2019.11.10 |
| [vscode] PowerShell: 자주 사용되는 명령어 모음 (0) | 2019.11.10 |
Contents
소중한 공감 감사합니다