웹에서 회원가입페이지와 서버요청
우선 새로운 페이지를 node.js와 라우터에서 연결할 수 있도록 추가해주었다.
node.js
"use strict";
const express = require("express");
const app = express();
const home = require("./routes/home")
app.set("views","./views");
app.set("view engine","ejs");
app.use("/",home);
app.use("/signUp",home);
app.listen(3000,function (){
console.log("서버가동");
});router
router.get("/signUp",(req,res) => {
res.render("home/signUp");
});signUp.ejs
등록을 위한 요청을 버튼과 중복확인 버튼 생성
<body>
<h1>회원가입</h1>
<form id="form">
<p>
Username : <input type="text" id="userId"/>
<input type="button" onclick="idcheck(this.form)" value="중복확인"/>
</p>
<p>
Password : <input type="password" id="userPw" />
</p>
<div>
<input type="button" onclick="signup(form)" value="등록"/>
<input type="button" onclick="movePage()" value="로그인하러가기"/>
</div>
</form>
</body>onclick 시 실행되는 js부분
로그인 페이지로 다시 돌아가기 위한 메소드
function movePage(){
location.href="/"
}중복확인을 위한 서버요청
flag를 만들어 중복확인을 하고나면 회원등록에서 확인할 수 있도록 했다.
function idcheck(form){
var id = $('#userId').val();
var obj = { "id" : id };
if(id != ""){
$(document).ready(function(){
$.ajax({
type: 'post',
url : 'http://localhost:3001/idcheck',
data : JSON.stringify(obj),
dataType:'text',
contentType: "application/json",
success: function(data){
const data1 = JSON.parse(data);
if($.trim(data1.msg)=="null"){
alert("사용가능한 ID입니다.");
flag = true;
document.getElementById('userId').readOnly = true;
}else{
alert("이미 존재하는 ID입니다.");
}
},
error:function(request,status,error){
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
})
});
}else{
alert("아이디를 입력해주세요")
}
}success에서 조건문을 사용하는 부분에서 data가 object가 아닌 String으로 넘어와서 조건문이 실행이 안되는 이슈가
있었다. 그래서 아래와 같이 서버에서 받는 데이터를 다시 object형태로 변환해서 사용했다.
const data1 = JSON.parse(data);회원등록 요청 js
flag의 값을 확인해 중복확인을 거쳤는지 확인 후, 서버요청을 통해 등록을 마치고 그 후에 다시 로그인 페이지로
넘어가도록 했다.
function signup(form){
var id = $('#userId').val();
var pw = $('#userPw').val();
var obj = { "id" : id, "pwd" : pw};
if(flag){
if(id != ""||pw !=""){
$(document).ready(function(){
var id = $('#userId').val();
var pw = $('#userPw').val();
var obj = { "id" : id, "pwd" : pw};
$.ajax({
type: 'post',
url : 'http://localhost:3001/signup',
data : JSON.stringify(obj),
dataType:'text',
contentType: "application/json",
success: function(data){
alert("가입완료");
movePage()
},
error:function(request,status,error){
console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
})
});
}
}
}