기존에 vue.js에서 axios를 사용하는 방법에 대해서 간단하게 알아보았습니다. 방법을 확인하면서 간단하게 get방식을 통해서 알아보았는데... 이때는 단순히 select를 해오는 방법에 대해서 보았습니다. 하지만 대다수의 경우에는 select를 통해서 table의 전체 데이터를 가져오는 것 보다는, 조건을 통해서 필요한 항목만 선별하여 select를 수행하게 됩니다.
따라서 vue.js에서는 get을 사용해서 select를 할때, 당연히 조건값을 같이 넘겨줘야하는데... 이것이 get params 입니다.
axios.get(url, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed (try catch finally에서 finally부분)
}); 형태는 요렇게 생겼습니다. 그렇다면 도식화 하여 동작 로직을 확인해 보겠습니다.
- vue.js에서는 대상 URL에 원하는 Parameter를 추가하여 axios.get으로 Request 수행
- Spring Boot (AT_Back)에서는 Parameter를 추출하여 해당 변수를 조합하여 Database로 부터 쿼리하여 데이터 요청
- Database는 쿼리결과를 다시 AT_Back에 전송
- Spring Boot (AT_Back)에서는 vue.js에 해당결과를 Response 수행
- vue.js에서는 받은 Response를 기준으로 렌더링하여 화면에 표출
다음과 같습니다. axios.get 중 params가 추가되는 항목은 위의 로직으로 동작하게 됩니다. 그렇다면 코드를 통해서 알아보겠습니다. vue.js의 기준으로 맞추어서 뒷단의 Spring Boot의 로직은 자세하게 언급하지는 않겠습니다.
해당 내용은 추후 AT Project부분에서 참조해주시면 됩니다.
1. vue.js에 axios.get 작성
코드를 통해서 parameter를 이기종간에 전달하기 위해서는 두가지 규칙이 필요합니다. 왜 두가지냐고 묻는다면... 보내는 쪽에서 지킬항목과 받는쪽에서 지킬항목이 있어서 두가지가 되는 것 입니다. 의외로 간단하기 때문에 가볍게 작성해 보겠습니다.
- 보내는쪽 규칙(vue.js) - 해당 부분은 axios.get부분에서 작성이 됩니다. params라는 추가 정보를 axios.get으로 요청 시 함께 보냄
- 받는쪽 규칙(Spring Boot) - vue.js에서 보내는 정보에 대해서 동일한 형태의 DTO를 생성하고 지정하여 받음
우선 여기서는 보내는쪽 규칙을 작성해 보도록 하겠습니다.
[vue.js]
getQSSList() {
const url = '/qss/list';
axios.get(url, {
params: {
bsnsYear: '2020',
bsnsQuarter: '1',
stocksRoe: 3,
stocksMarketcap: 5000,
},
}).then((res) => {
console.log(res.data);
}).catch((error) => {
console.log(error);
}).then(() => {
console.log('getQSSList End!!');
});
},구문은 제대로 지켜줍니다. params에 원하는 parameter를 나열해 줍니다. string형식은 ' ' 안에 넣어주시고... 숫자형은 그냥 기재해주시면 됩니다. 그 외에는 기존에 axios.get에 params가 없는 형태와 동일합니다.
2. Spring Boot에 controller 작성
[controller]
@RestController
@RequestMapping(value = "/qss")
public class QSSController {
@Autowired
QSSService qssService;
@RequestMapping(value = "list", method = RequestMethod.GET)
public ResponseEntity<ArrayList<QSSListDTO>> listQSS(QSSListSearch condition){
// condition.setBsnsYear("2020");
// condition.setBsnsQuarter("1");
// condition.setStocksRoe(3);
// condition.setStocksMarketcap(5000);
System.out.println(condition.toString());
return ResponseEntity.ok(qssService.listQSS(condition));
}
}vue.js에서 axios를 통해서 요청할 url에 대한 정의가 들어있는 controller부분입니다. 기존에 axios.get으로 parameter가 없는 controller와는 살짝 다른 부분이 있습니다. RequestMapping과 연결되는 method에 추가적인 인자가 있는데... 관련된 class는 QSSListSearch입니다.
어라 method에 인자가 있다면 호출할때 뭔가를 넣어준다는 뜻인데... 그렇다면 vue.js에서 호출할때 뭔가를 넣어준다는 것인가?? 맞습니다. vue.js에서 작성한 params는 url호출 시 그 값들이 이 DTO와 매핑이 되게 됩니다. 그렇다면, 이 DTO는 어떻게 생겼을까요??
[Search 관련 DTO]
public class QSSListSearch {
private String bsnsYear;
private String bsnsQuarter;
private Integer stocksRoe;
private Integer stocksMarketcap;일단 getter( )와 setter( )는 삭제하였습니다. 보면... axios.get에서 넘겨준 params와 동일한 이름의 변수들이 존재하네요. 느낌이 오시나요?? 이렇게 하면 자동으로 매핑이 되는 것입니다.
그렇다면... 실제로 값이 정상적으로 들어왔는지 확인해 볼까요??
[axios.get params 전송정보]
params: {
bsnsYear: '2020',
bsnsQuarter: '1',
stocksRoe: 3,
stocksMarketcap: 5000,[controller에서 받은정보]
QSSListSearch [bsnsYear=2020, bsnsQuarter=1, stocksRoe=3, stocksMarketcap=5000]정확하게 일치함을 확인했습니다. 그렇다면... 남은건 Database에 정상적으로 쿼리하여 해당 결과를 vue.js에게 전송하는 것이 남았습니다.
3. Response 전송결과
실질적인 로직은 이번에는 작성하기 않겠습니다. axios.get을 통해서 params를 전송하고, 정상적으로 전달받아 원하는 결과를 잘 리턴하는게 목적이였으니까요.
그렇다면 vue.js의 console.log( )를 통해서 그 결과를 확인해 보겠습니다.
router > index.js 에 설정한 내용을 토대로 해당 URL을 웹브라우저에서 호출하겠습니다. (전 chrome사용)
[router > index.js]
import QSSInfo from '@/components/QSSInfo';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/qss',
name: 'QSSInfo',
component: QSSInfo,
},
개발자 도구를 통해서 확인한 console.log는 42건의 데이터가 response되었습니다. 그럼 혹시나 해서 Database에서 확인해 보겠습니다.
정확히 일치함을 확인했습니다. 이렇게 axios.get + params는 마무리 되었습니다.
4. eslint 해결
이번에도 eslint를 통해서 나온 처음보는 항목에 대해서 조치해 보도록 하겠습니다. 이렇게 하나하나 쌓이다 보면... 깔끔한 코드가 만들어 지겠죠??
[The template root requires exactly one element]
해당 error는 template에 해당하는 부분에 아무런 sub tag가 없을 때 발생합니다.
<template>
</template>
==============================
<template>
<div>prepare</div>
</template>다음과 같이, 윗 부분처럼 코드의 본문을 작성하기 전 단계이기 때문에 비워놨더라도... 아래처럼 뭐라도 채워주어야 합니다.
[Trailing spaces not allowed]
이 에러는 위와 유사한 에러라고 볼 수 있습니다. 보통 vue.js의 코딩을 위해서 기본 골자를 작성해 놓고 시작을 하는데... 어떤 상황에서는 해당 부분이 작성하기 전 일수 있습니다. 예를 들면, 아래의 코드와 같이 구조만 작성해 놓고 하나하나 채워가게 될 텐데...
<script>
import axios from 'axios';
export default{
data() {
return {
};
},
created() {
},
methods: {
},
};
</script>이럴 경우에는 비어있는 { } 사이에 새로운 행을 생성하였을때 공백이 존재하면 안됩니다. 보통 작성하고 IDE에서 엔터를 치게되면 자동으로 이전에 코드가 시작되는 지점으로 공백이 들어가게되는데... 이 공백을 없애주어야 합니다.
그래도 이제는 몇개 발생안하네요~~
- Ayotera Lab -
댓글