Vue와 Element UI를 활용한 슬라이딩 퍼즐 인증 기능 구현
슬라이딩 퍼즐 인증 구현 개요
사용자가 직접 조작했는지 확인하기 위한 슬라이딩 퍼즐 인증 기능을 Vue와 Element UI를 사용하여 구현하는 방법을 설명합니다. 핵심 로직은 백엔드 API를 통해 배경 이미지와 퍼즐 조각 이미지를 Base64 형식으로 받아와 렌더링하고, 사용자의 드래그 거리를 계산하여 오차 범위(약 10px) 내에서 일치하는지 검증하는 것입니다. 기존 코드 ...
8월 7일 04:06에 게시됨
Vue-Admin 템플릿: 권한 기반 내비게이션 및 전체화면 기능 구현
이번 글에서는 이전에 작업한 Vue-admin 프로젝트에 Breadcrumb(이동 경로)와 Screenfull(전체화면) 기능을 추가하는 과정을 다룹니다.
Breadcrumb 컴포넌트 구현
Element-UI의 el-breadcrumb와 el-breadcrumb-item을 활용하여 현재 경로를 표시하는 내비게이션을 만듭니다. 기본적인 사용 예시는 다음과 같습니다.
<el-breadcrumb separator-class="el-icon-arrow-r ...
6월 18일 23:23에 게시됨
Vue.js 기반 관리자 대시보드 구성 요소 분석
사이드바 메뉴 구현 (ElMenu 활용)
Element UI의 el-menu 컴포넌트를 사용하여 반응형 사이드 내비게이션을 구성합니다. 주요 속성은 다음과 같습니다:
collapse: 수직 모드에서 메뉴 접기/펼치기 제어
backgroundColor, textColor: 시각적 스타일링을 위한 색상 설정
active-text-color: 활성화된 메뉴 항목 강조 색상
...
6월 6일 02:41에 게시됨
Vue.js 기반 관리자 패널에서 탭 네비게이션 구현 및 라우트 캐싱 전략
Vue.js와 Element UI를 기반으로 한 관리자 대시보드에서 탭 기반 네비게이션(TagsView)을 구현할 때, 사용자가 방문한 페이지를 시각적으로 유지하고 컴포넌트 상태를 효율적으로 캐싱하는 것은 중요한 요구사항이다. 이 기능은 주로 keep-alive와 Vue Router의 조합을 통해 실현되며, Vuex를 활용해 상태를 중앙에서 관리한다.
visitedViews 와 cachedViews: 두 가 ...
6월 5일 23:30에 게시됨
SpringBoot, Vue.js, Element-UI 기반 온라인 블로그 시스템 개발
1. 시스템 개요
이 온라인 블로그 시스템은 현대 웹 개발 기술 스택을 활용하여 설계 및 구현되었습니다. 백엔드는 Spring Boot 프레임워크를 기반으로 하며, 데이터 지속성을 위해 MyBatis-Plus를 사용하고, 사용자 인증 및 권한 관리는 Spring Security 기술로 제어합니다. 데이터베이스는 MySQL을 채택했습니다. 프론트엔드는 Vue 2.x, Element-UI, Axios, ECharts 등의 ...
5월 23일 21:19에 게시됨