45. 스카우트 목록 1개 조회

45. 스카우트 목록 1개 조회

스카우트 된 선수의 계약, 목록에서 삭제를 위해 해당 페이지를 생성한다.

 

• 백엔드 스카우트 목록 1개 조회 추가

23. 스카우터 목록 삭제 때 생성한 스카우트 목록 1개 조회 사용

1. ScoutService

    // 스카우터 목록 1개 조회

    public Scout getScoutOne(Long no);

 

2. ScoutServiceImpl

 

    // 스카우터 목록 1개 조회

    @Override

    public Scout getScoutOne(Long no) {

        Optional<Scout> scout = sRepository.findById(no);

        return scout.orElse(null);

    }

3. 스카우트 목록 1개 조회(ScoutController)

    //스카우터 목록 1개 조회

    // 127.0.0.1:8080/REST/scoutone?sno=

    @RequestMapping(value = "/scoutone", method = {RequestMethod.GET},

    consumes = MediaType.ALL_VALUE,

    produces = MediaType.APPLICATION_JSON_VALUE)

    public Map<String, Object> scoutoneGET(Scout scout,

    @RequestParam(name = "sno", defaultValue = "0")long scoutNo,

    @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())){

                Scout scout2 = sService.getScoutOne(scoutNo);

                map.put("status", 200);

                map.put("scout",scout2);

            }

        }

        catch(Exception e){

            e.printStackTrace();

            map.put("status", e.hashCode());

        }

        return map;

    }

4. 조회하기

44번 스카우트 목록 조회

• 스카우트 목록 1개 조회 페이지 라우터 추가

1. 스카우트 목록 1개 조회 파일 생성

스카우트 목록 1개 조회 파일 생성

2. 라우터 추가(index.js)

스카우터 목록 1개 조회는 스카우터 목록에서 이동하므로 nav 바에 추가하지 않는다.

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'

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},

]

const router = createRouter({

    history: createWebHistory(),

    routes,

});

export default router;

3. 스카우트 목록 1개 조회 이동

스카우트 전체 목록에서 스카우트 번호를 클릭하여 1개 조회를 한다.

 

            <td><a href="#" @click="handleScout(scoutlist.scoutno)">{{scoutlist.scoutno}}</a></td>

 ... ...

            async handleScout(scoutno){

                this.$router.push({name: 'Scout_One', query:{sno:scoutno}});

            }

스카우트 목록 1개 조회 이동

• 스카우트 목록 1개 조회하기

1. 백엔드 연동, console 값 확인

<script>

    import axios from 'axios';

    export default {

        async created(){

            const url = `/REST/scoutone?sno=${this.sno}`;

            const headers = {"Content-Type":"application/json",

                    token : this.token};

            const response = await axios.get(url,{headers});

            // console.log(response);

            this.scout = response.data.scout;

            this.playername = response.data.scout.player.playername;

            this.playerage = response.data.scout.player.playerage;

            this.playerprice = response.data.scout.player.playerprice;

        },

        data(){

            return{

                //세션 스토리지에서 토큰 읽기

                token : sessionStorage.getItem("TOKEN"),

                sno : this.$route.query.sno,

                scout : ''

            }

        }

    }

</script>

<style scoped>

</style>

console 값 확인

2. 페이지 구성

스카우트 번호와 선수 이름, 나이, 몸 값만 출력한다.

<template>

    <div>

        {{sno}} <br />

        스카우트 번호 {{scout.scoutno}} <br />

        선수 이름 {{playername}} <br />

        선수 나이 {{playerage}} <br />

        선수 몸 값 {{playerprice}} <br />

    </div>

</template>

3. 화면 확인

화면 확인