npm i axios 설치

=>

서비스.js 에 axios 임포트

import axios from "axios";

=>

백엔드 스트링부트 주소 (컨트롤러주소) 작성

const baseURL = "http://localhost:8000/api";
=>

전체조회 (서비스 작성)

import axios from "axios";
// 백엔드 주소 : 스트링부트 주소 (컨트롤러주소)
const baseURL = "http://localhost:8000/api";

// TODO: 전체조회(getAll) : pageIndex, recordCountPerPage 백엔드로 요청 -> 백엔드 sql 실행
// TODO: axios.get(url);
const getAll = (searchKeyword, pageIndex, recordCountPerPage) => {
return axios.get(
baseURL +
/basic/dept?searchKeyword=${searchKeyword}&pageIndex=${pageIndex}&recordCountPerPage=${recordCountPerPage}
);
};

// 객체 : getAll 넣어 export

const DeptService = {
getAll,
};

export default DeptService;

=>

뷰화면 코딩

import DeptService from "@/services/basic/DeptService";
export default {
data() {
return {
pageIndex: 1, //현재페이지번호
totalCount: 0, // 전체개수
recodeCountPerPage: 2, //화면에 보일개수
searchKeyword: "",
depts: [], // 빈배열(json)
};
},
methods: {
//함수 작성 : (비동키 코딩: async /await)
// (복습) : 뷰함수 앞에 : async, axios 함수 앞에 : await
async getDept() {
try {
let response = await DeptService.getAll(
this.searchKeyword,
this.pageIndex - 1,
this.recodeCountPerPage
);
// TODO: 백엔드 전송되는 것 : results(배열), totalCount(총개수)
const { results, totalCount } = response.data;
console.log(response.data); // 디버깅
this.depts = results;
this.totalCount = totalCount;
} catch (error) {
console.log(error);
}
},
},

// 화면이 뜰때 실행하는 함수
mounted() {
this.getDept();
},
};