국비과정/Vue (18) 썸네일형 리스트형 20231005 _[84일차]_01. Vue 관련 개념들 [ 수제비 기출문제 ] 소수판별 @RequestMapping 으로 /api 요청을 받아 처리해준다. http://localhost:80/api/board => api가 포함된 요청은 controller에서 받아서 처리하고 이후 vue에서 넘겨받아 데이터를 브라우저에 띄워줄예정. * vue에게 요청한게 controller로 가면 json형태의 데이터를 그대로 보여주기 때문에 구분을 위해 api를 붙여준거다. main.js에서도 /api를 붙여준다. (Vue 와 서버 연결) * 참고 * 8080 : 테스트용 홈페이지에서 사용. 80 : 실제 서비스용. Controller와 View 사이에 데이터를 주고받을 때 xml, json 을 사용해서 통신. ( 지금은 json을 사용해서 Spring boot 와 Vue.. 20231004 _[83일차]_01. Vue (5차)_로그인 기능 구현 BoardList.vue 에서 가장먼저 실행되는 부분은 함수부분 mounted 부분이 먼저 실행되면서 하단의 board(pageNo)가 실행 => paging(totalcount)가 실행 쌤이 주신 파일 다시 넣었다. 페이징부분은 다시 살펴보자 pdf_5차 참고 p12 ~ Vuex 설치하기 [ Vuex ] > npm install --save vuex > npm install --save vuex-persistedstate 설치가 완료됐다면 아래처럼 package.json에서 확인할 수 있다. src 아래 store 폴더 생성 > 내부에 store.js 파일생성 pdf에 있는 코드 붙여넣어주고 (로그인&로그아웃을 위해 필요) * mutaion : Vuex 스토어에서 상태(state)를 변경하는 일련의 함.. 20230922 _[79일차]_01. Vue (4차)_게시판 댓글창 만들기 오늘은 댓글만들자 댓글 CRUD 1. comments와 연동하기 1-1. 보드에 댓글 수 출력하기 comments에 최근글에 대한 댓글 더미데이터 넣어주세요. 쿼리문 변경 boardList.vue 변경 2. 상세보기 눌렀을 때 화면에 댓글들 출력하기 2-1. 글제목 옆에 댓글 갯수 먼저 표시해줄건데 게시판 글 list를 불러온 boardview에 이미 commentcount가 있다. 그래서 그냥 vue에서 댓글 갯수를 뽑아내 주기만 하면 된다. board 번호 제목 글쓴이 날짜 조회수 {{ n.bno }} {{ n.btitle }} ({{ n.commentcount }}) {{ n.m_name }} {{ n.bdate }} {{ n.blike }} 글쓰기 이제 detailPage에도 댓글을 띄워보자. 일.. 20230921 _[78일차]_01. Vue (4차)_게시판만들기3 오늘은 게시판 삭제 수정 만든다. 그럼 CRUD 완성 Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 | Bottlehs Tech Blog Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 www.bottlehs.com [ Vue.js ] 게시판만들기 (Update, Delete) (tistory.com) [ Vue.js ] 게시판만들기 (Update, Delete) detail components 게시글 클릭했을 때, 상세 페이지 만들기 Read.vu.. 20230920 _[78일차]_01. Vue (4차)_게시판만들기2 구동하고 postman에서 확인 어제 만든 게시판 테이블 아래쪽에 button 추가해준다. board 번호 제목 글쓴이 날짜 조회수 {{ n.bno }} {{ n.btitle }} {{ n.m_name }} {{ n.bdate }} {{ n.blike }} 글쓰기 클릭기능 넣어주고 아래쪽에서 write 메소드 만들어주나보다. 글쓰기 method 에 write 추가해준다. methods:{ viewDetail(bno){ //alert(bno+'번을 눌렀습니다'); this.requestBody.bno = bno; this.$router.push({ path: './detail', query: this.requestBody }); }, write(){ this.$router.push("write"); } }.. 20230919 _[77일차]_01. Vue (4차)_게시판만들기 pdf _ vue 4차 참고 cmd에서 새로운 vue 프로젝트 만들자. 최상위에서 vue폴더로 이동 : cd c:\vue vue폴더 내부에 sep19폴더생성 : vue create sep19 전자정부 새로운 프로젝트 생성 설정은 아래 네가지만 추가 BoardController & BoardService & BoardDAO 생성 static 폴더 아래 mapper폴더 생성 boardMapper.xml 생성 mapper에서 namespace 경로설정 해준다. 이번에는 포트번호 3000으로 한다. pdf에서 복붙해주고 db 정보만 내 계정으로 수정해준다. build-gradle 에서는 json만 추가 (*refresh해주기) 컨트롤러에서 항상 @ResponseBody 붙여주기 번거로우니 @RestControl.. 20230918 _[76일차]_01. Pandas 사용해보기 [Pandas] 판다스 기초 자료형 (DataFrame, Series) 및 관련 코드 (tistory.com) [Pandas] 판다스 기초 자료형 (DataFrame, Series) 및 관련 코드 Pandas 기본 개념 Pandas에서 Series는 하나의 column이나 row, DataFrame은 여러 series의 collection(엑셀 sheet, 파이썬 dictionary)이라고 생각하면 된다. 그리고 DataFrame에서 axis=0은 열 방향, axis=1은 행 방향이다. bioinfoblog.tistory.com pandas 사용해보자 pycharm을 켜서 pandas 설치해준다. Alt+F12 로 터미널 실행 후 pip install pandas 입력 아래처럼 다운로드가 되면 설치완료 .. 20230914 _[74일차]_01. Vue로 게시판 만들기 cmd에서 새로운 프로젝트 sep14 생성해준다. 실행은 vs code 터미널에서 해주고 src - router 폴더 생성 - index.js 파일 만들어준다. 위처럼 router 폴더가 components 내부에 있어서 오류가 났었다 src로 다시 옮겨주니 해결 * 서로 다른페이지(서로 다른 vue 파일)로 이동하는 기능을 router폴더의 js파일에 만들어줄 예정 pdf참고해서 각각의 페이지 채워줬다. 최종구성은 아래처럼 index.js 에 보면 vue-router를 /* 실제로 라우팅을 해주는 파일. 이곳에서 각 파일로 연결시켜 줍니다. */ import { createRouter, createWebHistory } from "vue-router"; import indexPage from "@/vi.. 이전 1 2 3 다음
