Programming/Vue60 [실습] 뷰(Vue)로 로그인 화면 구현하기 - UI 및 기능 개발 오늘의 실습 목표는 "로그인 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 로그인 화면을 구현하는 과정입니다. 로그인 화면 구현하기 - UI 및 기능 개발 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 로그인 화면 구현하기 - 기획/설계 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면의 레이아웃을 구성하실 수 있습니다. 소스 코드 src\components\common\UserLogin.vue 관리자 포털의 로그인 화면의 주요 기능이 담겨있는 컴포넌트 파일입니다. 전체 코드를 확인하실 분들은 아래 더보기를 클릭해주세요. 더보기 Admin Portal Login Admin Portal Lo.. 2023. 3. 15. [실습] 뷰(Vue)로 로그인 화면 구현하기 - 기획/설계 오늘의 실습 목표는 "로그인 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 로그인 화면을 구현하기 위해 기획/설계하는 과정입니다. 로그인 화면 구현하기 - 기획/설계 UI/UX 기능 로그인 관리자가 등록한 사용자 정보와 일치하는지 확인하는 기능 ID: 관리자가 등록한 사용자 ID PW: 관리자가 등록한 사용자 임시 Password 결과 이미지 2023. 3. 13. [실습] 뷰(Vue)로 임시 비밀번호 발급 기능 구현하기 - REST API 연동 테스트 오늘의 실습 목표는 "임시 비밀번호 발급 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 임시 비밀번호 발급 기능의 REST API를 연동 테스트하는 과정입니다. 임시 비밀번호 발급 기능 구현하기 - REST API 연동 테스트 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 임시 비밀번호 발급 기능 구현하기 - UI 및 기능 개발 [실습] 스프링부트(Spring Boot)로 임시 비밀번호 발급 기능 구현하기 테스트 테스트는 Postman으로 Controller에 구현한 REST API를 호출하여 해당 로직이 정상적으로 결과를 도출하는지를 확인해야 하나, 임시 비밀번호 생성 로직이 화면단(Frontend)에 .. 2023. 3. 9. [실습] 뷰(Vue)로 임시 비밀번호 발급 기능 구현하기 - UI 및 기능 개발 오늘의 실습 목표는 "임시 비밀번호 발급 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 임시 비밀번호 발급 기능을 구현하는 과정입니다. 임시 비밀번호 발급 기능 구현하기 - UI 및 기능 개발 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면의 레이아웃을 구성하실 수 있습니다. 소스 코드 src\components\admin-web\users\AdminUsersMain.vue 관리자 포털의 사용자 관리 화면의 주요 기능이 담겨있는 컴포넌트 파일입니다. 전체 코드를 확인하실 분들은 아.. 2023. 3. 8. [실습] 뷰(Vue)로 임시 비밀번호 발급 기능 구현하기 - 기획/설계 오늘의 실습 목표는 "임시 비밀번호 발급 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 임시 비밀번호 발급 기능을 구현하기 위해 기획/설계하는 과정입니다. 임시 비밀번호 발급 기능 구현하기 - 기획/설계 UI/UX 우측 상단의 사용자 조작 버튼 그룹에 '임시 비밀번호 발급' 버튼 추가 Before After 기능 임시 비밀번호 관리자 포털 사용자 관리 페이지에서 선택한 사용자의 임시 비밀번호를 발급 팝업창으로 임시 비밀번호 오클릭을 방지하기 위해 팝업창 프로세스 추가 난수 생성을 통해 임시 비밀번호를 발급 발급된 임시 비밀번호는 7일간만 사용 가능, 그 기간 안에 변경해야 함 발급된 임시 비밀번호는 사용자에게 따로 공지해야함 (현재) 관리자에게 팝업으로 알려주면, 직접 사용자에게 가이드하는 형.. 2023. 3. 7. [실습] 뷰(Vue)로 설정 화면 구현하기 - Backend(REST API) 연결하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면에서 Backend로 연동하기 위해 REST API 연결하는 과정입니다. 설정 화면 구현하기 - REST API 호출/연동하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 설정 화면 구현하기 - UI/Layout 구현하기 [실습] 스프링부트(Spring Boot)로 비밀번호 관리 기능 구현하기 - REST API 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면과 API Server가 연동된 결과를 확인하실 수 있습니다. ▶ 초기 상태 DB (MySQL) [TABLE] admin_user_infor.. 2023. 3. 3. [실습] 뷰(Vue)로 설정 화면 구현하기 - UI/Layout 구현하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면의 UI/Layout을 구현하는 과정입니다. 설정 화면 구현하기 - UI/Layout 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - Backend(REST API) 연결하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면의 레이아웃을 구성하실 수 있습니다. 소스 코드 src\components\admin-web\users\AdminUsersDetail.vue 관리자 포탈 사용자를 등록, .. 2023. 3. 2. 이전 1 2 3 4 ··· 9 다음
