반응형
[SpringBoot - RestController]
@RequestMapping("/userapi")
//중략
@GetMapping("/user/search")
@ApiOperation(value = "SearchCondition 에 부합하는 조건을 가진 사용자 목록을 반환한다.", response = User.class)
public ResponseEntity<?> search (SearchCondition con) {
try {
System.out.println(con);
List<User> users = us.searchByCondition(con);
if (users != null && users.size() > 0) {
return new ResponseEntity<List<User>>(users, HttpStatus.OK);
} else {
return new ResponseEntity<Void>(HttpStatus.NO_CONTENT);
}
} catch (Exception e) {
return exceptionHandling(e);
}
}프론트 화면에서 이름을 치고 검색 버튼을 누르면, 스프링 부트 RestContoller에 아래 주소로 정보를 요청했다.
http://localhost:9999/userapi/user/search
근데 파라미터 con에 아무것도 안들어온다.
[Vue.js - UserSearch.vue]
<template>
<div class="container">
<div class="text-center">
<input
class="view"
type="text"
v-model="search"
placeholder="이름을 입력하세요."
/>
<button class="btn" @click="searchUser">검색</button>
</div>
<br />
<hr />
<div>
<h2>검색 결과</h2>
<div v-if="users.length">
<table class="user-list">
<colgroup>
<col style="width: 5%" />
<col style="width: 40%" />
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 15%" />
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>아이디</th>
<th>이름</th>
<th>이메일</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="index">
<td>{{ index + 1 }}</td>
<td>
<router-link class="user-link" :to="`/${user.id}`">{{
user.id
}}</router-link>
</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.age }} 세</td>
</tr>
</tbody>
</table>
</div>
<div v-else>검색 결과가 없습니다.</div>
</div>
<br />
</div>
</template>
<script>
import axios from "axios";
export default {
name: "UserSearch",
data() {
return {
search: "",
users: [],
};
},
methods: {
searchUser() {
// // user 요청 api 주소
const API_URL = `http://localhost:9999/userapi/user/search`;
// axios 요청 (Spring Boot Rest API 참고)
axios({
url: API_URL,
method: "GET",
data:{
key:"name",
word:this.search,
},
})
.then((res) => {
for (let i = 0; i < res.data.length; i++) {
this.$set(this.users, i, res.data[i]);
}
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
data:{
key:"name",
word:this.search,
},
script 부분에 data를 같이 보내보았는데도, 스프링부트 파라미터 con에 들어가지 않았다.
그래서 민성오빠한테 물음표 공격한 결과 쿼리스트링으로 보내면 쿼리스트링이 자동으로 SearchCondition타입으로 변환되어 con에 쏙 들어간다는 답변을 듣고 허겁지겁 해봤다.
methods: {
searchUser() {
// // user 요청 api 주소
const API_URL = `http://localhost:9999/userapi/user/search?key=name&word=${this.search}`;
// axios 요청 (Spring Boot Rest API 참고)
axios({
url: API_URL,
method: "GET",
})
.then((res) => {
for (let i = 0; i < res.data.length; i++) {
this.$set(this.users, i, res.data[i]);
}
})
.catch((err) => {
console.log(err);
});
},
},
[Vue.js로 만든 화면]
[SpringBoot - RestController]
모두 잘 나와 행복하다.
아직 스프링부트 쪽의 개념이 약한 것이 보였던 하루..
그래도 많은 지식을 얻었다 ^^
반응형
