38. 상세 페이지
- 상세 페이지 라우터 추가
1. 상세 페이지 파일 생성
2. 라우터 추가(index.js)
상세 페이지는 App.vue에 등록하지 않는다.
import { createWebHistory, createRouter } from "vue-router";
import Home from '@/components/Home'
import Join from '@/components/Join'
import Login from '@/components/Login'
import Logout from '@/components/Logout'
import Registration from '@/components/Registration'
import PlayerList from '@/components/PlayerList'
import Player_One from '@/components/Player_One'
const routes = [
{path:'/', name:'Home', component:Home},
{path:'/Join', name:'Join', component:Join},
{path:'/Login', name:'Login', component:Login},
{path:'/Logout', name:'Logout', component:Logout},
{path:'/Registration', name:'Registration', component:Registration},
{path:'/PlayerList', name:'PlayerList', component:PlayerList},
{path:'/Player_One', name:'Player_One', component:Player_One},
]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
- 상세 페이지 생성
1. playerlist 수정
선수 목록에서 선수 이름을 클릭하면 선수 상세 페이지로 이동하도록 한다.
<template>
<div>
<h3>선수 목록</h3>
<input type="text" v-model="text"
placeholder="검색" @keyup.enter="handleSearch" />
<table border="1">
<tr>
<td>이름</td>
<td>나이</td>
<td>국적</td>
<td>포지션</td>
<td>몸 값</td>
</tr>
<tr v-for="player in players" v-bind:key="player">
<td><a href="#" @click="nextPage(player.playerno)">{{player.playername}}</a></td> <- 선수이름에 a 태그를 이용해 상세 페이지로 이동할 수 있게 한다.
<td>{{player.playerage}}</td>
<td>{{player.playercountry}}</td>
<td>{{player.playerposition}}</td>
<td>{{player.playerprice}}</td>
</tr>
</table>
<hr />
<el-pagination
background layout="prev, pager, next" :total="totalpage"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods:{
//페이지 이동
async handleCurrentChange(val){
this.page = val;
await this.handleSearch();
},
async handleSearch() {
const url = `/REST/playerall?page=${this.page}`;
const headers = {"Content-Type":"application/json"}
const response = await axios.get(url, {headers});
// console.log(response);
this.players = response.data.player;
const url1 = `/REST/playercount` //전체 선수 숫자 조회 주소 입력
const response1 = await axios.get(url1);
console.log(response1);
//전체 선수 수를 통해 페이지네이션 숫자 생성
this.totalpage = Number(response1.data.count);
},
async nextPage(playerno) { <- 클릭한 선수의 no를 이용해 해당 선수의 상세 페이지로 이동한다.
this.$router.push({name: 'Player_One', query:{no:playerno}});
}
},
async created(){
await this.handleSearch();
},
data(){
return{
players : [],
page : 1,
totalpage : 0,
text : ''
}
}
}
</script>
<style >
</style>
2. 상세 페이지 수정
2-1. 선택한 선수의 정보가 넘어오는지 확인
<template>
<div>
<h3>선수 상세 페이지</h3>
{{no}}
<hr />
이름 : {{player.playername}} <br/>
나이 : {{player.playerage}} <br/>
신장 : {{player.playerheight}} <br/>
몸무게 : {{player.playerweight}} <br/>
포지션 : {{player.playerposition}} <br/>
국적 : {{player.playercountry}} <br/>
몸 값 : {{player.playerprice}} <br/>
이름 : {{player.image}} <br/>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async handleContent(){
const url = `/REST/playerone?no=${this.no}`;
const headers = {"Content-Type":"application/json"};
const response = await axios.get(url, headers);
console.log(response);
}
},
data(){
return {
player : '',
no : this.$route.query.no
}
},
async mounted(){
await this.handleContent();
}
}
</script>
<style scoped>
</style>
2-2. 백엔드에 선수 사진 조회 추가(PlayerController)
상세 페이지에 선수 사진을 나타내기 위해 백엔드에 선수 1명 사진 조회를 추가한다.
그리고 선수 1명 조회문에 사진 조회를 이용해 사진 url 정보도 함께 나타낸다.
// 선수 1명 조회
//127.0.0.1:8080/REST/playerone?no=
@RequestMapping(value = "/playerone", method = {RequestMethod.GET},
consumes = MediaType.ALL_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Object> playeroneGET(Player player,
@RequestParam("no") long no) {
Map<String, Object> map = new HashMap<>();
try{
Player player2 = pService.getPlayerOne(no);
map.put("status", "200");
map.put("player",player2 );
map.put("playerimg","/REST/playeroneimg?no=" + no ); //선수 이미지 url
}
catch(Exception e){
e.printStackTrace();
map.put("status", e.hashCode());
}
return map;
}
// 선수 1명 사진 조회
//127.0.0.1:8080/REST/playeroneimg?no=
@RequestMapping(value = "/playeroneimg", method = RequestMethod.GET)
public ResponseEntity<byte[]> playeroneimgGET(
@RequestParam("no") long no) {
try{
Player player = pService.getPlayerOne(no);
if(player.getImage() != null) {
HttpHeaders headers = new HttpHeaders();
if(player.getImagetype().equals("image/jpeg")){
headers.setContentType(MediaType.IMAGE_JPEG);
}
else if(player.getImagetype().equals("image/png")){
headers.setContentType(MediaType.IMAGE_PNG);
}
else if(player.getImagetype().equals("image/gif")){
headers.setContentType(MediaType.IMAGE_GIF);
}
ResponseEntity<byte[]> response =
new ResponseEntity<>(player.getImage(), headers, HttpStatus.OK);
return response;
}
return null;
}
catch(Exception e){
e.printStackTrace();
return null;
}
}
2-3. 상세 페이지 구현
<template>
<div>
<h3>선수 상세 페이지</h3>
{{no}}
<hr />
이름 : {{player.playername}} <br/>
나이 : {{player.playerage}} <br/>
신장 : {{player.playerheight}} <br/>
몸무게 : {{player.playerweight}} <br/>
포지션 : {{player.playerposition}} <br/>
국적 : {{player.playercountry}} <br/>
몸 값 : {{player.playerprice}} <br/>
<img :src="`${playerimg}`" style="width: 100px; height: 100px" />
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async handleContent(){
const url = `/REST/playerone?no=${this.no}`;
const headers = {"Content-Type":"application/json"};
const response = await axios.get(url, headers);
console.log(response);
this.player = response.data.player; <- 선수 정보
this.playerimg = response.data.playerimg; <- 선수 사진 정보
}
},
data(){
return {
player : '',
playerimg : '',
no : this.$route.query.no
}
},
async mounted(){
await this.handleContent();
}
}
</script>
<style scoped>
</style>
3. 상세 페이지 확인
'프로젝트' 카테고리의 다른 글
| 40. 리뷰 등록 (0) | 2022.01.23 |
|---|---|
| 39. 상세 페이지 수정(element) (0) | 2022.01.22 |
| 37. 선수 목록 페이지네이션 (0) | 2022.01.20 |
| 36. 선수 목록 (0) | 2022.01.17 |
| 35. 팀, 에이전트 전체 조회 (0) | 2022.01.13 |