44. 스카우트 목록 조회
- 스카우트 목록 페이지 라우터 추가
1. 스카우트 목록 파일 생성
2. 라우터 추가
2-1. index.js
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'
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},
]
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
2-2. App.vue
스카우트 목록은 로그인한 유저만 접근 가능하도록 한다.(admin 계정도 접근 불가)
<template>
<div id="nav">
<router-link to="/">home</router-link>|
<router-link v-if="!logged" to="/Join">Join</router-link>|
<router-link v-if="!logged" to="/Login">Login</router-link>|
<router-link v-if="logged" to="/Logout">Logout</router-link>|
<router-link v-if="adminLogged" to="/Registration">Registration</router-link>|
<router-link to="/PlayerList">PlayerList</router-link>|
<router-link v-if="!adminLogged & logged" to="/ScoutList">ScoutList</router-link>|
<hr />
<el-menu
:default-active="activeIndex" class="el-menu-demo" mode="horizontal"
@select="handleSelect">
<el-menu-item v-if="logged" index="1">Processing Center</el-menu-item>
</el-menu>
<router-view />
</div>
</template>
<script>
export default {
created() {
this.changeLogged();
},
methods: {
changeLogged() {
const token = sessionStorage.getItem("TOKEN");
const role = sessionStorage.getItem("ROLE");
if(token != null) { // 로그인 되었을 경우
this.logged =true;
if(role === "ADMIN"){ // 로그인 후 role이 admin일 경우
this.adminLogged = true;
}
else{ //로그인 후 role이 admin이 아닐 경우
this.adminLogged = false;
}
}
else{ // 로그인 되지 않았을 경우
this.logged = false;
}
},
}
}
</script>
<style>
</style>
- 화면 확인
1. 로그인 하지 않았을 경우
2. admin 계정으로 로그인 한 경우
3. user 계정으로 로그인 한 경우
- 스카우트 목록 구현
<template>
<div>
<h3>스카우트 목록</h3>
<input type="hidden" v-model="text"
placeholder="검색" @keyup.enter="handleSearch" />
<table border="1">
<tr>
<td>번호</td>
<td>이름</td>
<td>나이</td>
<td>국적</td>
<td>포지션</td>
<td>몸 값</td>
</tr>
<tr v-for="scoutlist in scoutlists" v-bind:key="scoutlist">
<td>{{scoutlist.scoutno}}</td>
<td><a href="#" @click="nextPage(scoutlist.player.playerno)">{{scoutlist.player.playername}}</a></td>
<td>{{scoutlist.player.playerage}}</td>
<td>{{scoutlist.player.playercountry}}</td>
<td>{{scoutlist.player.playerposition}}</td>
<td>{{scoutlist.player.playerprice}}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods:{
async handleSearch() {
const url = `/REST/mscout?page=${this.page}`;
const headers = {"Content-Type":"application/json",
token : this.token}
const response = await axios.get(url, {headers});
console.log(response);
this.scoutlists = response.data.scoutlist;
},
async nextPage(playerno) {
this.$router.push({name: 'Player_One', query:{no:playerno}});
}
},
async created(){
await this.handleSearch();
},
data(){
return{
//세션 스토리지에서 토큰 읽기
token : sessionStorage.getItem("TOKEN"),
page : '',
scoutlists : [],
player: []
}
}
}
</script>
<style scoped>
</style>
- 스카우트 목록 확인
- 페이지네이션 추가
1. 스카우트 목록 숫자 조회(백엔드)
1-1. 스카우트 저장소(ScoutRepository)
userid를 이용해 스카우트 목록의 갯수를 조회한다.
// member 별 스카우트 목록 숫자 조회
Long countAllByMember_Userid(String userid);
1-2. 스카우트 서비스(ScoutService)
// member 별 스카우트 목록 숫자 조회
public Long getScoutCountByUserid(String id);
1-3. 스카우트 서비스(ReviewServiceImpl)
// member 별 스카우트 목록 숫자 조회
@Override
public Long getScoutCountByUserid(String id) {
return sRepository.countAllByMember_Userid(id);
}
1-4. 스카우트 컨트롤러(ScoutController)
// member 별 스카우트 숫자 조회
//127.0.0.1:8080/REST/scoutcount
@RequestMapping(value = "/scoutcount", method = {RequestMethod.GET},
consumes = MediaType.ALL_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Object> scoutcountGET(Scout scout,
@RequestHeader("token") String token) {
Map<String, Object> map = new HashMap<>();
try{
String memberid = jwtUtil.extractUsername(token); // 토큰을 통해 회원 정보 찾기
Member member = mService.selectUserOne(memberid); // member 정보 찾기
if(memberid.equals(member.getUserid())){
Long scoutcount = sService.getScoutCountByUserid(memberid);
map.put("status", 200);
map.put("scoutlist",scoutcount);
}
}
catch(Exception e){
e.printStackTrace();
map.put("status", e.hashCode());
}
return map;
}
1-5. 스카우트 목록 숫자 조회
토큰을 통해 userid를 찾아낸다.
2. 페이지네이션 구현(프론트엔드)
<template>
<div>
<h3>스카우트 목록</h3>
<input type="hidden" v-model="text"
placeholder="검색" @keyup.enter="handleSearch" />
<table border="1">
<tr>
<td>번호</td>
<td>이름</td>
<td>나이</td>
<td>국적</td>
<td>포지션</td>
<td>몸 값</td>
</tr>
<tr v-for="scoutlist in scoutlists" v-bind:key="scoutlist">
<td>{{scoutlist.scoutno}}</td>
<td><a href="#" @click="nextPage(scoutlist.player.playerno)">{{scoutlist.player.playername}}</a></td>
<td>{{scoutlist.player.playerage}}</td>
<td>{{scoutlist.player.playercountry}}</td>
<td>{{scoutlist.player.playerposition}}</td>
<td>{{scoutlist.player.playerprice}}</td>
</tr>
</table>
<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/mscout?page=${this.page}`;
const headers = {"Content-Type":"application/json",
token : this.token}
const response = await axios.get(url, {headers});
console.log(response);
this.scoutlists = response.data.scoutlist;
const url1 = `REST/scoutcount` //스카우트 숫자 조회 주소 입력
const response1 = await axios.get(url1, {headers}); //userid를 찾기 위해 토큰 사용
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();
},
data(){
return{
//세션 스토리지에서 토큰 읽기
token : sessionStorage.getItem("TOKEN"),
page : '',
scoutlists : [],
player: [],
totalpage : ''
}
}
}
</script>
<style scoped>
</style>
- 페이지네이션, 스카우트 목록 확인
'프로젝트' 카테고리의 다른 글
| 46. 스카우트 목록 삭제 (0) | 2022.02.05 |
|---|---|
| 45. 스카우트 목록 1개 조회 (0) | 2022.02.04 |
| 43. 스카우트 목록 추가 (0) | 2022.01.26 |
| 42. 선수 등록 (0) | 2022.01.25 |
| 41. 리뷰 목록 (0) | 2022.01.24 |