vue 실행 명령어 : 명령프롬프트

npm run serve

vue 종료

ctrl + c (여러번 타이핑)

vue 소스(프로젝트) : 실행파일 없음

실행파일 : node-modules 폴더(인터넷다운로드 : 1G이상)

npm i

부트스트랩 css/js cdn 링크 넣기 : public/index.html

0) components/Header.Com.vue 만들기

1) 부트스트랩 css/js cdn 링크 넣기 : public/index

2) DeptView.vue : 부서 페이지

• 백엔드 데이터를 화면에 반복문으로 출력
  => springboot : json 데이터 전송
  => vue : 받아서 화면에 출력
  (json : 자바스크립트 객체배열 : [{}.{}])

3) json 데이터(파일) 읽어서 빈배열(dept) 에 복사

=> 라이브러리 함수의 도움을 받아야함 : axios.get()
=> axios 설치 : 명령프롬프트
npm i axios

=> 설치 확인 : package.json
=> 설치 명령어 : npm i xxx
=> 삭제 명령어 : npm uninstall xxx

vue 테이블에 반복문으로 데이터 넣기 (json이용)

json 파일(객체배열) -> public 폴더에 저장

페이지 만들기 - >

import BooksService from "../services/BooksService";
export default {
data() {
return {
books: [], // 빈배열 (json 읽어서 배열에 복사)
};
},
// 함수 : methods
methods: {
// TODO: 비동기 코딩 : async ~ await (비동기 코딩 키워드 : js)
// TODO: 대상 : (벡엔드 데이터 받기 코딩 : json 데이터 받기(axios 함수들))
// vs 동기 코딩 : 자바처럼 코딩하는것 (일반적인 코딩)
// TODO: async/await 사용법 : async 뷰함수명(){ let 변수 = await axios함수명() }
//
async getBookss() {
// 예외처리 : try / catch
try {
let response = await BooksService.getAll();
console.log(response.data);
this.books = response.data; // customer.json 내용
} catch (error) {
console.log(error);
}
},
},
// 자동실행 : 이페이지가 최초로 화면에 뜰때
mounted() {
this.getBookss();
},
};