51. 팀 별 선수 조회
- 팀 별 선수 조회 페이지 라우터 추가
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'
import ScoutList from '@/components/ScoutList'
import Scout_One from '@/components/Scout_One'
import TeamList from '@/components/TeamList'
import TeamPlayerList from '@/components/TeamPlayerList'
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},
{path:'/ScoutList', name:'ScoutList', component:ScoutList},
{path:'/Scout_One', name:'Scout_One', component:Scout_One},
{path:'/TeamList', name:'TeamList', component:TeamList},
{path:'/TeamPlayerList', name:'TeamPlayerList', component:TeamPlayerList},
]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
- 팀 별 선수 조회
1. 팀 별 선수 조회 링크 추가(TeamList.vue)
<template>
<div>
<el-container>
<el-aside width="500px">
<el-row class="tac">
<el-col :span="5">
<h5 class="mb-2">TeamList</h5>
<el-menu default-active="2" class="el-menu-vertical-demo" v-model="team" @open="handleOpen" @close="handleClose">
<el-menu-item index="2" v-for="(team,index) in teams" v-bind:key="index" :value="team.teamno" >
<el-icon><icon-menu /></el-icon>
<span>
<a @click="handelTeam(team.teamno)">{{team.teamname}}</a> <링크 추가
</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>
</div>
</template>
<script>
import axios from 'axios';
export default {
async mounted(){
//팀 목록 조회
const url = "/REST/teamall";
const headers = {"Content-Type":"application/json"}
const response = await axios.get(url, {headers});
console.log(response);
this.teams = response.data.team;
},
methods:{
async handelTeam(teamno) { <링크 이동 method
this.$router.push({name: 'TeamPlayerList', query:{no:teamno}});
},
},
더보기
data(){
return{
teams : [],
players : [],
no: '',
bno: this.$route.query.teamno,
page : 1,
totalpage : 0,
text : ''
}
},
}
</script>
<style scoped>
</style>2. 팀 정보 가져오기, 팀 별 선수 수 조회(벡엔드)
2-1. 팀 정보 조회 서비스 생성(TeamService, TeamServiceImpl)
TeamService
//팀 1개 조회
public Team getTeamOne(Long no);
TeamServiceImpl
//팀 1개 조회
@Override
public Team getTeamOne(Long no) {
Optional<Team> team = tRepository.findById(no);
return team.orElse(null);
}
2-2. 팀 정보 가져오기(TeamController)
//팀 1개 조회
//127.0.0.1:8080/REST/teamone?bno=
@RequestMapping(value = "/teamone", method = {RequestMethod.GET},
consumes = MediaType.ALL_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Object> teamoneGET(Team team,
@RequestParam(name = "bno")long bno) {
Map<String, Object> map = new HashMap<>();
try{
Team team2 = tService.getTeamOne(bno);
map.put("status", "200");
map.put("team", team2);
}
catch(Exception e){
e.printStackTrace();
map.put("status", e.hashCode());
}
return map;
}
2-3. 팀 별 선수 수 조회 생성(PlayerRepositoy)
// 팀 번호 별 선수 수 조회
Long countByTeam_Teamno(Long teamno);
2-4. 팀 별 선수 조회 서비스 생성(PlayerService, PlayerServiceImpl)
PlayerService
// 팀 번호 별 선수 수 조회
public Long getTeamPlayerPage(Long no);
PlayerServiceImpl
// 팀 번호 별 선수 수 조회
@Override
public Long getTeamPlayerPage(Long no) {
return pRepositoy.countByTeam_Teamno(no);
}
3. 팀 별 선수 조회 화면 구현(TeamPlayerList.vue)
<template>
<div>
<h3>{{team.teamname}} 선수 목록</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>
<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/bnoplayer?page=${this.page}&bno=${this.no}`;
const headers = {"Content-Type":"application/json"}
const response = await axios.get(url, {headers});
console.log(response);
this.players = response.data.player;
const url1 = `/REST/teamplayercount?bno=${this.no}` //팀 별 선수 숫자 조회 주소 입력
const response1 = await axios.get(url1);
console.log(response1);
//팀 별 선수 수를 통해 페이지네이션 숫자 생성
this.totalpage = Number(response1.data.count);
},
},
async nextPage(playerno) {
this.$router.push({name: 'Player_One', query:{no:playerno}});
}
},
async created(){
await this.handleSearch();
//팀 정보
const url2 = `/REST/teamone?bno=${this.no}`;
const headers2 = {"Content-Type":"application/json"}
const response = await axios.get(url2, {headers2});
console.log(response);
this.team = response.data.team;
},
data(){
return{
no: this.$route.query.no,
page : 1,
totalpage : 0,
text : '',
players : [],
team : ''
}
}
}
</script>
<style lang="scss" scoped>
</style>
3. 화면 확인
'프로젝트' 카테고리의 다른 글
| 50. 팀 목록 조회 (0) | 2022.02.24 |
|---|---|
| 49. 계약(연동) (0) | 2022.02.09 |
| 48. 계약(백엔드 수정) (0) | 2022.02.09 |
| 47. 계약(화면 구현) (0) | 2022.02.07 |
| 46. 스카우트 목록 삭제 (0) | 2022.02.05 |