프로그래밍
2023.3.17 학습내용 정리 (Spring Boot + Vue.js)
가시가되어
2023. 3. 17. 19:37
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;
}
}