[3주차] 회원가입, 로그인 만들기

회원가입 만들기

모델 만들기

사용자 정보에 대한 것은 user 폴더에서 작업합니다. 

models.py 파일에 아래와 같이 테이블 구조를 작성하고, 콘솔에서 makemigrations, migrate 명령어를 사용해 DB를 만듭니다.

class User(models.Model):
    email = models.TextField()
    password = models.TextField()
    nickname = models.TextField()
    name = models.TextField()
    profile_image = models.TextField()

 

화면 구성하기

회원가입을 위한 새로운 웹 페이지를 만들어야 하므로, Template 안에 user 폴더를 만들어 새로운 html을 생성합니다. 

부트스트랩 홈페이지에서 스타터 템플릿을 복사해 붙여넣은 다음, 회원가입 정보를 받기 위한 Text Form을 찾아서 넣습니다. 

비밀번호는 plain text가 노출되지 않도록 인풋 타입(type="password")에 신경씁니다

회원가입 버튼을 누르면 동작할 자바스크립트를 Jquery로 넣어줍니다. 

<script>
    $('#button_join').click(function () {
        console.log('버튼 클릭했습니다.');
        const email = $('#input_email').val()
        const name = $('#input_name').val()
        const nickname = $('#input_nickname').val()
        const password = $('#input_password').val()

        $.ajax({
            url: "http://127.0.0.1:8000/join/",
            method: "POST",
            data: {
                email: email,
                name: name,
                nickname: nickname,
                password: password
            },
            success: function (data) {
                console.log("성공");
                alert("회원가입 성공");
            },
            error: function (request, status, error) {
                console.log("에러");
                alert("회원가입 실패");
            },
            complete: function () {
                console.log("무조건실행");
            }
        });

    });
</script>

 

입력받은 데이터를 DB에 저장하는 views.py 작성하기

user 폴더 내의 views.py에 Join 이라는 이름의 클래스를 작성하여 POST로 요청받으면 데이터를 DB에 저장하도록 설정합니다.

from rest_framework.response import Response
from rest_framework.views import APIView
from user.models import User


class Join(APIView):
    def get(self, request):
        return render(request, 'user/join.html')

    def post(self, request):
        print("POST 요청이 들어옴")  # 콘솔 확인, 없어도 됨

        email = request.data.get('email')  # 인풋에서 이메일 가져오기
        name = request.data.get('name')  # 인풋에서 이름 가져오기
        nickname = request.data.get('nickname')  # 인풋에서 닉네임 가져오기
        password = request.data.get('password')  # 인풋에서 비밀번호 가져오기
        profile_image = ''

        User.objects.create(email=email,
                            name=name,
                            nickname=nickname,
                            password=password,
                            profile_image=profile_image)

        return Response(status=200, data=dict(message="회원가입에 성공했습니다."))

 

 

로그인 만들기

앞서 만들었던 회원가입 html 코드를 사용하여 login.html을 만들고, views.py에 작성했던 Join 클래스를 복사하여 Login 클래스를 만들어줍니다. 

class Login(APIView):
    def get(self, request):
        return render(request, 'user/login.html')

    def post(self, request):
        input_email = request.data.get('email')  #인풋에서 이메일 가져오기
        input_password = request.data.get('password')  #인풋에서 비밀번호 가져오기
        #여기까지가 화면에서 올라온 email과 password 저장

        #입력받은 email이 DB(user_user)에 있는지 확인
        if User.objects.filter(email=input_email).exists():  #테이블에 있으면 True 반환됨
            #회원정보 찾으면
            find_user = User.objects.filter(email=input_email).first()  #찾은 결과가 여렷인 경우 첫번째 값만 반환
            if find_user.password == input_password:
                #비밀번호가 맞은 경우 --> 로그인 성공
                return Response(status=200, data=dict(message="로그인 성공"))
            else:
                #비밀번호가 틀린 경우
                return Response(status=400, data=dict(message="비밀번호가 틀렸습니다."))

        else:
            #회원정보 못찾으면
            return Response(status=404, data=dict(message="회원정보가 없습니다."))

 

페이지(화면) 간 이동하기

화면을 이동하기 위해 <a> 태그를 사용하는 방법과, javascript(jquery)를 사용하는 방법이 있습니다. 

 

jquery로 설정하려면 button 등의 태그에 id를 설정하고, script안에 location.href 명령어로 이동할 페이지를 지정합니다.

<a> 태그를 사용하면 간단하게 하이퍼링크를 구성할 수 있으며, <button> 태그와 함께 사용할 수도 있습니다. 

<a href="http://127.0.0.1:8000/main/"> 메인이동 링크 </a>
<a href="http://127.0.0.1:8000/main/"><button> 메인이동 버튼 </button></a>