728x90 개발/게시판 만들기21 [Vue] Vue.js 게시판 만들기 9 - 페이징 페이징 데이터 생성 먼저 백엔드에서 페이징 작업을 진행하겠습니다. model 패키지를 생성하고 Header.java와 Pagination.java 클래스를 생성합니다. /* Header.java */ import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import java.time.LocalDateTime; @Data @AllArgsConstructor @NoArgsConstructor @Builder public class Header { private LocalDateTime transactionTime; private String resultCode; pr.. 2022. 3. 3. [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. 이전 1 2 3 4 5 6 다음 728x90
