1. /component/JoinView.vue
1. 포커스 이동(ref)
-
input 태그안에 ref값을 설정한다.
:<el-input ref="id" @keyup="handleIdCheck" v-model="state.id"></el-input> -
ref 변수를 설정하고 기본값을 정한다.
:const id = ref(null); -
setup()의 리턴값으로 넣어준다.
:return { id, } -
사용
:id.value.focus(); -
포커스 이동 후 메소드가 더이상 진행되지 않도록 리턴값을 잡는다.
:return false;
2. @keyup
- 타이핑 할때마다 호출하는 메소드
:@keyup="handleIdCheck"
<template>
<div class="style2">
<div class="style1">
<div style="display: inline-block;">
<h3 >Join</h3>
<el-form
label-width="100px"
style="max-width: 360px">
<el-form-item label="아이디">
<el-input ref="id" @keyup="handleIdCheck" v-model="state.id"></el-input>
<label type="primary">{{state.idcheck}}</label>
</el-form-item>
<el-form-item label="암호">
<el-input ref="pw" type="password" v-model="state.pw"></el-input>
</el-form-item>
<el-form-item label="암호확인">
<el-input ref="pw1" type="password" v-model="state.pw1"></el-input>
</el-form-item>
<el-form-item label="이름">
<el-input ref="name" v-model="state.name"></el-input>
</el-form-item>
<el-form-item label="이메일">
<el-input ref="email" v-model="state.email"></el-input>
</el-form-item>
<el-form-item label="나이">
<el-input ref="age" type="number" v-model="state.age"></el-input>
</el-form-item>
<el-form-item label=" ">
<el-button @click="handleJoin" type="primary">회원가입</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import axios from 'axios';
import { useRouter } from 'vue-router';
export default {
setup () {
const router = useRouter();
const state = reactive({
idcheck : '중복확인',
id : '',
pw : '',
pw1 : '',
name : '',
email : '',
age : '',
});
const id = ref(null);
const pw = ref(null);
const pw1 = ref(null);
const name = ref(null);
const email = ref(null);
const age = ref(null);
const handleIdCheck = async() => {
if(state.id.length > 0) {
const url = `/member/idcheck?id=${state.id}`;
const headers = {"Content-Type":"application/json"};
const response = await axios.get(url, {headers});
console.log(response.data);
if (response.data.status === 200) {
if (response.data.result === 1) {
state.idcheck = '중복된 아이디입니다.'
}
else if (response.data.result === 0) {
state.idcheck = '사용 가능한 아이디입니다'
}
}
}
else {
state.idcheck = '중복확인';
}
}
const handleJoin = async() => {
if (state.id === '') {
alert('아이디를 입력하세요');
id.value.focus();
return false;
}
if (state.pw === '') {
alert('암호를 입력하세요');
pw.value.focus();
return false;
}
if (state.pw1 === '') {
alert('암호를 한번 더 입력하세요');
pw1.value.focus();
return false;
}
if (state.pw !== state.pw1) {
alert('암호가 일치하지 않습니다');
pw1.value.focus();
return false;
}
if (state.name === '') {
alert('이름을 입력하세요');
name.value.focus();
return false;
}
if (state.email === '') {
alert('이메일을 입력하세요');
email.value.focus();
return false;
}
if (state.age === '') {
alert('나이를 입력하세요');
age.value.focus();
return false;
}
const url = `/member/insert`;
const headers = {"Content-Type":"application/json"};
const body = {
id : state.id,
pw : state.pw,
name : state.name,
email : state.email,
age : Number(state.age)
}
const response = await axios.post(url, body, {headers:headers});
console.log(response);
if (response.data.status === 200) {
alert('회원가입 성공');
router.push({name : 'Home'})
}
}
return {
state,
handleJoin,
handleIdCheck,
id,
pw,
pw1,
name,
email,
age
}
}
}
</script>
<style lang="css" scoped>
.lbldiv{
margin-bottom: 5%;
width: 80%;
display: flex;
}
.lbl1{
text-align: start;
width : 100px;
display : inline-block;
}
.style1 {
text-align: center;
border: 1px solid #cccccc;
padding: 20px;
width: 60%;
}
.style2 {
display: flex;
justify-content: center;
}
</style>2. /component/LoginView.vue
<template>
<div class="style2">
<div class="style1">
<div style="display: inline-block;">
<h3>Login</h3>
<el-form
label-width="100px"
style="max-width: 360px">
<el-form-item label="아이디">
<el-input v-model="state.id"></el-input>
</el-form-item>
<el-form-item label="암호">
<el-input type="password" v-model="state.pw"></el-input>
</el-form-item>
<el-form-item label=" ">
<el-button @click="handleLogin" type="primary">로그인</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import axios from 'axios';
import { useRouter } from 'vue-router';
export default {
setup () {
const router = useRouter();
const state = reactive({
id : '',
pw : ''
});
const id = ref(null);
const pw = ref(null);
const handleLogin = async() => {
if (state.id.length <= 0) {
alert('아이디를 입력하세요');
id.value.focus();
return false;
}
if (state.pw === '') {
alert('암호를 입력하세요');
pw.value.focus();
return false;
}
const url = `/member/login`;
const headers = {"Content-Type":"application/json"};
const body = {
id : state.id,
pw : state.pw
}
const response = await axios.post(url, body, {headers});
console.log('handleLogin/response ===> ',response);
if (response.data.status === 200) {
sessionStorage.setItem("TOKEN", response.data.token)
alert('로그인 되었습니다.');
router.push('home');
}
}
return {
state,
id,
pw,
handleLogin
}
}
}
</script>
The best