본문 바로가기
728x90

분류 전체보기52

[Vue] Vue.js 게시판 만들기 5 - 게시판 데이터 만들기 (Springboot) 게시판 목록 데이터 만들기 vue-frontboard에서 보여줄 데이터 목록을 생성합니다. resources 아래에 import.sql 파일을 생성하고 아래 내용을 붙여넣습니다. /* import.sql */ INSERT INTO BOARD (IDX, TITLE, CONTENTS, AUTHOR, CREATED_AT) VALUES (1, '게시글 제목1', '게시글 내용1', '작성자1', '2022-02-18 23:24:00'); INSERT INTO BOARD (IDX, TITLE, CONTENTS, AUTHOR, CREATED_AT) VALUES (2, '게시글 제목2', '게시글 내용2', '작성자2', '2022-02-18 23:24:00'); INSERT INTO BOARD (IDX, TITLE.. 2022. 2. 28.
[Vue] Vue.js 게시판 만들기 4 - 게시판 목록 화면 구성 게시판 컴포넌트 생성 게시판 목록을 표시할 컴포넌트를 추가하겠습니다. views 아래에 board 디렉토리와 그 안에 BoardList.vue 파일을 생성합니다. 등록 No 제목 작성자 등록일시 {{ row.idx }} {{ row.title }} {{ row.author }} {{ row.created_at }} >> 게시판을 클릭하면 목록이 나타나도록 vue-router에 연결해야합니다. router/index.js 파일을 열고 BoardList.vue를 추가합니다. import { createRouter, createWebHistory } from 'vue-router' import PageHome from '@/views/PageHome.vue' impor.. 2022. 2. 28.
[Vue] Vue.js 게시판 만들기 3 - 레이아웃 분할 Frontboard 레이아웃 분할 프로젝트 레이아웃을 header / contents / footer로 분할하고 header에 페이지를 이동할 수 있는 버튼을 추가하겠습니다. 먼저 App.vue 파일을 열어 프로젝트 레이아웃을 분할하고 헤더와 푸터로 사용할 컴포넌트등을 추가합니다. src/components/아래에 PageHeader.vue 와 PageFooter.vue 파일을 생성합니다. Home | About | 게시판 여기는 footer 자리입니다. 서버를 부팅하고 화면을 확인합니다. npm run serve 페이지 이동 구현 (Vue-router) 페이지 이동을 지원하는 vue-router를 설치합니다. npm i --save vue-router src/router 폴더를 생성하고 index.js.. 2022. 2. 21.
[Vue] Vue.js 게시판 만들기 2 - Backend 프로젝트 생성 이전 포스팅에 이어서 이번에는 Backend 프로젝트를 생성합니다. Backend 프로젝트 생성 개발Tool은 인텔리제이 커뮤니티 버전을 사용합니다. spring.io에서 프로젝트를 생성합니다. Add Dependencies를 눌러 Lombok과 Spring Web을 선택하고 Generate를 눌러 프로젝트를 다운로드 받습니다. 다운로드 받은 프로젝트를 작업 폴더에 압축 해제합니다. 인텔리제이에서 해당 폴더를 Open합니다. build.gradle을 열어 dependencies의 내용을 아래 소스로 변경하고 Gradle Refresh를 진행합니다. dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' im.. 2022. 2. 21.
728x90