본문 바로가기
728x90

개발39

[Vue] Vue.js 게시판 만들기 8 - 게시글 생성, 수정, 삭제 게시글 생성 (CREATE) 게시글 생성 부터 진행해보도록 하겠습니다. BoardList.vue 에서 등록 버튼을 누르면 fnWrite 함수를 호출하도록 작업했습니다. vue-router에서 생성 화면으로 연결하고 저장까지 진행해보겠습니다. router/index.js에 먼저 write로 이동할 수 있게 추가합니다. import { createRouter, createWebHistory } from 'vue-router' import PageHome from '@/views/PageHome.vue' import BoardList from '@/views/board/BoardList.vue' import BoardDetail from '@/views/board/BoardDetail.vue' import B.. 2022. 3. 3.
[Vue] Vue.js 게시판 만들기 7 - 게시글 상세보기 게시글 상세보기 게시판 목록에서 제목을 클릭하면 해당 게시글의 내용을 상세보기 화면에 출력해보겠습니다. 게시글 제목을 눌렀을때 호출할 fnView 함수를 views/board/BoardList.vue에 생성합니다. 추후에 사용할 fnWrite와 fnPage 함수도 미리 만들어둡니다. /* views/BoardList.vue */ 게시글의 상세화면을 출력할 BoardDetail.vue 파일을 views/board 디렉토리 안에 생성합니다. 수정 삭제 목록 {{ title }} {{ author }} {{ created_at }} {{ contents }} 수정 삭제 목록 생성한 화면을 vue-router에 연결시켜줍니다. import { createRouter, createWebHistory } from .. 2022. 3. 1.
[Vue] Vue.js 게시판 만들기 6 - 게시판 목록 출력 서버에서 게시글 가져와서 출력하기 이전 시간에 작업한 서버를 호출하여 게시글을 가져와 화면에 출력하겠습니다. 서버와 통신할 수 있도록 npm을 통해 axios를 설치합니다. npm install --save axios 프로젝트에서 사용할 수 있도록 main.js에 추가합니다. 추가로 전역설정을 작업합니다. /* main.js */ import './assets/common.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' const app = createApp(App) app.config.globalProperties.$axios = axi.. 2022. 2. 28.
[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.
728x90

티스토리툴바