[회원가입/로그인하여 게시판 API 연동하기] 타임어택 해설
기능1. 회원가입
- signup.html 파일 기본적인 body 구성
<body>
<div class="login_page">
ID: <input id="input_id" type="text">
<br>PW: <input id="input_pw" type="password">
<br><button onclick="sign_up()" class="signup">회원가입</button>
<br><button onclick="sign_in()" class="signin">로그인</button>
</div>
</body>입력받을 아이디와 패스워드는 <input> 을 사용하여 입력 받고 <script>사용을 위해 id='' 값 지정해준다. 중요한건 type을 아이디는 'text'로, 패스워드는 'password' 타입으로 한다. <button>은 클릭시 함수 실행을 위해 onclick='' 사용한다.
- <script> signup 함수 호출
function signup() {
let username = $("#input_id").val()
let password = $("#input_pw").val()
$.ajax({
type: "POST",
url: "/signup",
data: {
'username_give': username,
'password_give': password
},
success: function (response) {
alert(response['msg'])
window.location.href ='/';
// window.location.reload();
},
fail: function (response) {
console.log('fail')
}
});
}입력받은 아이디와 패스워드 $('#..').val() 로 값 읽어서 let으로 변수에 담는다.
ajax요청은 post타입, /signup url 쓰고 서버에게 줄 데이터(아이디,비번) 딕셔너리로 묶는다. (서버에서 아이디는 username_give , 비번은 password_give 라는 이름으로 받음) success 하면 경고창에 response 받은 값을 띄우고 window.location.href 값이 '/' 이므로 현재페이지를 다시 로딩한다.
- app.py 회원가입 @app.route 실행
@app.route('/')
def home():
return render_template('signup.html')url:/ , 시작페이지로 signup.html 페이지 반환.
@app.route('/signup', methods=['POST'])
def signup():
# 회원가입
username_receive = request.form['username_give']
password_receive = request.form['password_give']
password_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
# DB에 저장
doc = {
"username": username_receive, # 아이디
"password": password_hash, # 비밀번호
}
db.timeattack0506.insert_one(doc)
return jsonify({'msg': 'signup succeed'})ajax 요청 코드에서와 같이 url:/signup, methods=post 로 맞추고 request.form[클라이언트에서 준 이름]을 _receive로 저장한다. 저장한 비밀번호는 hashlib.sha256 함수로 암호화 하여 다시 저장한다. 한 유저의 정보들을 딕셔너리로 묶어서 DB에 저장한다( db.카테고리이름.insert_one(딕셔너리이름) ) 마지막으로 클라이언트에 jsonify 형식으로 msg 값 반환한다.
기능2.
'AI 웹 개발 과정 > 개인 프로젝트' 카테고리의 다른 글
| 개인 프로젝트 05 : 타임어택 미션 - 머신러닝 타임어택미션 + 2주차 숙제 (0) | 2022.05.15 |
|---|---|
| 개인 프로젝트 04 : turtlestagram | 회원가입, 로그인 페이지 구현 (0) | 2022.05.15 |
| 개인 프로젝트 02 : 인스타 UI 클론 코딩 - 3일차 제출 (1) | 2022.05.02 |
| 개인 프로젝트 02 : 인스타 UI 클론 코딩 - 2일차 (0) | 2022.04.29 |
| 개인 프로젝트 02 : 인스타 UI 클론 코딩 - 1일차 (0) | 2022.04.29 |