3월 24일 vueBootJiye(vue,eclipse), SpringBootJiye(sts)
2020. 6. 22. 19:04ㆍ프론트엔드 & 백엔드 개발자 과정/spring boot
<< vueBootJiye index.html >>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
location.href = "login.html";
//this.$router.push('login.html');
</script>
</body>
</html>
< login.html >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>아이디</td>
<td>
<input v-model="id" type="text">
</td>
</tr>
<tr>
<td>패스워드</td>
<td>
<input v-model="pwd" type="password">
</td>
</tr>
<tr>
<td colspan="2">
<button @click='login'>로그인</button>
<button @click='signup'>회원가입</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data:{
id:'', // app의 v-model
pwd:''
},
methods: {
login: function(){
// 빈칸 조사
if(this.id == ""){
alert("id를 입력해 주십시오");
return;
}
// 보낼 데이터
var params = new URLSearchParams(); // POST로 보낼 때
params.append("id", this.id);
params.append("pwd", this.pwd);
axios.post('http://localhost:3000/login', params)
.then(res => { // 갔다 왔을 때 then
// alert('login connect success');
// alert(JSON.stringify(res.data)); JSON(res.data)를 문자열로 형변환
// alert('res.data.id:' + res.data.id);
if(res.data.id == undefined){
alert("id나 password가 틀렸습니다");
return;
}
// session -> vuex 만료 기한 있음, ex) 회원정보(object)
// html -> sessionStorage, localStorage -> cookie(String) 만료 기한 없음 ex) id
// timer 걸어 놓으면 기한 설정 가능
// 저장
sessionStorage.setItem("login", JSON.stringify(res.data));
var loginData = sessionStorage.getItem("login"); // String
// alert(loginData);
var login = JSON.parse(loginData); // JSON으로 형변환(object)해서 session 저장
// alert(login);
// alert(login.id); // key값으로 접근
// alert(login.name);
// 이동
location.href = "bbslist.html";
})
},
signup: function(){
alert("회원가입으로오~!");
location.href = "signup.html";
//this.$router.push('signup.html');
}
}
})
</script>
</body>
</html>
< signup.html >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- ajax -->
</head>
<body>
<div id="app">
<h1>회원가입</h1>
아이디: <input v-model="id" type="text" id="id" name="_id"><input @click="idcheck()" type="button" id="idcheck" name="_idcheck" value="중복체크"><br>
<p>{{ idmsg }}</p>
패스워드: <input v-model="pwd" type="text" id="pwd" name="_pwd"><br>
이름: <input v-model="name" type="text" id="name" name="_name"><br>
이메일: <input v-model="email" type="text" id="email" name="_email"><br>
<button @click='signup()'>가입</button>
</div>
<script type="text/javascript">
// 외부 함수에서 사용시 v.id로 사용
var vue = new Vue({
el:'#app',
data:{
id:'', // -> v-model="id"
pwd:'',
name:'',
email:'',
idmsg:''
},
methods: {
idcheck: function() { // (event) 안넣어도 작동함, ex)key press
axios.get('http://localhost:3000/getId', {
params:{
id: this.id // -> data:{ id:''}
}
}).then(res => {
alert("통신성공");
if(res.data == "NO"){
this.idmsg = "사용할 수 없는 id입니다";
this.id = "";
}else{
this.idmsg = "사용할 수 있습니다";
}
})
},
signup: function() {
var params = new URLSearchParams();
params.append('id', this.id);
params.append('pwd', this.pwd);
params.append('name', this.name);
params.append('email', this.email);
axios.post('http://localhost:3000/addmember', params)
.then(res => {
alert("통신성공");
if(res.data == "YES"){
alert("성공적으로 가입되었습니다");
location.href = "login.html";
}else{
alert("가입되지 않았습니다");
location.href = "login.html";
// router.go(-1); == history.back(); router.go(n): 이 메소드는 window.history.go(n)과 비슷하게 히스토리 스택에서 n 만큼 앞, 뒤로 이동하는 메소드입니다.
}
})
}
}
})
</script>
</body>
</html>
'프론트엔드 & 백엔드 개발자 과정 > spring boot' 카테고리의 다른 글
| 3월 23일 vueBootConnect(vue,eclipse), vueSample(vue,eclipse), SpringBootSamples(sts) (0) | 2020.06.22 |
|---|---|
| 3월 20일 Sample01(sts) (0) | 2020.06.22 |