[Node.js + Vue.js] 게시판 만들기 1. 설계 & 결과

프로젝트 전체 코드 ( 추가되는 기능 포함 )

https://github.com/Changbum97/Vue-Node-Board

GitHub - Changbum97/Vue-Node-Board

설계

구현할 기능

• Front Server, Back Server 구분 ( 서버 2개 필요 )
• 게시판 1, 2, 3 생성
• 메인화면에선 게시판 1, 2, 3으로 이동할 수 있음
• 게시판에 들어가면 각 게시판에 해당하는 글 리스트 조회 가능
• 글 작성 기능
• 글을 클릭하면 그 글의 내용을 볼 수 있고, 수정, 삭제 가능
• 페이징 기능 구현
  • 이전페이지, 다음페이지 이동 기능, 현재 어느 페이지인지 확인 가능
• 현재 게시판에 총 몇개의 글이 있는지 확인 가능

Front Server

• Vue.js 사용 ( + Vuetify )
• 주소 : http://127.0.0.1:8080
• 메인화면(Main), 게시판(Board), 글 보기 및 수정(Content), 글 작성(Write) 페이지 필요
• params 속성으로 게시판 구분, query 속성으로 페이지 구분 ( http://127.0.0.1:8080/board/1/?page=1 )
• 게시판 화면은 table로 표현, 글 클릭시 글 보기 및 수정 페이지로 이동
• 글 작성할 때, 게시판 구분 필요
  • params 속성으로 구분 => http://127.0.0.1:8080/board/1/write
• 글 보기 및 수정 할 때, 게시판 구분 필요, 글(Content)의 id 필요
  • params 속성과 query 속성으로 구분 => http://127.0.0.1:8080/board/1/content?id=1
• 글이 10개 이상이면 다음 페이지로 넘겨야 됨
• 총 페이지 및 현재 페이지 계산
• 버튼으로 각 페이지간 이동 + 글 작성, 삭제 시 페이지 이동
• 첫번째 페이지, 마지막 페이지에서는 더 이동 못하게 해야됨

Back Server

• Node.js의 express 사용
• 주소 : http://127.0.0.1:52273/content
• Sequelize를 이용한 DB와 연결
• 새 글 작성 : http://127.0.0.1:52273/content/write
• 게시판 들어갔을 때, 게시판에 맞는 최대 10개의 글 골라서 불러오기 : http://127.0.0.1:52273/content/boardlist
• 글에 들어갔을 때, 글 정보 불러오기 : http://127.0.0.1:52273/content/content
• 글 삭제 기능 : http://127.0.0.1:52273/content/delete
• 글 수정 기능 : http://127.0.0.1:52273/contnet/edit

DataBase

• MySQL 사용
• DB명 : board
• Table명 : content ( 테이블 하나 사용 )
• writer(작성자), title(제목), text(글내용), boardnum(게시판번호) 필드 생성
• Sequelize 사용으로 인해 id, createdAt, updatedAt 자동 생성

결과

• Front Server 구현 코드 및 설명
• Back Server 구현 코드 및 설명

메인 페이지

게시판 리스트 페이지

글 작성 페이지

글 작성 후 게시판 리스트 페이지

글 수정 페이지

게시판 리스트 페이지 (페이징)