728x90 Vue.js15 [Vue] Vue.js 게시판 만들기 11 - 로그인 화면 만들기 안녕하세요. 이전에 작성한 Vue.js 게시판 만들기를 정말 많은 분들이 찾아봐주셨습니다. 이번 포스팅부터는 로그인과 댓글 기능을 구현하면서 게시판 이외에도 실습해볼 수 있는 샘플 프로젝트를 만들어보려 합니다. 이전의 프론트엔드와 백엔드 프로젝트를 사용하므로 전의 포스팅들을 참고해주세요. (이후 포스팅부터는 챕터별로 브랜치를 업로드할 예정이며, 이번 포스팅까지의 화면 소스는 vue-frontend의 chap11 브랜치에 업로드 되어있습니다.) 로그인 화면 생성 우선 로그인을 진행할 화면을 만들도록 하겠습니다. vue-frontboard 프로젝트를 열고 views 폴더 아래로 common 폴더와 안에 Login.vue 파일을 생성합니다. 로그인 화면 소스를 간단하게 작성합니다. Please Log In L.. 2022. 6. 21. [Vue] Vue.js 게시판 만들기 10 - 게시글 검색 (with QueryDSL) Backend 게시글 검색 구현 게시글을 가져올 때, 검색 정보가 있으면 해당 정보로 검색된 리스트를 가져와야 하고 없으면 기본적인 리스트를 가져와야 합니다. 즉, 검색 정보가 Null인지 아닌지, Null이 아니라면 어떤 키의 데이터를 가져올지 만들어주어야 합니다. 쿼리를 직접 만들수도 있고, JPA + QueryDSL을 통해 자바 클래스와 메서드를 조작하는 방식으로 작업할 수 있습니다. 이번 포스팅은 JPA + QueryDSL을 통해 데이터를 가져오는 방법으로 진행해보겠습니다. 먼저 build.gradle에 QueryDSL과 관련된 부분을 추가합니다. plugins { id 'org.springframework.boot' version '2.6.3' id 'io.spring.dependency-man.. 2022. 3. 7. [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. 이전 1 2 3 4 다음 728x90
