회원가입 구현

db와 연결하여 회원가입을 구현하는 것은 무언가 큰 일이 될 것만 같기도 하고 구글링해서 찾은 정보에는 이해하지 못하는 말들이 너무 많아서 건들지 못하고 있었는데 사전 스터디를 진행하면서 스터디원분들께서도 진행하시고 여러 방법들을 알려주셔서 오케이 나도 한 번 해보자!!하고 도전해보았다.

최대한 내가 아는 방법으로 구현하고 싶었고, 여러 코드들을 참고하다보니 어느새 완성!
뿌듯하다 히히

🚨어려웠던 점 : 물론 구현하는 자체도 어렵긴 했지만 나는 그보다 서버와 클라이언트를 연결하는 과정에서 자꾸 에러가 나서 시간이 많이 걸렸다.. href에 혼란이 왔었고 요건 html파일명이 아닌 내가 지정한 url로 바꿔주니 술렁술렁 잘 넘어갔다!!

🐯 app.py

## home
@app.route('/')
def home():
    return render_template('index.html')

## 회원가입
@app.route('/letin', methods=['GET','POST'])
def letin():
    if request.method=='GET':
        return render_template('letin.html')
    else :
        id_receive = request.form['id_give']
        pw_receive = request.form['pw_give']
        phone_receive = request.form['phone_give']
        addres_receive = request.form['addres_give']

        doc = {
            'id': id_receive,
            'pw': pw_receive,
            'phone': phone_receive,
            'addres': addres_receive
        }
        db.surfusers.insert_one(doc)

        return jsonify({'msg': '회원가입완료!'})

🐯 letin.html

function letin() {
            let id = $('#id').val()
            let pw = $('#pw').val()
            let chkpw = $('#chkpw').val()
            let phone = $('#phone').val()
            let addres = $('#addres').val()
            let chkbox = $("input:checkbox[name='chkbox']").is(":checked")

            $.ajax({
                type: "POST",
                url: "/letin",
                data: {id_give: id, pw_give: pw, phone_give: phone, addres_give: addres},
                success: function (response) {
                    if (id == '' || pw == '' || chkpw == '' || phone == '' || addres == '') {
                        alert('모든 항목을 입력하세요')
                    } else if (chkbox == false) {
                        alert('개인 정보를 동의해주세요')
                    } else {
                        alert(response["msg"])
                        window.location.href = '/'
                    }
                }
            })
        }

html 파일은 기존에 만들어놓았던 function에 ajax 폼만 추가했다!