id로 DB에 검색을 때릴 때는 id 하나만 검색하라.
infoUser = FlowerUser.objects.filter(userid=req.session.get('id'))
//세션으로 검색하면 폼데이터로 정보를 또 받아올 필요X.
get은 하나라는게 예측되면 filter 대신 써도 됨.
filter -> for문
get -> object
if req.session.get('id'): #세션이 유효하다면
infoUser = Flower.objects.get(userid=req.session.get('id')) #이 세션을 가진 아이디의 정보를 infoUser에 넘겨줘.
Single Page Application(SPA)
페이지 전체를 바꾸는게 아니라 어떤 부분만 바꾸고 골격적으로 바뀌진않는다.
왜 좋은가? javascript 등 외부 라이브러리에 대한 의존도가 높아졌기 때문이다.
bootstrap
jquery
ckeditor
ajax
폼전송을 백그라운드에서 한다.
1. 폼 요소들을 만든다. (폼 안에 속해있지 X)
<input type="text" name="id" id="userid">
2. ajax를 통해서 액션값과 파라미터를 지정하고 서버로 보낸다.
$.post("naver.com/a.html", { id: $("#userid").val() }
3. 내가 소리소문없이 보낸 데이터를 바탕으로 서버가 무언가를 처리한 후 반응한다. 그러면 그 반응을 "콜백함수로" 받아 하고 싶은 처리를 한다.
ok no
alert("로그인성공")
alert("로그인실패")SPA
전체 페이지 변환없이 부분적으로 리로드
현대 홈페이지는 무조건 양방향
$("#my_div").html("<div>ㅇ마아아아아</div>") -> 부분적으로 html 수정jquery
slim > ajax
일반
콜백함수 : 특정동작이 수행된 '이후'에 실행되는 함수
jquery cdn
csrfmiddlewaretoken : document.getElementsByName("csrfmiddlewaretoken")[0].value
->id만 고유한값이기 때문에 getElementByName를 사용
실습
#views.py
def login( req ) :
return render( req, 'login.html' )
def ajax_test( req ) :
logged_member = User.objects.filter(userid=req.POST.get('id_'), password=req.POST.get('pw_'))
if logged_member:
print("로그인 성공")
req.session['userid'] = req.POST.get('id_')
return render( req, 'a.html', {'parameter1': req.POST.get('id_'), 'parameter2' : req.POST.get('pw_')} )
else:
print("로그인 실패")
return render( req, 'unlogged.html', {'parameter1': req.POST.get('id_')} )
#login.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<script>
function ajax(){
$.post(
"ajax_test",
{ id_ : $('#id').val(), pw_ : $('#pw').val(), csrfmiddlewaretoken : document.getElementsByName('csrfmiddlewaretoken')[0].value},
function ( hello ){
$("#my_div").html(hello)
}
);
}
</script>
{% csrf_token %}
<input type="text" id="id">
<input type="text" id="pw">
<button type="button" onclick="ajax()">전송</button>
<div id=my_div></div>
</body>
</html>#a.html
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
{{ parameter1 }}님, 로그인을 성공하셨습니다.
비밀번호는 <span style="color:red;">{{ parameter2 }}</span>입니다.
</body>
</html>
#unlogged.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
{{ parameter1 }}님, 로그인을 실패하셨습니다.
</body>
</html>
Front-end Engineer, Web Developer & UX/UI Design