내일배움단_메이킹챌린지_6기_(2)

18040 단어 내일배움카드국비지원메이킹챌린지내일배움단스파르타코딩클럽코딩프로젝트

#코딩 개발일지 시작의 한마디

  • 회원가입, 로그인 기능 구현!

#개발 업무내용

[오늘의 목표]
1. 회원가입, 로그인 기능 구현

[토의내용]

  • 로그인 기능 구현 후, 좋아요 기록 확인 대신 즐겨찾기 기능을 추가하는 것으로 결정.

#업무 중 이슈/고민 .. 그리고 해결한 내용

  1. 회원가입, 로그인 페이지 html 만들기.
register.html

<body>
	<form name="join_form" id="join-form">
    		<div class="input-group" id="user-id">
        		<label>
            			<input class="register-input" type="text" placeholder="아이디" id="username">
            		</label>
            
        	<div class="input-group" id="user-email">
            		<label>
            			<input class="register-input" type="text" placeholder="이메일" id="email_id">
            		</label>
            
        	<div class="input-group pw-input" id="user-pw">
            		<label>
            			<input class="register-input" type="password" placeholder="비밀번호" id="password">
            		</label>
            
    	</form>
        
        <div class="btn-container">
        	<div class="btn-item">
            		<button type="button" class="btn-main " id="btn-addUser" onclick="form_check()">가입하기</button>
                </div>
        </div>
</body>
login.html

<body>

	<div class="login-form">
    		<div class="input-group" id="user-id">
            		<label>
                		<input class="login-input" type="text" placeholder="아이디" id="user">
                	</label>
                </div>
                
		<div class="input-group" id="user-pw">
                        <label>
                            <input class="login-input" type="password" placeholder="비밀번호" id="password">
                        </label>
		</div>
 	</div>

	<div class="btn-container">
    		<div class="btn-item">
            		<a type="button" class="btn-main" id="btn-login" onclick="login()">로그인</a>
                </div>
	</div>

</body>
  1. 회원가입페이지에서 작성한것 db에 넣기.
register.js

function register() {
  let user_id = $("#username").val();
  let user_pw = $("#password").val();
  let user_mail = email;

  console.log(user_id, user_pw, user_mail);

  $.ajax({
    type: "POST",
    url: "/register/add",
    data: {
      userid_give: user_id,
      userpw_give: user_pw,
      usermail_give: user_mail,
    },
    success: function (response) {
      window.location.href = "/login";
    },
  });
}
app.py

@app.route("/register/add", methods=["POST"])
def register():
    userid_receive = request.form["userid_give"]
    userpw_receive = request.form["userpw_give"]
    usermail_receive = request.form["usermail_give"]

    doc = {
        "user_id": userid_receive,
        "user_pw": userpw_receive,
        "user_mail": usermail_receive,
    }

    db.users.insert_one(doc)

    return jsonify({"msg": "가입완료"})

register.js를 작성하고, app.py에 @app.route를 작성해 db로 데이터가 넘어가게 했다.

#To-do List
로그인할때 해당 id, pw가 db에 있는 것인지 체크되게.
로그인했을때 상단 navbar에서 "로그인"이 "로그아웃"으로 바뀌게.

[Django] 프로젝트 및 앱 구조
C#교과서 마스터하기 44. 비동기 프로그래밍(async&await)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage