nuxt + spring boot + jpa + h2 게시판 만들기

npm 설치 되어있다는 가정 하에,

 

 

1. nuxt 프로젝트 생성

 

1) nuxt 프로젝트 시작할 폴더하나 만들기

2) cmd창 혹은 터미널에서 해당 폴더 경로로 이동하여 아래 명령어 실행

 

1. Vue-CLI, Vue-CLI-init설치

$ npm i -g @vue/cli
$ npm i -g @vue/cli-init

# 설치 후 버전 확인
$ vue --version

2. nuxt 프로젝트 생성

$ npm init nuxt-app <project-name>

#혹시 위 커맨드가 안된다면 아래 커맨드사용
$ vue init nuxt-community/starter-template myvueapp

<project-name> 대신에 본인이 원하는 프로젝트명으로 이름 넣어주면 된다

 

nuxt 프로젝트 생성완료

 

2. 프로젝트 실행

 

생성된 nuxt 프로젝트로 이동

cd <project-name>

프로젝트 실행

npm run dev

 

3. spring boot 프로젝트 생성

sts, intellij 에서 바로 만들어도되지만, 나는 https://start.spring.io/  여기를 이용했다.

jdk 17로 설정하고 디펜던시는 적당히 꾸려줬다

h2 안쓰면 추가할필요없음. 본인이 추가하고싶은 db 추가하면됨

 

1)기초 controller 생성

mainController 하나 생성해준다.

@RestController
@RequestMapping("/api")
public class MainController {

    @GetMapping(value="/helloWorld")
    public String helloWorld() {
        return "Hello World!";
    }

}

꼭... @RestController로 어노테이션 달아야한다.. @Controller로 달았다가 3시간동안 삽질함.

 

2) h2 연결

application.yml 수정해준다

server:
  port: 8081

spring:
  jackson:
    property-naming-strategy: SNAKE_CASE

  jpa:
    hibernate:
      ddl-auto: create-drop
    show-sql: true
    generate-ddl: true
    defer-datasource-initialization: true

  h2:
    console:
      enabled: true  # H2 Console을 사용할지 여부 (H2 Console은 H2 Database를 UI로 제공해주는 기능)
      path: /h2-console  # H2 Console의 Path
  # Database Setting Info (Database를 H2로 사용하기 위해 H2연결 정보 입력)
  datasource:
    driver-class-name: org.h2.Driver  # Database를 H2로 사용하겠다.
    url: jdbc:h2:~/test  # H2 접속 정보
    username: sa  # H2 접속 시 입력할 username 정보 (원하는 것으로 입력)
    password:  # H2 접속 시 입력할 password 정보 (원하는 것으로 입력)

포트설정 어쩌고저쩌고 하고 실습용으로 h2를 달아놓음

 

 

4. nuxt - spring proxy 연결

  - jsp로 만들지않는이상, html이나 vue로 만들게되면 프론트, 백단 서버를 따로따로 띄워야한다. 

   프론트서버 포트 3000, 백단 서버 8080 이런식으로 뜨게되는데, 프론트 포트3000에서 백단 8080을 호출해서 통신하는데 서로 포트가 다르면 cors error 발생하므로 연결해주는 작업이 필요하다

 

1) axios, proxy install

 

 axios : get/post 통신장치

$ npm install @nuxtjs/axios

 

proxy : 포트 간 통신을 위한 설정장치

$ npm install @nuxtjs/proxy

 

2) nuxt.config.js 수정

module.exports = {
telemetry:true,
...
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://localhost:8443/', //spring port 입력
      changeOrigin: true // cross origin 허용
    }
  }
}

/api 로 시작되는 요청은 모두 8443 포트로 넘겨버리겠다는 설정이다.

 

 

3) 연결확인

- spring boot 프로젝트, nuxt 프로젝트 둘다 run 시킴

- nuxt프로젝트 localhost:3000 뜨면 localhost:3000/api/helloWorld 주소창에 적고 엔터!

- 프론트 화면에 백단에서 보낸 Hello World 글자 보이는지 확인

 

5. jpa 연결

1) 데이터 바인딩

 데이터 바인딩 되어야될 페이지에 mounted로 걸어준다

<template>
...
 	<tr v-for="(row, idx) in list" :key="idx">
          <td>{{ row.idx }}</td>
          <td><a v-on:click="fnView(`${row.idx}`)">{{ row.title }}</a></td>
          <td>{{ row.author }}</td>
          <td>{{ row.created_at }}</td>
	</tr>
</template>

<script>
export default {
    data() { //변수생성
        return {
            requestBody: {}, //리스트 페이지 데이터전송
            list: {}, //리스트 데이터
        }
    },
    mounted() {
        this.getBoardList()
    },
    methods: {
        getBoardList() {
            this.requestBody = { // 데이터 전송
                keyword: this.keyword,
                page: this.page,
                size: this.size
            }

            this.$axios.get(this.$serverUrl + "/board/list", {
                params: this.requestBody,
                headers: {}
            }).then((res) => {
                this.list = res.data  //서버에서 데이터를 목록으로 보내므로 바로 할당하여 사용할 수 있다.
            }).catch((err) => {
                alert(err.message);
            })
        }
    }
}
</script>

 

 

2) back 서비스 만듦

@Override
    public List<BoardDto> getBoardList() {
        List<BoardDto> result = new ArrayList<>();
        List<Board> boardEntities = boardRepository.findAll();

        for (Board entity : boardEntities) {
            BoardDto dto = BoardDto.builder()
                    .idx(entity.getIdx())
                    .author(entity.getAuthor())
                    .title(entity.getTitle())
                    .contents(entity.getContents())
                    .createdAt(entity.getCreatedAt().format(DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm:ss")))
                    .build();

            result.add(dto);
        }

        return result;
    }

 

3) back api 만듦

@RestController
@RequiredArgsConstructor
public class BoardController {

    private final BoardService boardService;

    @ResponseBody
    @GetMapping("/board/list")
    public List<BoardDto> boardList() {
        return boardService.getBoardList();
    }
 }

 

4) 데이터 연결 확인

nuxt / vue 다른점

 

vue : 만약 vue 였다면 이 상황에서 게시글 상세페이지를 보고싶을때, 새로운 vue 페이지만들고 라우터를 추가해야함

nuxt : 라우터추가안해도됨, pages에 넣어두면 url을 통한 이동은 바로 이동됨

ex)

이런식으로 pages에 index2.vue라는 파일을 생성하고 링크로 이동하면 해당페이지에 바로 접속된다.

별도로 사용할 conponents는 해당폴더에 따로 만들어두고 사용하면됨

 

 

 

 

참고 url : https://onethejay.tistory.com/64, https://minu0807.tistory.com/65