41. 리뷰 목록
- 백엔드 선수 번호 별 리뷰 숫자 조회 추가
1. 리뷰 저장소(ReviewRepository)
//선수 번호 별 리뷰 숫자 조회
Long countAllByPlayer_Playerno(Long playerno);
2-1. 리뷰 서비스(ReviewService)
//선수 번호 별 리뷰 숫자 조회
public Long getReviewByPlayernoCount(Long no);
2-2. 리뷰 서비스(ReviewServiceImpl)
//선수 번호 별 리뷰 숫자 조회
@Override
public Long getReviewByPlayernoCount(Long no) {
return rRepository.countAllByPlayer_Playerno(no);
}
3. 리뷰 컨트롤러(ReviewController)
// 선수 번호 별 리뷰 숫자 조회
//127.0.0.1:8080/REST/pnoreviewcount?pno=
@RequestMapping(value = "/pnoreviewcount", method = {RequestMethod.GET},
consumes = MediaType.ALL_VALUE,
produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Object> pnoreviewcountGET(Review review,
@RequestParam(value = "pno")long pno) {
Map<String, Object> map = new HashMap<>();
try{
Long reviewcount = rService.getReviewByPlayernoCount(pno); //선수 번호 별 리뷰 수 조회
map.put("status", "200");
map.put("count", reviewcount );
}
catch(Exception e){
e.printStackTrace();
map.put("status", e.hashCode());
}
return map;
}
4. 선수 번호 별 리뷰 숫자 조회
- 프론트엔드
1. 리뷰 목록 생성, 페이지네이션 추가
<hr />
<input type="hidden" v-model="text"
placeholder="검색" @keyup.enter="handleSearch" />
<table border="1">
<tr>
<td>리뷰</td>
<td>평점</td>
</tr>
<tr v-for="review in reviews" v-bind:key="review">
<td>{{review.content}}</td>
<td>{{review.rating}}/10</td>
</tr>
</table>
<el-pagination
background layout="prev, pager, next" :total="totalpage"
@current-change="handleCurrentChange">
</el-pagination>
2. 백엔드 연동(선수 번호 별 리뷰 조회, 선수 번호 별 리뷰 숫자 조회)
<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;
},
async handleReview() {
//유효성 검사
if(this.content.length === 0){
alert("리뷰 내용을 입력하세요.");
}
else{
const url = `/REST/reviewinsert?pno=${this.no}`;
const headers = {"Content-Type":"application/json",
token : this.token};
const body = {content : this.content, rating : this.rating};
if(this.token != null){
const response = await axios.post(url,body,{headers});
// console.log(response);
if(response.data.status === 200){
alert("리뷰 등록에 성공했습니다.");
}
}
else{
alert("로그인 후 이용 가능합니다.");
this.$router.push({name:'Login'}); // 로그인 화면으로 이동
}
}
},
//페이지 이동
async handleCurrentChange(val){
this.page = val;
await this.handleSearch();
},
async handleSearch() {
const url = `/REST/pnoreview?page=1&pno=${this.no}`;
const headers = {"Content-Type":"application/json"};
const response = await axios.get(url,{headers});
console.log(response);
this.reviews = response.data.review;
const url1 = `/REST/pnoreviewcount?pno=${this.no}` //선수 별 리뷰 숫자 조회 주소 입력
const response1 = await axios.get(url1);
console.log(response1);
//선수 별 리뷰 숫자를 통해 페이지네이션 숫자 생성
this.totalpage = Number(response1.data.count);
},
},
async created(){
await this.handleSearch();
},
data(){
return {
player : '',
playerimg : '',
no : this.$route.query.no,
reviews : [],
page : 1,
totalpage : 0,
text : '',
//세션 스토리지에서 토큰 읽기
token : sessionStorage.getItem("TOKEN"),
content : '',
rating : 0
}
},
async mounted(){
await this.handleContent();
}
}
</script>
3. 화면 확인
'프로젝트' 카테고리의 다른 글
| 43. 스카우트 목록 추가 (0) | 2022.01.26 |
|---|---|
| 42. 선수 등록 (0) | 2022.01.25 |
| 40. 리뷰 등록 (0) | 2022.01.23 |
| 39. 상세 페이지 수정(element) (0) | 2022.01.22 |
| 38. 상세 페이지 (0) | 2022.01.22 |