게시글 수정 (7)

게시글 수정은 작성페이지 사용

수정상세페이지

router.js

{
    path: "/writer/:id",
    component: BoardWriter,
  }

BoardDetail.vue

    <button type="button" class="btn btn-outline-primary"   @click="updateBtn(this.id)">수정</button>

   updateBtn(id){
            this.$router.push(`/writer/${id}`);
        }
        

BoardWriter.vue
id값 먼저 받아주고 mounted될때 게시글 불러주고
받아온값 다 넣어주기 v-model로

data() {
        return {
            id : this.$route.params.id,
            title : '',
            content : '',
            writer : '',
        }
    },


   mounted() {
        if(this.id){
            this.getBoard(this.id);
        }
    },
    
    methods: {
        getBoard(id){
            axios.get(`/api/detail/${id}`)
            .then(result=>{
                this.title = result.data.title;
                this.content = result.data.content;
                this.writer = result.data.writer;
            });

        },

수정

버튼은 id가 있으면 수정
없으면 등록

<button type="button" class="btn btn-outline-primary" @click="updateBtn" v-if="$route.params.id">수정</button>  
<button type="button" class="btn btn-outline-primary" @click="insertBtn" v-else>등록</button>


 updateBtn(){
            axios.patch(`/api/update/${this.id}`,{
                title:this.title,
                content:this.content,
                writer :this.writer,
            }).then(()=>{
                this.$router.push('/');
                alert("수정완료");
                
            })

        }

controller

 @PatchMapping("/update/{id}")
    public ResponseEntity<Integer> updateBoard(@PathVariable Long id,
    	@RequestBody Map<String, Object> inMap){
    	
    	log.debug("inMap" +inMap);
    	
    	Map<String, Object> dataMap = new HashMap<String, Object>();
    	dataMap.put("id", id);
    	dataMap.put("title", inMap.get("title"));
    	dataMap.put("writer", inMap.get("writer"));
    	dataMap.put("content", inMap.get("content"));
    	
    	int result = boardservice.updateBoard(dataMap);
    	
    	if (result == 1 ) {
			 return new ResponseEntity<Integer>(result, HttpStatus.OK);
		 }else{
			 return new ResponseEntity<Integer>(HttpStatus.INTERNAL_SERVER_ERROR);
		 }
   	
    }

✅수정완료