본문 바로가기

전체 글

 (268)
15. 결제와 환불 (아임포트 모듈 사용) 결제가 성공하면 4번으로 -> 결제가 실패하면 2번에서 생성한 주문번호를 삭제 후 홈으로 4. Spring으로 결제정보를 넘겨서 처리 5. 처리 후 다시 Vue로 결과 전송 결제 시연영상은 아래로 들어가기 전 테이블 컬럼 정보 1. order @Id @Column(name = "orderId") private long orderId; //1. 주문번호 @Column(unique = true) private long mid; //2. 사용자 id private String buyerName; private String postcode; //3. 우편번호 private String addr; //4. 주소 private String detailAddr; //5. 상세주소 private String phone..
14. 마이페이지-2 (댓글 관리와 개인정보 수정) 1. 댓글관리 (Comment Entity) https://dwc04112.tistory.com/172 11. 책 상세보기 미리미리 정리해뒀어야 했는데... 도서 사이트를 완성하고 이제서야 작성한다 책 상세보기에는 아래 사진과 같이 1. 책 정보 2. 책 소개, 목차, 출간자 서평 3. 해당 책 댓글 4. 우측 네비게이 dwc04112.tistory.com 상세보기에서 제공하는 정렬과, 책 상세보기에서와 같은 동작을 하는 그래프이다. 댓글목록의 우측 상단 X버튼을 통해 해당 댓글을 삭제 가능하다. (MyComment 의 Vue-Script) //댓글 삭제 deleteComment(){ let cid = this.setCid this.$axios.delete("comment/" + cid) .then(re..
13. 마이페이지-1 (장바구니, 위시 리스트, 주문목록) 마이페이지의 router - index 들어가기 전 마이페이지는 로그인을 진행 후 들어갈수 있는 페이지라서 해당 페이지에 접속하면? 네비게이션 가드의 beforeEach를 호출하고 대기상태가 된다. { path: '/my', component: () => import('@/views/mypage/My'), meta: { auth: true, //는 경로가 로그인 할 필요가 있음을 나타낸다 }, children:[ { path: 'wish', name: 'WishList', component: () => import('@/views/mypage/WishList'), }, { path: 'comment', name: 'MyComment', component: () => import('@/views/mypag..
12. Vuex Store ( 로그인 회원정보와 주문정보 Store ) index.js import Vue from 'vue'; import Vuex from "vuex"; import createPersistedState from 'vuex-persistedstate' import toOrderStore from "@/store/modules/toOrderStore"; import member from "@/store/modules/member"; Vue.use(Vuex); export const store = new Vuex.Store({ modules: { member : member, toOrderStore : toOrderStore, }, plugins: [createPersistedState({ paths: ["member","toOrderStore"] })] }..
11. 책 상세보기 미리미리 정리해뒀어야 했는데... 도서 사이트를 완성하고 이제서야 작성한다 책 상세보기에는 아래 사진과 같이 1. 책 정보 2. 책 소개, 목차, 출간자 서평 3. 해당 책 댓글 4. 우측 네비게이션 5. 하단 책 추천 으로 나눌 수 있다. (책 상세보기의 Vue - script코드) 1 ,2 책 정보 위 코드는 책 세부정보의 Vue - 스크립트 부분이다 mounted로 책 정보를 불러온 후 정보들을 가공한다. 불러온 정보가 책 정보, 목차, 서평, 세부정보가 된다 3. 책 댓글 컴포넌트 (댓글 컴포넌트의 Vue - script코드 코드) export default { name: "CommentComponent", props : ["selectBid"], data: function (){ return{ ..
book Store (Spring boot + Vue.js ) GitHub https://github.com/dwc04112/BookStoreApi GitHub - dwc04112/BookStoreApi Contribute to dwc04112/BookStoreApi development by creating an account on GitHub. github.com 시연영상 1 시연영상 2 bookStore 웹 페이지가 드디어! 완성되었고 블로그에는 따로 정리를 못했지만 이전에 비해 엄청 다양한 기능이 추가되었다. (양이 너무많아서 어떻게 정리를 해야할지 모르겠다...) 하나하나 gif로 딸 수 없어서 동영상으로 동작화면을 찍어야겠다.. 전체 기능들을 간단히 설명해보면 1. 책 ( 회원이 아니더라도 사용 가능한 부분) 1-1 : 메인페이지 ( url path : ..
10 . 검색과 자동완성 코로나와 기사시험 필기 준비로 인해 블로그 작성을 하지 못했다.. 4월 24일에 필기시험이 끝났는데 실기는 7월 말이라고 한다. ( 기다리기도 힘들다.. ) 이제 시험도 끝났고 다시 bookStore 만들기를 진행하겠다. 이번 글에서는 자동완성 기능의 동작 방법을 간단하게 설명한다. 자동완성 기능 vuetify에서 제공하는 v-autocomplete도 있지만 검색어가 남지 않는다던가 데이터 바인딩, 디자인 등 원하는대로 구현하기 힘들어서 직접 만들었다. ( 그리고 bookStore 페이지를 조금 꾸며줬다. 이게 제일 힘들었음... ) 텍스트 필드에 입력 값을 vue watch에서 감지하여 계속 서버와 통신한다. 자세한 내용은 아래에. Vue - template // 여기는 검색어를 입력하는 곳 // 여기..
9. 도서 위시리스트 위시리스트 구현 동작 DB Springboot Vue.js 1. 위시리스트 동작 책 추가 , 책 삭제, 카테고리 삭제, 카테고리 추가 사진1. 각각의 책 card에 있는 위시리스트 추가 버튼을 누르면 다음과 같은 나의 위시리스트 다이얼로그 표시 (Dialog = true) 사진2. 나의 위시리스트 다이얼로그에는 로그인된 정보에 해당하는 위시리스트 카테고리들이 출력된다. 카테고리를 선택하면 사진1. 에서 선택한 책번호(bid)를 등록하겠냐는 문구가 출력 -> 사진3. 사진3. 등록버튼을 누르면 정보(책 번호, 선택한 카테고리)가 Springboot 로 넘어간다 Springboot 에서는? 1. 선택한 카테고리에서 해당 책 번호가 있는지 확인 -> 있다면 사진4. 2. 없다면 새로운 카테고리 번호(Title..

티스토리툴바