vue.js [게시판 글 쓰기]

지난번 글 제목을 클릭하여 상세페이지를 띄우는 단계까지 진행하였고

Home화면의 게시판에 글을 작성하는 기능을 추가하였다.

 

 

 

 

우선 /Home에서 게시판의 상단에 글 쓰기 버튼을 추가하여 글쓰기 버튼을 누르면 boardWrite로 이동하여

글 작성을 할 수 있게한다.

 

 

 

 

 

 

 

linkTo 함수를 만들고 클릭하면 넘어 갈수 있도록 만들었다.

 

 

 

 

 

 

 

 

 

 

BoardWtite로 넘어가도록 link1 선언

 

 

 

 

 

 

 

 

 

 

 

 

기존에는 router-link를 사용하였는데 linkTo함수를 만들어서 linkTo안에 data를 넣고 

여러개의 버튼을 추가 할때마다 간단하게 사용할 수 있도록 link1선언 후 BoardWrite를 넣음.

결국 linkTo의 data안에는 link1이 들어가게 된다.

 

 

 

 

 

 

BoardWrite.vue에서 이제 글을 추가할 수 있는 기능이 있도록 작성자, 비밀번호, 제목, 내용을 넣을 수 있는 텍스트를 만들고 그 밑에 글쓰기, 취소 버튼을 만들었다. 

 

 

 

<template>
  <div>
    <h1>게시판 등록</h1>

    <div class="AddWrap">
      <form>
        <table class="tbAdd">
          <colgroup>
            <col width="15%" />
            <col width="*" />
          </colgroup>
          <tr>
            <th>작성자</th>
            <td><input type="text" v-model="author" ref="author" /></td>
          </tr>
          <tr>
            <th>비밀번호</th>
            <td><input type="password" v-model="password" ref="password" /></td>
          </tr>
          <tr>
            <th>제목</th>
            <td><input type="text" v-model="subject" ref="subject" /></td>
          </tr>
          <tr>
            <th>내용</th>
            <td><textarea v-model="content" ref="content"></textarea></td>
          </tr>
        </table>
      </form>
    </div>

    <div class="btnWrap">
      <v-btn @click="write">글 쓰기</v-btn>
      <v-btn @click="linkTo(link1)">취소</v-btn>
    </div>
  </div>
</template>

 

template안에 글쓰기를 클릭하면  write메서드가 실행되도록, 취소 버튼을 클릭하면 linkTo 메서드 실행-> 원래의 글목록 페이지로 돌아가도록 구현하였다.

 

 

 

 

 

 

 

 

 

 

 

script에서 반환받을 변수들을 선언한 모습

 

 

 

 

 

 

 

 

 

 

 

methods: {
    linkTo(data) {
      this.$router.push({name: data})
    },

    write() {
      let data = {}
      data.author = this.author
      data.content = this.content
      data.subject = this.subject
      data.password = this.password

         this.$axios.post("board/", JSON.stringify(data), {
            headers: {
              "Content-Type": `application/json`,
            },
          }).then((res)=>{
              if(res.data.success) {
                alert('등록되었습니다.');
                this.linkTo(this.link1);
              } else {
                alert("실행중 실패했습니다.\n다시 이용해 주세요");
              }
            })
            .catch((err)=>{
              console.log(err);
            })

    },


  }
}

</script>

 

 

우선 linkTo함수를 다시 만들고 link1에 Home을 담아 취소 버튼 클릭시 Home으로 이동하도록하는 메서드 구현.

 

 

write함수를 만들어 body안에 넣어줄 data를 list로 만들어 db안의 NotNull 값들인 (author, content, subject, password)

를 data안에 넣어 주었다.

 

 

글쓰기이기 때문에 post를 쓰고 키, 값쌍의 형태이기 때문에 JSON.stringfy를 꼭 넣어줘서 data를넘겨줘야 하고

헤더에 content-type이 json이라는 것을 명시해주어야 한다.

 

데이터를 성공적으로 받게 되면 '등록되었습니다.'알림이 뜨고 글목록으로 돌아가도록 if문을 만들어서 구현하였다. 

 

 

 

 

 

 

 

 

 

 

글이 잘 등록 되는지 확인해 보았다.

 

 

 

 

 

 

 

 

글쓰기 버튼 클릭

 

 

 

 

 

 

 

 

 

글이 성공적으로 잘 등록이 된것을 볼 수있다!