[Vue3] DB중에서 계정 과목 불러와서 selectBox에 넣기

 

 

DB 불러와서 IBSheet 의 테이블 말고

Vue 템플릿 내 계정과목 selectBox 에 넣기

 

 

 

● main.vue

const loadAccountTitles = async () => {
    try {
        const res = await axios.get('http://localhost:8080/main/accountTitle')
        const list = res.data

        selectTitleOptions.value = list.map(item => item.accountTitle)

    } catch (err) {
        console.error('계정과목 불러오기 실패', err)
    }
}

 

1. async 로 비동기 함수 선언

 

2. try-catch 문은 오류 나도 멈추지 말고 잡아서 알려달라는 문법

 

3. axios.get은 서버에 Get방식으로 데이터 받아오는 함수로 응답을 res에 저장

 

4. 따라서 계정과목 리스트가 res에 담겨있다.

 

5. list 에 res.data를 저장

 

6. selectTitleOptions가 ref라 .value를 써주고 list 안에는 여러 계정과목들이 있기 때문에 .map() 을 써서 accountTitle이름만 뽑아서 새 배열로 만듦

 

7. onMounted( () =>  { }) 할 때 작성해주면 됨

 

---

 

 

** 궁금증

 

const res = await axios.get(...);
const list = res.data;

 

1. main.vue에서 res 와 res.data 의 차이

 

res는 전체 응답(response)객체

"data"를 포함해서 "status" (200, 400 등), "statusText"(OK), "headers", "config" 등 많이 담고 있다.

여기에서 데이터만 추출해서 쓰기 위해 res.data를 사용 

 

 

 

selectTitleOptions.value = list.map(item => item.accountTitle)

 

2. main.vue에서  list.map(item => item.accountTitle) 처럼 쓰는 이유

 

res.data 에 accountTitle 뿐만 아니라 assetName, acqPrice 등 다른 정보들도 포함될 경우  

필요한 값만 간단한 배열로 저장해서 쓰기 위해서 사용

(.map() : 배열에서 원하는 필드만 뽑아서 새 배열 생성하는 함수)

 

accountTitle만 따로 item에 넣지 않고 그냥

selectTitleOptions.value = list 로 할 경우

 

 

---

 

●  DetailCodeController.java

 

@RestController
@RequiredArgsConstructor
@RequestMapping("/main")
public class DetailCodeController {

	private final DetailCodeService service;

	@GetMapping("/accountTitle")
	public ArrayList<DetailCodeDto.Item> getAccountTitle() {

		return service.getAccountTitle();
	}
}

 

1. Vue에서 axios.get() 으로 요청하면 해당하는 GetMapping 찾아서 연결

 

2. @RestController 또는 ResponseBody 어노테이션을 붙이면 메서드의 리턴값을 JSON 형태로 바로 응답해준다

(Vue에서 res.data를 JSON으로 받기 위함)

 

 

 

detailCodeMapper.xml

    <select id="getAccountTitle" resultType="dev.kloz.boot.assetsmanager.main.dto.DetailCodeDto$Item">
        SELECT cd.code_name AS accountTitle
        FROM tbl_code_detail cd
                 JOIN tbl_code_master cm ON cd.master_seq = cm.master_seq
        WHERE cm.master_seq = 3
          AND cm.code_name = '계정과목'
        ORDER BY cd.detail_seq
    </select>