vue를 이용해 게시판 기능 만들기

오랜만에 vue를 이용해서 프로젝트를 하나 만들어 보려니까 가물가물해서 유튜브 강의를 보면서 빠르게 복기시켜보려 한다!

'개린이르라나' 님의 vue.js로 게시판 만들기를 보면서 만들었다.

vue-cli를 이용해서 프로젝트를 생성했더니 기본적인 틀은 자동으로 만들어준다.

components 폴더

Read.vue

게시판의 메인(루트)이 될부분!  게시글 목록을 보여준다.

 

write()는 새로운 글을 작성할 메소드.

path가 create로 향하도로 해준다.

 

detail()는 상세페이지.

어떤 글을 클릭해서 그 글의 상세페이지를 보여주기 위해 index를 인자로 보내준다.

 

write메소드는 인자전달 없이 create페이지로 이동하기 때문에 path를 사용하였고, detail메소드는 인자를 전달하기 때문에path가 아닌 name을 사용하고, 보내줄 파라미터인 index를 contentId라는 이름으로 보내주었다. 

 

 

 

 

Detail.vue

글의 상세페이지이다.

read 페이지에서 보낸 파라미터 index를 받아서 사용한다.

여기서는 수정과 삭제가 가능하다. 

deleteData()는 삭제 메소드이다.

splice함수를 이용해서 해당 페이지의 데이터를 삭제시켜준다. 삭제가 완료되면 경로를 메인페이지인 read페이지로 향하도록 해준다.

 

updateData()는 글을 수정하는 메소드이다.

글을 작성할 때와 비슷하기 때문에 해당 페이지의 index를 

create 페이지로 보내 수정할 수 있도록 해준다. 

 

 

 

 

 

 

 

 

 

create.vue

read.vue에서 글쓰기를 작성하거나, detail.vue에서 글쓰기를 수정할때 ceate.vue로 이동한다!

 

index !== undefined ? update() : write() 

인덱스가 undefined가 아니라면! (즉 index가 존재한다면!) updeate() 를 해주고 그게 아니라면 write()를 해줘라!

 

삼항 연산자를 이용해서 index값이 들어왔는지 안들어왔는지에 따라 새로운 글을 작성하는 것인지 글을 수정하는것인지 구분 해 줄 수 있다.

 

 

write() 새로운 글을 작성하는 메소드.

v-model을 이용해 사용자가 입력한 글을 바인딩 될 수 있도록 했다. 입력한 글을 각각 데이터에 넣어준다.

 

update() 글을 수정하는 메소드. 

write메소드와 비슷하다. 원래 있던 내용을 수정 시켜준다.    

 

 

 

 

 

 

 

 

 

 

Data의 index.js

data\index.js

Router의 index.js

Create경로 설정에서, '/create/:contentId?' 라고 해줬는데, 

create는 파라미터가 없으면 글 새로 작성, 있으면 수정으로 구분해주었었다.

그렇기때문에 그냥 :contentId라고 해주면 글을 작성할 때 페이지가 뜨지 않는다.

그래서 ?을 달아주어, 없으면 없는데로 있으면 있는데로 해줘라~ 라고 해줄 수 있다고 한다!!!! 

 

결과

read.vue / 메인 페이지

create 페이지

글 작성 성공 

 

detail 페이지

글 수정하기

글 삭제하기

다음은 부트스트랩을 이용해서 게시판을 만들 예정이다.

강의가 짧고 설명도 간단하지만 쉽게 설명해주셔서 정리가 되는 기분이다.

빠르게 강의 끝내고 내 프로젝트 만들어 봐야지!! 

 

https://www.youtube.com/watch?v=s1lXVr65KZg&list=PLyjjOwsFAe8ITIDUNsU_x4XNbPJeOvs-b