- nuxt프로젝트 localhost:3000 뜨면 localhost:3000/api/helloWorld 주소창에 적고 엔터!
- 프론트 화면에 백단에서 보낸 Hello World 글자 보이는지 확인
5. jpa 연결
1) 데이터 바인딩
데이터 바인딩 되어야될 페이지에 mounted로 걸어준다
<template>
...
<tr v-for="(row, idx) in list" :key="idx">
<td>{{ row.idx }}</td>
<td><a v-on:click="fnView(`${row.idx}`)">{{ row.title }}</a></td>
<td>{{ row.author }}</td>
<td>{{ row.created_at }}</td>
</tr>
</template>
<script>
export default {
data() { //변수생성
return {
requestBody: {}, //리스트 페이지 데이터전송
list: {}, //리스트 데이터
}
},
mounted() {
this.getBoardList()
},
methods: {
getBoardList() {
this.requestBody = { // 데이터 전송
keyword: this.keyword,
page: this.page,
size: this.size
}
this.$axios.get(this.$serverUrl + "/board/list", {
params: this.requestBody,
headers: {}
}).then((res) => {
this.list = res.data //서버에서 데이터를 목록으로 보내므로 바로 할당하여 사용할 수 있다.
}).catch((err) => {
alert(err.message);
})
}
}
}
</script>
2) back 서비스 만듦
@Override
public List<BoardDto> getBoardList() {
List<BoardDto> result = new ArrayList<>();
List<Board> boardEntities = boardRepository.findAll();
for (Board entity : boardEntities) {
BoardDto dto = BoardDto.builder()
.idx(entity.getIdx())
.author(entity.getAuthor())
.title(entity.getTitle())
.contents(entity.getContents())
.createdAt(entity.getCreatedAt().format(DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm:ss")))
.build();
result.add(dto);
}
return result;
}
3) back api 만듦
@RestController
@RequiredArgsConstructor
public class BoardController {
private final BoardService boardService;
@ResponseBody
@GetMapping("/board/list")
public List<BoardDto> boardList() {
return boardService.getBoardList();
}
}
4) 데이터 연결 확인
nuxt / vue 다른점
vue : 만약 vue 였다면 이 상황에서 게시글 상세페이지를 보고싶을때, 새로운 vue 페이지만들고 라우터를 추가해야함
nuxt : 라우터추가안해도됨, pages에 넣어두면 url을 통한 이동은 바로 이동됨
ex)
이런식으로 pages에 index2.vue라는 파일을 생성하고 링크로 이동하면 해당페이지에 바로 접속된다.
