明日学習団制作チャレンジ6期(2)

18325 ワード
明日の学習カード 公費支援 課題の作成 明日学習団 スパルタコードクラブ コーディングスキーム エンコーディング テキストリンク
#コード開発ログの冒頭の一言
  • 会員が加入し、ログイン機能を実現!
    • #開発作業内容
    [今日の目標]
    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>
  • 会員登録ページに記入した内容を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.ルーティングを記述し,dbにデータを転送する.
    #To-do List
    ログイン時にidとpwがdbにあるかどうかを確認します.
    ログイン時に、上部navbarの「ログイン」を「ログアウト」に変更します.
    [Django]プロジェクトとアプリケーション構造
    C#教科書を身につける.非同期プログラミング(async&await)