soso

동기, 비동기

uni5948 — Thu, 24 Mar 2022 11:15:27 +0900

동기(Synchronous) : 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.

비동기(Asynchronous) : 응답 상태와 상관없이 다음 동작을 수행할 수 있다.

동기, 비동기

참조 블로그

깃(Git) 설정

uni5948 — Wed, 16 Mar 2022 12:13:15 +0900

깃(Git) 설정

Git Bash 실행

환경설정

git config --global user.name "name" 입력

git config --global user.email "깃허브 가입 이메일" 입력

git config --list 입력해서 설정 확인(name, email)

깃(Git) 설치

uni5948 — Wed, 16 Mar 2022 12:03:10 +0900

깃(Git) 설치

깃, 깃허브 차이

깃 - 소스코드를 컴퓨터에서 인터넷으로 올리는 역할

깃허브 - 소스코드를 올리는 공간

깃 설치

1. 깃 다운로드 페이지 접속

https://git-scm.com/downloads

버전에 맞게 다운로드

설치 된 파일을 클릭하여 다운로드 실행

다른 설정은 건드릴 필요 없이 next만 해주면 됨.

참조 사이트 : https://jhnyang.tistory.com/457

51. 팀 별 선수 조회

uni5948 — Mon, 28 Feb 2022 10:07:08 +0900

51. 팀 별 선수 조회

13. 팀 번호 별 선수 조회 연동

팀 별 선수 조회 페이지 라우터 추가

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)

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

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>

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)

<div>

<h3>{{team.teamname}} 선수 목록</h3>

<input type="text" v-model="text"

placeholder="검색" @keyup.enter="handleSearch" />

<tr>

</tr>

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

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>

3. 화면 확인

팀 별 선수 조회

50. 팀 목록 조회

uni5948 — Thu, 24 Feb 2022 11:49:56 +0900

50. 팀 목록 조회

팀 목록 페이지 라우터 추가

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'

import Scout_One from '@/components/Scout_One'

import TeamList from '@/components/TeamList'

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

]

const router = createRouter({

history: createWebHistory(),

routes,

});

export default router;

2-2. App.vue

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

<router-link to="/TeamList">TeamList</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>

3. 화면 확인

화면 확인

팀 목록 구현

1. 사이드 네비게이션 바에 db에 저장된 팀 목록을 가져온다.

2. 목록 불러오기는 42. 선수 등록의 팀, 에이전트 목록 가져오기를 참조해서 구현한다.

<div>

<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" >

<el-icon><icon-menu /></el-icon>

<span>{{team.teamname}}</span>

</el-menu-item>

</el-menu>

</el-col>

</el-row>

</div>

</template>

import axios from 'axios';

