2023.3.17 학습내용 정리 (Spring Boot + Vue.js)

Vue 3 에서 초기 프로젝트 componet 생성 후 연동 시 에러메시지 발생

should always be multi-word vue/multi-word-component-names

아래와 같이 package.json 의 rules 밑에 내용 추가 혹은 2단어 이상으로 component 설정하기.

    "rules": {
      "vue/multi-word-component-names": 0
    }

Srping Boot 초기 프로젝트 내 DataSource 없을 때 임시로 설정.

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)

Vue 쪽 api Get으로 보내고 response 값 items에 저장하는 예제

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

    axios.get("/api/items").then((res) => {
      console.log(res);
      state.items = res.data;
    })

    return {state}
  }
}

 

@RestController
public class ItemController {

    // front end - api test 용
    @GetMapping("/api/items")
    public List<String> getItems(){
        List<String> items = new ArrayList<>();
        items.add("aa");
        items.add("bb");
        items.add("cc");

        return items;
    }
}