Vue 일지 #16 (20210928) spring 연동(삭제, 수정)
16. 삭제, 수정
-삭제 백엔드
*board_delete delete 생성(ApiController.java)
// 삭제
// 127.0.0.1:8080/ROOT/api/board_delete?no=번호
@RequestMapping(value = "/board_delete", method = {
RequestMethod.DELETE }, consumes = MediaType.ALL_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Long> boardDelete(@RequestParam(name = "no") long no) {
Map<String, Long> map = new HashMap<>();
try {
bRepository.deleteById(no);
map.put("result", 1L);
} catch (Exception e) {
e.printStackTrace();
map.put("result", 0L);
}
return map;
}
*삭제하기(포스트맨)
-삭제 프론트엔드
*삭제 구현하기(Menu4.vue)
... ...
<a href="#" @click="handleDelete()">삭제</a>
... ...
async handleDelete(){ //삭제
const url = `ROOT/api/board_delete?no=${this.no}`;
const headers = {"Content-Type":"application/json"};
const response = await axios.delete(url, {headers});
console.log(response.data);
if(response.data.result === 1){
await this.handleDelete();
alert("삭제완료");
this.$router.push({name: 'Menu1'});
}
},
... ...
*삭제하기
-수정 백엔드
*board_update put생성(ApiController.java)
// 수정
// 127.0.0.1:8080/ROOT/api/board_update
@RequestMapping(value = "/board_update", method = {
RequestMethod.PUT }, consumes = MediaType.ALL_VALUE, produces = MediaType.APPLICATION_JSON_VALUE)
public Map<String, Long> boardUpdate(@RequestBody Board board) {
Map<String, Long> map = new HashMap<>();
try {
Board board2 = bRepository.findById(board.getNo()).get();
board.setImage(board2.getImage());
board.setImagename(board2.getImagename());
board.setImagetype(board2.getImagetype());
board.setImagesize(board2.getImagesize());
bRepository.save(board);
map.put("result", 1L);
} catch (Exception e) {
e.printStackTrace();
map.put("result", 0L);
}
return map;
}
*수정하기(포스트맨)
-수정 프론트엔드
*수정 구현하기(Menu4.vue)
**바로 수정될 수 있도록 text type으로 수정한다.
글번호 <input type="text" v-model="item.no" readonly /><br />
제목 <input type="text" v-model="item.title" ><br />
내용 <input type="text" v-model="item.content" ><br />
작성자 <input type="text" v-model="item.writer" ><br />
조회수 <input type="text" v-model="item.hit" ><br />
등록일 <input type="text" v-model="item.regdate" readonly ><br /><br />
<img :src="`${imageurl}`" style="width:50px;height:50px" />
... ...
<a href="#" @click="handleUpdate()">수정</a>
... ...
async handleUpdate(){ //수정
const url = `ROOT/api/board_update`;
const headers = {"Content-Type":"application/json"};
const body ={
no : this.item.no,
title : this.item.title,
content : this.item.content,
writer : this.item.writer,
hit: this.item.hit
};
const response = await axios.put(url,body, {headers});
console.log(response.data);
if(response.data.result === 1){
//await this.handleContent();
alert("수정완료");
this.$router.push({name: 'Menu1'});
}
}
... ...
*수정하기
