Code - jichoi/lms

<template> <div class="login-container"> <div class="login-bg"> <div> </div> </div> <div class="login "> <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div> <div class="join-box"> <div class="flex align-center justify-start mb40"> <img src="../resources/img/icon1.png" alt="" class="mr20"> <h2>회원가입</h2> </div> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab1" /> 학생 </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab2" /> 학부모 </label> <label class="mr20 title1"> <input type="radio" v-model="selectedTab" value="tab3" /> 선생님 </label>  <div class="login-form mt20" v-if="selectedTab === 'tab1'"> <div class="mb10 flex justify-between align-center"> <p class="title" for="username">아이디</p> <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요."> </div> <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호 확인</p> <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">이름</p> <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="tel1"> <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2"> <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3"> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap flex justify-end mb20" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">학년</option> </select> <select name="" id="" class="mr10 data-wrap"> <option value="">반</option> </select> <select name="" id="" class="data-wrap"> <option value="">번호</option> </select> </div> </div> <div class="flex justify-end align-center mb10"> <input type="checkbox" class="ui-checkbox mr10"> <p class="title2" for="password">개인정보 수집 동의</p> </div> <button style="width: 100%;" class="login-btn mt50" type="submit" @click="submitForm"><img src="../resources/img/btn_.png" alt=""> <p>회원가입</p> </button> </div>  <div class="login-form mt20" v-else-if="selectedTab === 'tab2'"> <div class="mb10 flex justify-between align-center"> <p class="title" for="username">아이디</p> <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요."> </div> <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호 확인</p> <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">이름</p> <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="tel1"> <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2"> <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3"> </div> </div> <div class="flex justify-between mb20"> <p class="title " for="username"><em class="yellow">학생 정보</em></p> <div class="flex justify-end align-center mb10"> <img src="../resources/img/img192_78p.png" alt=""> <p class="title2 ml10" for="password">자녀 추가하기</p> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap" style="width: 100%;"> <input type="text" placeholder="검색하세요."> <button @click="buttonSearch" type="button" title="위원회 검색"> <img src="../resources/img/look_t.png" alt=""> </button> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학생 정보</p> <div class="search-wrap flex justify-end mb20" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">학년</option> </select> <select name="" id="" class="mr10 data-wrap"> <option value="">반</option> </select> <select name="" id="" class=" data-wrap"> <option value="">번호</option> </select> </div> </div> <div class="flex justify-end align-center mb10"> <input type="checkbox" class="ui-checkbox mr10"> <p class="title2" for="password">개인정보 수집 동의</p> </div> <button style="width: 100%;" class="login-btn mt50" type="submit" @click="submitForm"><img src="../resources/img/btn_.png" alt=""> <p>회원가입</p> </button> </div>  <div class="login-form mt20" v-else-if="selectedTab === 'tab3'"> <div class="mb10 flex justify-between align-center"> <p class="title" for="username">아이디</p> <input type="text" id="username" v-model="userId" placeholder="아이디를 입력하세요."> </div> <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호</p> <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p> <div class="flex justify-between align-center mb10"> <p class="title" for="password">비밀번호 확인</p> <input type="password" id="password" v-model="passwordCheck" placeholder="비밀번호를 입력하세요."> </div> <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em class="green ml10">비밀번호가 일치 합니다.</em></p> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">이름</p> <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요."> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">전화번호</p> <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="tel1"> <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2"> <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3"> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap" style="width: 100%;"> <input type="text" placeholder="검색하세요."> <button @click="buttonSearch" type="button" title="위원회 검색"> <img src="../resources/img/look_t.png" alt=""> </button> </div> </div> <div class="mb30 flex justify-between align-center"> <p class="title" for="username">학교</p> <div class="search-wrap flex justify-end mb20" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">학년</option> </select> <select name="" id="" class="mr10 data-wrap"> <option value="">반</option> </select> <select name="" id="" class="data-wrap"> <option value="">번호</option> </select> </div> </div> <div class="flex justify-end align-center mb10"> <input type="checkbox" class="ui-checkbox mr10"> <p class="title2" for="password">개인정보 수집 동의</p> </div> <button style="width: 100%;" class="login-btn mt50" type="submit" @click="submitForm"><img src="../resources/img/btn_.png" alt=""> <p>회원가입</p> </button> </div> </div> </div> </div> <div v-show="searchOpen" class="popup-wrap"> <div class="popup-box "> <div class="flex justify-between mb30"> <p class="popup-title">학교 검색</p> <button type="button" class="popup-close-btn" @click="closeBtn"> <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> </button> </div> <div class="mb30 flex justify-between align-center"> <p class="title1" for="username" style="width: 12rem;">시/도</p> <div class="search-wrap flex justify-end" style="width: 100%;"> <select name="" id="" class="mr10 data-wrap"> <option value="">시</option> </select> <select name="" id="" class=" data-wrap"> <option value="">도</option> </select> </div> </div> <div class="mb10 flex justify-between align-center"> <p class="title1" for="username" style="width: 12rem;">학교명</p> <div class="search-wrap" style="width: 100%;"> <input type="text" placeholder="검색하세요."> <button @click="buttonSearch" type="button" title="위원회 검색"> <img src="../resources/img/look_t.png" alt=""> </button> </div> </div> <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"><img src="../resources/img/img194_78p.png" alt=""><em class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em></p> <div class="flex justify-center "> <button type="button" title="글쓰기" class="new-btn mr10"> 취소 </button> <button type="button" title="글쓰기" class="new-btn"> 등록 </button> </div> </div> </div> </template> <script> import SvgIcon from '@jamescoyle/vue-icon'; import { mdiMagnify, mdiWindowClose } from '@mdi/js'; import axios from "axios"; export default { data() { return { mdiWindowClose: mdiWindowClose, userId: '', username: '', password: '', passwordCheck: '', tel1: '', tel2: '', tel3: '', email: null, selectedTab: 'tab1', // 초기 선택 탭 showModal: false, searchOpen: false, } }, methods: { submitForm() { const vm = this; const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,}$/; if (!vm.userId) { alert("로그인 아이디가 비어 있습니다!"); return; } if (!vm.password) { alert("비밀번호가 비어 있습니다!"); return; } if (vm.password !== vm.passwordCheck) { alert("비밀번호가 일치하지 않습니다."); return; } if (!passwordPattern.test(vm.password)) { alert("비밀번호는 영문, 숫자, 특수문자를 조합하여 6자리 이상이어야 합니다."); return; } if (!vm.username) { alert("유저 이름이 비어 있습니다!"); return; } if (!vm.tel1 && !vm.tel2 && !vm.tel3) { alert("전화번호가 비어 있습니다!"); return; } const telno = vm.tel1 + '-' + vm.tel2 + '-' + vm.tel3; let auth = null; if (vm.selectedTab === 'tab1') { auth = 'STUDENT' } else if (vm.selectedTab === 'tab2') { auth = 'PARENT' } else if (vm.selectedTab === 'tab3') { auth = 'TEACHER' } axios({ url: "/auth/insertUser.json", method: "post", data: { loginId: vm.userId, password: vm.password, userNm: vm.username, email: vm.email, telno: telno, authcd: auth }, }).then(function (response) { if(response.data.status === 'success'){ alert("회원가입에 성공했습니다!") vm.goToApp(); } else { alter("입력창을 다시 확인해주세요!") } }).catch(function (error) { }); }, goToApp() { this.$router.push('/Login.page'); }, closeModal() { this.showModal = false; }, buttonSearch() { this.searchOpen = true; }, closeBtn() { this.searchOpen = false; }, }, components: { SvgIcon }, } </script> <style scoped></style>