본문 바로가기
728x90

Vue.js15

[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.
[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.
728x90

티스토리툴바