MySQL을 이용해서 회원가입, 로그인, 회원정보 수정 기능 구현하기

dev_jubby·2022년 8월 10일
0

Node.js

목록 보기
4/8

MySQL DB를 연결해서 회원가입, 로그인, 회원정보 수정 기능을 구현한다.

먼저, npm(node package manager)를 초기화 한다.

npm init

그 다음 프로젝트에 필요한 dependeny를 설치한다.

npm install express
npm install ejs
npm install body-parser
npm install mysql


📁 폴더구조 & index.js 파일

MVC 패턴에 필요한 폴더를 생성해주고 main index.js 파일을 생성한다. 기본경로를 / 로 설정해주었다.

/* index.js */
const express = require("express");
const app = express();
const port = 8080;
const bodyParser = require("body-parser"); 

app.set("view engine", "ejs");
app.use( express.static( "uploads" ));
app.use(express.urlencoded({extended: true}));
app.use( bodyParser.json() );

const router = require("./routes");
app.use("/", router); 


app.listen(port, () => {
    console.log( "Server Port: ", port);
}) 


💾 DataBase - MySQL

User model을 생성하기 전, MySQL을 이용해서 User라는 테이블을 생성했다.



📦 Model

User model을 생성한다.

/* ./model/User.js */
const mysql = require("mysql");

const cnn = mysql.createConnection({
    host: 'localhost',
    user: 'user_name',
    password: 'password',
    database: 'database_name'
});


//회원가입 정보 입력
exports.insert = ( data, cb ) => {
    var sql = `INSERT INTO user VALUES ('${data.id}', '${data.name}', '${data.email}', '${data.phoneNumber}','${data.password}');`;

    cnn.query(sql, (err, rows) => {
        if ( err ) throw err;
        cb( data.id );
    });
}

//로그인 정보 읽기
exports.select = ( id, password, cb ) => {
    var sql = `SELECT * FROM user WHERE id='${id}' limit 1`;

    cnn.query(sql, (err, rows) => {
        if ( err ) throw err;
        cb( rows[0] );
    });
}

//회원 정보
exports.get_user = (id, cb) => {
    let sql = `SELECT * FROM user WHERE id='${id}' limit 1;`;
  
    cnn.query( sql, function(err, rows){
        if ( err ) throw err;
        cb(rows);
    });
}

//회원 정보 수정
exports.update = ( data,  cb ) => {
    var sql = `UPDATE user SET name='${data.name}', email='${data.email}', phoneNumber='${data.phoneNumber}', password='${data.password}' WHERE id='${data.id}';`;

    cnn.query(sql, (err, rows) => {
        if ( err ) throw err;
        cb( rows );
    });
}

//회원 탈퇴
exports.delete = ( id,  cb ) => {
    var sql = `DELETE FROM user WHERE id='${id}';`;
  
    cnn.query(sql, (err, rows) => {
        if ( err ) throw err;
        cb( rows );
    });
}

insert()는 처음 회원가입 할 때 받은 정보를 DB에 저장하는 쿼리를 사용한다.
select()는 로그인을 시도할 때 DB에 있는 정보인지 확인하는 용도로 조회하는 쿼리를 사용한다.
get_user()는 회원정보 수정하는 화면에서 미리 저장되어 있는 정보를 view에 띄워주기 위해 해당 id로 전체 정보를 조회하는 쿼리를 사용한다.
update()는 회원정보 수정하는 화면에서 회원정보를 수정하면 DB 정보를 업데이트가 되도록 하는 쿼리를 사용한다.
delete()는 회원정보 수정하는 화면에서 회원 탈퇴를 하면 id에 해당되는 모든 정보를 삭제하도록 하는 쿼리를 사용한다.



🔧 Controller

UserController.js 파일을 생성한다.

const User = require("../model/User");

//메인화면=회원가입화면
exports.index = (req, res) => {
    res.render("join");
}

//User 정보 저장하기
exports.post_user = (req, res) => {

    User.insert( req.body, function (result) {  
        res.send({ id: result});
    })
}

//login 화면
exports.login = (req, res) => {
    res.render("login");
}

//login 시도
exports.post_login = (req, res) => {
    User.select( req.body.id, req.body.password, function (result) {
        if (result == null) {
            return res.send({result: result, flag: false});
        } else{
            if (req.body.password != result.password) {
                return res.send({result: result, flag: false});
            }else {
                return res.send({result: result, flag: true});
            }
        }
    });
}

//회원정보 수정 화면
exports.edit = (req, res) => {
    User.get_user( req.body.id, function (result) {      
        res.render("edit", {data: result[0]});
    });
}

