Vue.js29 vue.js [상세 페이지 불러오기] 데이터 테이블을 만들어 게시판을 불러오는 것 까지 성공하였고 이번에는 글 제목을 클릭하면 상세 페이지로 넘어가서 상세 내용을 나타내도록 구현해 보았다. url은 /Home -> Board로 넘어가도록 하였다. 상세 페이지의 내용에는 아이디 : 작성자 : 제목 : 내용 : 글쓴 날짜 : 글쓴 시간 : 위의 양식으로 나타나도록 구현할 예정이다. 우선 router-link를 걸어 query로 받아와서 보여주도록 하였다. 글 제목을 클릭하면 페이지가 넘어가도록 해준다. name : Board, query : {id: item.id} 입력후 Home에 들어가보면 item의 subject인 글 제목에 하이퍼링크 처럼 파란색으로 글씨가 바뀐 것을 볼 수 있다. 링크를 누르면 Board로 넘어가기 때문에 Board에 .. 2022. 5. 26. vue.js [게시판 불러오기] Spring boot 와 연동된 데이터를 vue.js로 게시판을 만들어 불러와 보았다. 위의 자료가 vuetify의 예제인데 페이지 넘기기, 오름차순, 내림차순 정렬의 기능이 있고 한페이지 당 행의 갯수, header에서 내가 원하는 컬럼만 뽑아오고 게시판을 만들도록 수정하였다. 참고 https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/usage.vue GitHub - vuetifyjs/vuetify: 🐉 Material Component Framework for Vue 🐉 Material Component Framework for Vue. Contribute to vuetifyjs/vuetify .. 2022. 5. 26. vue.js [axios를 통해 데이터 불러오기 3] http://localhost:8081/#/Home에 일부 데이터를 불러오는 과정에서 board의 content만 추출하려고 {{user.content}}를하였는데 TypeError 메세지가 나오고 'id'값을 읽을 수 없다는 에러가 떴다. 당연히 http://localhost:8081/#/Home에서도 화면에 아무것도 뜨지 않았다. 약 2주가량 삽질끝에 겨우 에러를 해결하였는데 해결하고나니 너무 허무했다... spring boot (backend)에 문제가 있었다. BoardController를 보면 ApiResponse를 사용하여 메소드를 만들었는데 ApiResponse를 지우고 List를 DTO에 담아 선언하니 해결되었다.. return 받는 형식이 List인 data가 아니라 ApiResponse.. 2022. 1. 14. vue.js [axios를 통해 데이터 불러오기 2] 지난번 포스팅에서는 board id값에 따른 글 불러오기를 해보았다. 이번에는 http://localhost:8081/#/Home에 전체글을 띄우는 것과, 일부 데이터만 가져오는 작업을 하였다. Home.vue에서 for문을 사용하여 users를 찾게 만든다. Home.vue {{user}} script 태그에서는 data()안에 배열 변수 선언, methods에 retieveUsers함수 추가 Mounted에서 다시 retieveUsers를 호출 Home.vue http://localhost:8081/#/Home에서 결과 확인 정상적으로 모든 board의 정보들이 화면에 띄워졌다! 2022. 1. 14. vue.js [axios를 통해 데이터 불러오기] 이번에는 locallhost:8081에 springboot의 id값에 따른 board(글)을 불러오도록 해볼 예정이다. 확인을 함으로써 spring과 vue의 연동이 되는것을 확인 해 볼 수 있다. Home.vue파일에서 작업을 해볼 예정. 우선 router디렉토리의 index.js파일 수정을 하였다. import Vue from 'vue' import VueRouter from "vue-router"; import App from "@/App"; import Board from "@/views/Board"; import Home from "@/views/Home"; Vue.use(VueRouter) const routes =[ { path:'/', name:'App', component:App }, {.. 2022. 1. 4. vue.js [axios 설치 및 vuetify설치] axios 설치 axios는 현재 가장 많이 사용되는 javascript의 http통신 라이브러리이다. backend URL에 접근하여 데이터를 가지고 오기위해 사용한다. (게시판의 데이터 등) 쉽게 말하여 백엔드와 프론트엔드간의 통신을 쉽게 하기 위하여 사용한다. main.js import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify' import router from './router' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$eventBus = new Vue(); Vue.prototype.$axios = ax.. 2022. 1. 3. vue.js [router모듈 설치 및 사용] 라우팅 : 웹 페이지간의 이동하는 방법. 미리 해당하는 모든 컴포넌트 페이지를 받아 놓고 라우팅을 이용해서 그 부분만 화면을 갱신. (화면 전환) vue에서 제공하는 공식 모듈이다. 설치 명령어 : npm install vue-router --save 이제 라우터를 적용할 수 있는 상태가 되었다. 게시판 list 컴포넌트 생성 commponents 디렉토리 하위에 board디렉토리, List.vue파일 생성 List.vue 게시판 리스트 src 하위에 routes디렉토리 생성 및 indes.js 파일 생성 index.js (리스트 컴포넌트 호출, 라우터 사용 및 연결) import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld fr.. 2021. 12. 20. vue.js [홈페이지 기본 레이아웃 만들기] locallhost8081 페이지에서 3가지 영역으로 나누어 ui를 간단하게 바꾸어 보았다. 홈페이지의 기본 레이아웃 (헤더영역, 콘텐츠영역, 풋터영역) 1. components디렉토리 하위에 common 디렉토리를 생성한다. 2. Header.vue, Footer.vue파일 생성한다. Header.vue (헤더영역) 메뉴1 메뉴2 메뉴3 메뉴4 HelloWorld.vue (콘텐츠 영역으로 사용) Footer.vue (푸터영역) https://z00h.tistory.com/ App.vue App파일에서 Header,Footer 컴포넌트 사용 및 import 추가 위의 순서대로 파일을 생성 및 수정을 마치면 간단한 레이아웃추가가 완료된다! 2021. 12. 20. vue.js [spring boot와 연동] (3) 저번 포스팅에서 spring의 port를 8090으로 바꾸었는데 다시 기존의 8080으로 바꾸고 npm run serve를 돌려보았다. outputDir은 npm run build로 빌드 시 파일이 생성되는 위치, indexPath는 index.html 파일이 생성될 위치를 지정, devServer는 Back-End , 즉 Spring Boot의 내장 was의 주소를 작성 추가 후 cmd창으로 넘어가서 명령어 npm run build 입력. intelliJ로 가서 확인을 해보면 resources하위의 static디렉토리가 추가가 된것을 볼 수 있다! cmd창에 npm run serve 명령어를 입력하면 locallhost:8081로 vue의 포트번호가 자동으로 8081로 바뀌었다는것을 볼 수 있다! sp.. 2021. 12. 16. 이전 1 2 3 4 다음