export default {

async created(){

//팀 목록 조회

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;

data(){

return{

teams : []

}

</script>

3. 화면 확인

팀 목록 불러오기

깃허브 repository 설정 변경

uni5948 — Thu, 10 Feb 2022 10:29:35 +0900

깃허브 repository 설정 변경

기존의 Private로 설정되어 있던 repository를 Public으로 수정하기.

1. 깃허브 접속 후 해당 repository의 settings 이동

repository의 settings 이동

2. 하단의 Danger Zone으로 이동

Danger Zone으로 이동

3. 첫 번째 항목 Change repository visibility의 Change visibility 클릭

Make public 클릭 후 하단의 입력창에 입력창 위 굵은 글씨 기입

4. 비밀번호 입력

비밀번호 입력

5. 설정 변경 완료

해당 repository가 public으로 수정된다.

설정 변경 완료

49. 계약(연동)

uni5948 — Wed, 9 Feb 2022 11:37:22 +0900

49. 계약(연동)

48. 계약(백엔드 수정) 연동

백엔드 연동

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.player = response.data.scout.player;

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

//팀 목록 조회

const url2 = "/REST/teamall";

const response2 = await axios.get(url2, {headers});

// console.log(response2);

this.teams = response2.data.team;

methods:{

async handleDelete(){

const result = confirm("스카우트 목록에서 삭제하시겠습니까?");

console.log(result);

if(result){

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

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

token : this.token};

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

console.log(response);

alert("삭제되었습니다.");

this.$router.push({name:'ScoutList'}); //성공 시 ScoutList로 이동

}

else{

alert("취소되었습니다.");

}

async handleContract(){

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

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

token : this.token};

const body = new FormData();

body.append("scout", this.sno);

body.append("playerprice", this.player.playerprice);

body.append("team", this.team);

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

console.log(response);

if(response.data.status === 200){

alert("계약에 성공했습니다.");

this.$router.push({name:'ScoutList'}); //성공 시 ScoutList로 이동

}

else{

alert("계약에 실패했습니다.")

}

data(){

return{

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

token : sessionStorage.getItem("TOKEN"),

sno : this.$route.query.sno,

scout : '',

player : '',

team : '',

agent : '',

teams : []

}

</script>

</style>

계약 구현

player20 선수 계약하기

1. 기존 선수의 몸 값, 소속 팀 확인

기존 선수의 몸 값, 소속 팀 확인

2. 계약하기

계약하기

선수 정보 변경 확인

계약 db 저장 성공

스카우트 정보 수정 성공

계약이 완료되면 스카우트 리스트 화면으로 이동하고 스카우트 정보의 유저 정보를 지워 리스트 화면에서 보이지 않도록 한다.

스카우트 리스트 화면 이동

48. 계약(백엔드 수정)

uni5948 — Wed, 9 Feb 2022 10:48:29 +0900

48. 계약(백엔드 수정)

24. 계약(백엔드) 수정

기존의 계약 코드는 계약은 이루어 지지만 선수 정보가 update 되지 않았다.

그래서 기존의 코드의 순서 및 저장(전달) 방법을 수정하였다.

1. 기존 @RequestBody Contract contract, 를 @ModelAttribute Contract contract, 로 수정

2. 선수 정보 변경을 위해 @ModelAttribute Player player 추가

3. 선수 정보 변경을 먼저 한 뒤 계약이 되도록 순서 변경

코드 수정(ContractController)

//계약하기

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

@RequestMapping(value = "/contractinsert", method = {RequestMethod.POST},

consumes = MediaType.ALL_VALUE,

produces = MediaType.APPLICATION_JSON_VALUE)

public Map<String, Object> contractinsertPOST(

@ModelAttribute Player player,

@ModelAttribute Contract contract,

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

@RequestHeader("token") String token){

Map<String, Object> map = new HashMap<String, Object>();

try{

String memberid = jwtUtil.extractUsername(token); // 토큰을 통해 회원 정보 찾기

Scout scout = sService.getScoutOne(scoutNo);

String scoutId = scout.getMember().getUserid(); // scout에서 member 정보 찾기

if(memberid.equals(scoutId)){ // 로그인 memberid와 scout에서 찾은 memberid가 일치하는지 확인

Player player2 = scout.getPlayer(); // scout에서 선수 정보 찾기

player2.setPlayerprice(player.getPlayerprice()); //몸값

player2.setTeam(player.getTeam()); //소속팀

pService.updatePlayer(player2);

map.put("status", 1);

}

else{

map.put("status", 2);

}

if(player.getPlayerprice() != null){ //계약이 성공하면 해당 player의 팀, 몸 값 정보를 수정한다.

contract.setScout(scout);

cService.insertContract(contract);

// 계약이 성공하면 해당 scout의 player 정보를 null로 수정한다.

scout.setMember(null);

sService.updateScout(scout);

}

else{

map.put("status", 300);

}

catch(Exception e){

e.printStackTrace();

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

}

return map;

}

계약

player19 선수의 몸 값, 소속팀을 변경한다.

1. 현재 player19의 몸 값(1000), 소속팀(1) 확인

player19

2. postman에서 계약 구현

1계약 구현

3. db 확인

3-1. 선수 정보 수정 확인

선수 정보 수정 성공

3-2. scout 목록에 member 정보 수정, contract 저장 확인

scout 정보 수정 성공

contract 저장 확인

47. 계약(화면 구현)

uni5948 — Mon, 7 Feb 2022 14:35:31 +0900

47. 계약(화면 구현)

스카우터 목록 1개를 조회한 뒤 해당 선수와 계약한다.

스카우터 목록 1개 조회 페이지 수정

1. 선수 정보 불러오기, 계약하기 버튼 생성(Scout_One)

<div>

{{sno}} <br />

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

선수 이름 <input type="text" v-model="player.playername" readonly> <br />

선수 나이 <input type="text" v-model="player.playerage" readonly>세 <br />

선수 몸 값 <input type="text" v-model="player.playerprice" >\ <br />

선수 신장 <input type="text" v-model="player.playerheight" readonly>cm <br />

선수 몸무게 <input type="text" v-model="player.playerweight" readonly>kg <br />

선수 포지션 <input type="text" v-model="player.playerposition" readonly> <br />

선수 국적 <input type="text" v-model="player.playercountry" readonly> <br />

선수 소속 팀 <select v-model="team">

</option>

</select> <br />

선수 에이전트 <input type="text" v-model="agent.agentname" readonly> <br />

<hr />

<el-button type="danger" @click="handleDelete" plain>목록 삭제</el-button>

<el-button type="primary" @click="handleContract" plain>계약하기</el-button>

</div>

</template>

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.player = response.data.scout.player;

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

//팀 목록 조회

const url2 = "/REST/teamall";

const response2 = await axios.get(url2, {headers});

console.log(response2);

this.teams = response2.data.team;

methods:{

async handleDelete(){

const result = confirm("스카우트 목록에서 삭제하시겠습니까?");

console.log(result);

if(result){

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

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

token : this.token};

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

console.log(response);

alert("삭제되었습니다.");

this.$router.push({name:'ScoutList'}); //성공 시 ScoutList로 이동

}

else{

alert("취소되었습니다.");

}

async handleContract(){

}

data(){

return{

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

token : sessionStorage.getItem("TOKEN"),

sno : this.$route.query.sno,

scout : '',

player : '',

team : '',

agent : '',

teams : []

}

</script>

</style>

선수 정보 불러오기, 계약하기 버튼 생성

46. 스카우트 목록 삭제

uni5948 — Sat, 5 Feb 2022 11:15:23 +0900

46. 스카우트 목록 삭제

23. 스카우터 목록 삭제 연동

삭제 버튼 생성

<div>

{{sno}} <br />

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

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

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

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

<hr />

<el-button type="danger" @click="handleDelete" plain>목록 삭제</el-button>

</div>

</template>

삭제 버튼 생성

삭제 구현

1. 백엔드 연동

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;

methods:{

async handleDelete(){

const result = confirm("스카우트 목록에서 삭제하시겠습니까?");

console.log(result);

if(result){

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

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

token : this.token};

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

console.log(response);

alert("삭제되었습니다.");

this.$router.push({name:'ScoutList'}); //성공 시 ScoutList로 이동

}

else{

alert("취소되었습니다.");

}

data(){

return{

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

token : sessionStorage.getItem("TOKEN"),

sno : this.$route.query.sno,

scout : '',

playername : '',

playerage : '',

playerprice : ''

}

</script>

</style>

2. 삭제하기

2-1. 삭제 버튼 클릭 시 삭제 여부 확인 알림창 호출

삭제 버튼 클릭 시 삭제 여부 확인 알림창 호출

2-2. 삭제 성공

삭제 성공

2-3. 삭제 후 스카우트리스트 페이지로 자동 이동

삭제 후 스카우트리스트 페이지로 자동 이동