//정보 수정
exports.patch_user = (req, res) => {
    User.update( req.body, function (result) {      
        console.log("update result:" , result);
        res.send("수정완료");
    });
}

//정보 삭제
exports.delete_user = (req, res) => {
    User.delete( req.body.id, function (result) {      
        console.log("delete result:" , result);
        res.send("success Delete!");
    });
}

index()는 get방식으로 처음 화면을 불러오는 것으로, 회원가입 view를 기본으로 rendering하게 하였다.
post_user()는 post방식으로, 정보를 입력하고 회원가입 버튼을 누르면 실행된다. DB에 정보를 저장하는 User.insert()함수에 req.body 데이터를 전달한다.
login()은 get방식으로, 로그인하러가기 버튼을 로그인 화면을 불러오도록 했다.
post_login()는 post방식으로, 정보를 입력하고 로그인 버튼을 누르면 실행된다. DB에 있는 정보와 일치하는지 여부를 판단하고 정보를 넘겨준다.
edit()는 post() 방식으로 로그인 했을 때의 id값을 전달받아서 회원정보 수정 view로 넘어가도록 했다.
patch_user()는 patch() 방식으로, 수정할 회원정보를 입력하고 수정하기 버튼을 누르면 실행된다.
delete_user()는 delete() 방식으로, 삭제할 회원정보를 입력하고 회원 탈퇴 버튼을 누르면 실행된다.



💻 Route

index.js 파일을 생성한다.

/* .routes/index.js */
const express = require("express");
const user = require("../controller/UserController");
const router = express.Router();

router.get("/", user.index);
router.post("/join", user.post_user);

router.get("/login", user.login);
router.post("/login", user.post_login);

router.post("/edit", user.edit);
router.patch("/edit", user.patch_user);
router.delete("/delete", user.delete_user);

module.exports = router; 


🎨 view

View는 join.ejs(회원가입 view), login.ejs(로그인 view), edit.ejs(회원정보 수정 view)로 구성되어 있다.

join.ejs

<!-- script -->
<script>
            function joinUser() {
                var form = document.getElementById("join");
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/join',
                    data: {
                        id: form.id.value,
                        name: form.name.value,
                        email: form.email.value,
                        phoneNumber: form.phoneNumber.value,
                        password: form.password.value
                    }
                }).then((response) => {
                    return response.data;
                }).then((data) => {

                    console.log(data);
                    //회원 가입이 완료되었습니다.
                    let html = "<h6 class='fw-bold text-center mt-5'>회원가입이 완료되었습니다!</h6>"
                    document.getElementById("contents").innerHTML = html;
                })
            }
</script>

<!-- body -->
<body>
        <form id="join">
            <div class="row justify-content-center mt-5">
                <div class="col-4"></div>
                <div class="col-4 justify-content-center" id="title">
                    <h6 class="fw-bold fs-2 mb-5 text-center">회원가입</h6> 
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center">
                <div class="col-4"></div>
                <div class="col-4 justify-content-center" id="contents">
                    <h6 class="fw-bold">ID</h6>
                    <input class="input-box mb-2" type="text" name="id" placeholder="아이디를 입력하세요" required><br>
                    <h6 class="fw-bold">Name</h6>
                    <input class="input-box mb-2" type="text" name="name" placeholder="이름을 입력하세요" required><br>
                    <h6 class="fw-bold">Email</h6>
                    <input class="input-box mb-2" type="text" name="email" placeholder="이메일 주소를 입력하세요"><br>
                    <h6 class="fw-bold">Phone Number</h6>
                    <input class="input-box mb-2" type="text" name="phoneNumber" placeholder="010 - XXXX - XXXX 형태로 입력하세요"><br>
                    <h6 class="fw-bold">Password</h6>
                    <input class="input-box mb-2" type="password" name="password" placeholder="비밀번호를 입력하세요" required><br>
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center mt-3">
                <div class="col-4"></div>
                <div class="col-4" id="button-group">
                    <button class="join-button" type="button" onclick="joinUser();">회원가입</button>        
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center mt-3">
                <div class="col-4"></div>
                <div class="col-4" id="button-group">
                    <button class="join-button" type="button" onclick="location.href='login';">로그인 하러가기</button>   
                </div>
                <div class="col-4"></div>
            </div>
           
        </form>
</body>

login.ejs

<!-- script -->
<script>
            function loginUser() {
                var form = document.getElementById("login");
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/login',
                    data: {
                        id: form.id.value,
                        password: form.password.value
                    }
                }).then((response) => {
                    console.log("response.data:" , response.data);
                    return response.data;
                }).then((data) => {
                    if ( data.flag == false) {
                        //메세지 띄우기
                        let alert_html = "<h6 class='fw-bold text-center mt-5'>다시 로그인해주세요.</h6>";
                        document.getElementById("alert").innerHTML = alert_html;
                    } else {
                        alert("로그인 성공");

                        var form_info = document.getElementById("form_info");
                        form_info.id.value = form.id.value;
                        form_info.submit();
                        
                    }     
                })
            }
