VueJs4 게시판 만들기 - 검색 / 페이징 / 그룹 조회 기능 추가 안녕하세요 .이번에는 가장 대중 적으로 만들게 되는 기본 게시판을 만들어 보겠습니다.1) 검색 2) 페이징순으로 진행 해보겠습니다. 1) 검색 검색은 제목 / 작성자 검색 타입을 정한 후 검색 타입 에 맞게 검색 결과가 나오게 해보겠습니다. 작성자 제목 검색 검색 쪽 소스를 보시면 'author' , 'title' 검색 타입 이 있고 input box 에 있는 'searchquery' 라는 곳에 검색 어가 세팅 된 후 button 클릭 시 search 라는 함수가 진행 됩니다 . - search 함수 -const search = () => { currentPage.value = 1; activeSearch.va.. 2024. 10. 5. Vue 3로 구현한 로그인/회원가입 화면 분석 - 1차 개발 소스 ( 현재 소스는 1차 기본적인 세팅 과 화면 구성만 한 소스 이며 추가적인 개발이 되면 계속적으로 업데이트 될 예정입니다.)안녕하세요, 개발자 여러분! 오늘은 Vue 3와 Vite를 사용하여 구현한 로그인과 회원가입 화면에 대해 살펴보겠습니다. Tailwind CSS를 활용하여 스타일링했으며, 코드를 자세히 분석해보겠습니다.프로젝트 설정Vue 3 + Vite 프로젝트 생성: npm create vite@latest user_management -- --template vuecd user_managemennpm install필요한 패키지 설치: npm install vue-router@4라우터 설정 (/src/router/index.js): import { createRouter, create.. 2024. 9. 29. Login 구현 - front - 1) 기본 세팅 및 - backend 통신 스펙 : Vue3 / Pinia / Vite framwork [ 구현전 나의 flow ] /*1) login - password 암호화 2) 암호화된 password / backend 에서 복호화 후 -> jwt 로 token 생성 3) token 값으로 localstorage 에 저장 4) token 값으로 페이지 이동시 계속 체크 5) token 만료일 경우 reflesh token 으로 token 값 갱신 6) reflesh token 값이 만료 시 로그인 페이지로 이동7) 로그인시 reflesh token 값 insert / accesstoken 값 localstorage 에 저장 */ [ 이 과정으로 가기 전 기본 적인 flow 세팅 ] 1) vite 로 이용해 vue3 project 생성 .. 2024. 4. 28. vue를 이용해 대시보드 만들기 1. VUE 파일 - Main.vue - DashBoard └ APIAverageResponseTime └ APIOperationSatus └ APITotalNumberOfCalls 2. 그래프 - 구글 Charts 3. DB - PostgreSql - mongoDB ● VUE 파일 ========================================================================== ㅇ Main.vue 메인 컴포넌트에서 각각의 차트 vue 컴포넌트를 추가해 전체적인 화면 구상을 잡는다 . └ 이렇게 관리 하게 되면 차트 추가 / 삭제 / 수정이 용이 하다. ㅇ APIAverageResponseTime.vue 해당 goole 차트를 사용하기 위해 1) node.js 에서 g.. 2022. 3. 4. 이전 1 다음
