[Web] express 로그인 구현 front 작업부분

Front-end/WEB (HTML CSS JS)

[Web] express 로그인 구현 front 작업부분

디팔⸜( ◜࿁◝ )⸝︎︎ 2022. 10. 23. 18:04

[Express] 로그인 구현 (express-session 를 통한 세션과 쿠키작업 연습)

const express = require("express"); const cors = require("cors"); const mysql = require("mysql"); const { query } = require("express"); const session = require('express-session'); // npm install exp..

deepaal.tistory.com

위 코드에 해당되는 프론트 코드를 서술하는 글입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Homepage</title>
</head>
<body onload="init()">
    <!-- <embed src="test.svg" type="image/svg+xml" aria-label="킹 (체스 말)"> -->
    <div><label> 아이디 : <input type="text" placeholder="Id" id="loginId"></label></div>
    <div><label> 비밀번호 : <input type="password" placeholder="password" id="loginPw"></label></div>
    <input type="button" value="로그인" onclick="login();">

    회원가입 페이지입니다.
    <div><label> 아이디 : <input id="userId" type="text"></label></div>
    <div><label> 이름 : <input id="userName" type="text"></label></div>
    <div><label> 비밀번호 : <input id="userPw" type="password"></label></div>
    <div><label> 비밀번호 확인 : <input id="pw_confirm" type="password"></label></div>
    <div><input type="button" value="뒤로가기" onclick="back();">
    <input type="button" value="가입하기" onclick="create_id();">
</body>
</html>

그냥 시각화만을 위한 코드라 멋은 없다..

<script>
        function init() {
        }
        
        function login(){
            let xhttp = new XMLHttpRequest();
            const loginId = document.getElementById("loginId").value;
            const loginPw = document.getElementById("loginPw").value;
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4) {
                        console.log(JSON.parse(this.response));
                    }
                }
            xhttp.open("POST", "http://localhost:3000/login", true);
            xhttp.setRequestHeader("Content-Type", "application/json"); 
            xhttp.withCredentials = true;
            xhttp.send(
                JSON.stringify({
                    "id" : loginId,
                    "password" : loginPw
                })
            );
        }

        function create_id(){
            let xhttp = new XMLHttpRequest();
            const userId = document.getElementById("userId").value;
            const userName = document.getElementById("userName").value;
            const userPw = document.getElementById("userPw").value;
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4) {
                        console.log(JSON.parse(this.response));
                    }
                }
            xhttp.open("POST", "http://localhost:3000/user", true);
            xhttp.setRequestHeader("Content-Type", "application/json"); 
            xhttp.send(
                JSON.stringify({
                    "id": userId,
                    "name": userName,
                    "password": userPw
                })
            );
        }

        function back(){
            history.back();
        }
    </script>

저작자표시