</script>
        
<!-- body -->
<body>
        <form id="login">
            <div class="row justify-content-center mt-5">
                <div class="col-4"></div>
                <div class="col-4 justify-content-center" id="title">
                    <h6 class="fw-bold fs-2 mb-5 text-center">로그인</h6> 
                </div>
                <div class="col-4"></div>
            <div class="row justify-content-center">
                <div class="col-4"></div>
                <div class="col-4 justify-content-center" id="contents">
                    <h6 class="fw-bold">ID</h6>
                    <input class="input-box mb-2" type="text" name="id" placeholder="아이디를 입력하세요" required><br>
                    <h6 class="fw-bold">Password</h6>
                    <input class="input-box mb-2" type="password" name="password" placeholder="비밀번호를 입력하세요" required><br>
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center mt-3">
                <div class="col-4"></div>
                <div class="col-4" id="button-group">
                    <button class="join-button" type="button" onclick="loginUser();">로그인</button>
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center">
                <div class="col-4"></div>
                <div class="col-4" id="alert">
                </div>
                <div class="col-4"></div>
            </div>
        </form>

        <form id="form_info" action="/edit" method="POST">
            <input type="hidden" name="id">
        </form>
</body>

edit.ejs

<!-- script -->
<script>
            //회원 정보 수정
            function updateUser() {
                var form = document.getElementById("join");
                axios({
                   method: 'patch',
                   url: 'http://localhost:8080/edit',
                   data: {
                        id: form.id.value,
                        name: form.name.value,
                        email: form.email.value,
                        phoneNumber: form.phoneNumber.value,
                        password: form.password.value
                   } 
                }).then((response) => { 
                    return response.data;
                }).then((data) => {
                    console.log("회원정보 수정완료");
                    alert("수정완료");
                });
            }

            // 회원 탈퇴
            function deleteUser() {
                var form = document.getElementById("join");
                axios({
                   method: 'delete',
                   url: 'http://localhost:8080/delete',
                   data: { id: form.id.value } 
                }).then((response) => { return response.data; })
                .then((data) => { 
                    alert("회원 탈퇴 완료");

                    var form_info = document.getElementById("form_info");
                    form_info.submit();
                    
                 });
            }
</script>

<!-- body -->
<body>
        <form id="join">
            <div class="row justify-content-center mt-5">
                <div class="col-4"></div>
                <div class="col-4 justify-content-center" id="title">
                    <h6 class="fw-bold fs-2 mb-5 text-center">회원정보 수정</h6> 
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center">
                <div class="col-4"></div>
                <div class="col-4 justify-content-center" id="contents">
                    <h6 class="fw-bold">ID</h6>
                    <input class='input-box mb-2' type='text' name='id' value='<%=data.id%>' readonly><br>
                    <h6 class="fw-bold">Name</h6>
                    <input class="input-box mb-2" type="text" name="name" value="<%=data.name%>" required><br>
                    <h6 class="fw-bold">Email</h6>
                    <input class="input-box mb-2" type="text" name="email" value="<%=data.email%>"><br>
                    <h6 class="fw-bold">Phone Number</h6>
                    <input class="input-box mb-2" type="text" name="phoneNumber" value="<%=data.phoneNumber%>"><br>
                    <h6 class="fw-bold">Password</h6>
                    <input class="input-box mb-2" type="text" name="password" value="<%=data.password%>"><br>
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center mt-3">
                <div class="col-4"></div>
                <div class="col-4" id="button-group">
                    <button class="join-button" type="button" onclick="updateUser();">회원정보수정</button>
                </div>
                <div class="col-4"></div>
            </div>
            <div class="row justify-content-center mt-3">
                <div class="col-4"></div>
                <div class="col-4" id="button-group">
                    <button class="join-button" type="button" onclick="deleteUser();">회원 탈퇴</button>
                </div>
                <div class="col-4"></div>
            </div>
        </form>
        <form id="form_info" action="/login" method="GET">
        </form>
</body>


💚 처음 회원가입 view

💚 회원가입 완료

💚 로그인 view

💚 로그인 정보가 틀렸을 시

💚 로그인 성공 Alert

💚 회원정보 수정 view

💚 회원정보 수정 완료 Alert

💚 회원 탈퇴

profile
신입 개발자 쥬비의 기술 블로그 입니다.

0개의 댓글