Vue, 스프링부트 REST API (1)

intelliJ 사용해서 vue와 springboot 생성해서 REST API로 주고 받는 부분까지 진행 :)

매우 흥미롭다!

 

 

 

 

 

 

Vue

 

powershell 에서 뷰 폴더 생성하기

- cd 폴더 위치
- vue create frontend


***
오류 발생하면
cmd 관리자모드로 들어가서
Set-ExecutionPolicy RemoteSigned
***

다시 cmd에서
- cd frontend
- npm run serve

 

 

 

intelliJ에서 열기

frontend 폴더를 intelliJ에서 열기

터미널에서 npm run serve로 실행되는 것 확인

 

 

 

vue 화면 간단하게 꾸미기

아래 링크 들어가서 index.html파일에 js와 css link 붙여넣기

twitter-bootstrap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js" integrity="sha512-fHY2UiQlipUq0dEabSM4s+phmn+bcxSYzXP4vAXItBvBHU7zAM/mkhCZjtBEIJexhOMzZbgFlPLuErlJF2b+0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

 

bootstrap 들어가서 examples 들어가서 album 들어가서

오른쪽마우스로 소스보기로 

body 코드(template에)과 css 코드(style에) 가져와서 App.vue에 붙여넣기 

(intelliJ에서 vue.js plugin 설치해야함)

 

 

 

 

 

현재 App.vue의 template 코드 (모두 컴포넌트화)

<template>
  <Header/>
  <Home/>
  <Footer/>
</template>

 

 

 

 

참고)
multi-word 사용해야 한다는 오류 발생시
package.json의 rules 안에 아래 내용 붙여넣기
"vue/multi-word-component-names":0
이후 다시 npm run serve (재가동)

 

 

 

---

 

 

SpringBoot

 

 

backend

location은 vue폴더 생성한 gallery로 선택

즉, gallery에 frontend 폴더와 backend 폴더가 존재

 

 

 

 

ItemController 클래스 생성

package com.example.backend;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
public class ItemController {

    @GetMapping("/api/items")
    public List<String> getItems(){

        List<String> items = new ArrayList<>();
        items.add("sanchou");
        items.add("mungmung");
        items.add("cute");

        return items;
    }
}

 

 

http://localhost:8080/api/items

실행시켜보기

 

 

 

 

---

 

 

다시 Vue

 

 

frontend에서 package.json 포트번호 바꿔주기

"serve": "vue-cli-service serve --port 3001",

터미널에서 npm install axios 설치

 

 

 

Home.vue 파일에서 아래와 같이 작성

export default {
  name: "Home",
  components: {Card},
  setup(){
    axios.get("http://localhost:8080/api/items").then((res)=>{
      console.log(res);
    })
  }
}

 

 

 

 

cors 에러 발생

vue.config.js 파일

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
      }
    }
  }
}

 

 

음.. 이상하게 나는 이렇게 해도 cors 문제가 계속 발생해서

backend에서 Controller에 CrossOrigin도 입력했다..........!

@CrossOrigin("http://localhost:3001/")

 

 

 

 

Home.vue

          <div class="col" v-for="(item, idx) in state.items" :key="idx">
            <Card :item="item" />
          </div>

 

<script>
import axios from "axios";
import {reactive} from "vue";
import Card from "@/components/Card.vue";

export default {
  name: "Home",
  components: {Card},
  setup() {
    const state = reactive({
      items: []
    })

    axios.get("http://localhost:8080/api/items").then(({data}) => {
      state.items = data;
    })

    return {state}
  }
}

</script>

 

 

 

Card.vue

<template>

    <div class="card-body">
      <p class="card-text">{{item}}</p>
    </div>

</template>

<script>
export default {
  name: "Card",
  props:{
    item: String
  }
}
</script>

<style scoped>

</style>

 

 

 

---

---

 

 

 

 

이 강의 너무 좋음...!!!