[장고DRF]1,2주차(CRUD)

ㅁdrf 1주차

1,2 강 오티

 

3.강프론트와 백엔드 나누는다는 의미

1)퓨어장고 루틴

urls로 요청 > views.py의 함수와 연결(views.함수) > 함수 실행(return 해서 템플릿으로 보여줌) > *template app > .html 파일에서 장고 탬플릿 랭귀지 사용 {{content}}

2)어떻게 프론트와 통신할 것인가?

이것을 편리하게 해주는 것이 장고 drf

 

4.포스트맨으로 살펴보는 인터넷

 

5.http 웹의 요청 흐름 살펴보기

클라이언트 > 서버 정보 요청(request)

서버 > 클라이언트 정보 응담(response)

주고받는 형식에 대한 약속 : 프로토콜 http

+)웹브라우저 흐름

dns조회 > http 요청메시지작성 > soscket 라이브러리 통해서 전달 > tcp/ip 작성되고 안에 http 메시지 포함

 

6.http 메시지 구조와 기초

1)클라이언트 서버 구조

-서버에 데이터와 비즈니스 로직 / 클라이언트에 ui 넣기

2)http 메시지

-리퀘스트 : 리퀘스트(겟, 포스트같은 것들) 라인 > 헤더 > 빈줄(헤더와 바디구분) > 바디(선택적)

-리스폰스 : status 라인 > 헤더 > 빈줄(헤더와 바디구분) > 바디(선택적)

3)http 안좋은 코드

url 남발하기. 제일 중요한 것은 리소스 식별!

리소스란? 회원이라는 개념 자체. 이것이 url 매핑, 행위가 메소드

리소스/행위를 분리하는 것이 restful api

4)메소드

겟은 바디가 없어서 주소창에 쿼리셋으로 등록(쿼리스트링 사용)

 

7.http 상태코드

 

8.http 헤더

 

ㅁdrf 2주차

오티

 

2.프로젝트 세팅

1)폴더만들기

2)가상환경만들고 접속

3)pip list 확인(두개만 있어야함)

4)장고 설치

5)requirements 파일 생성(내가 다운 받을 때는 pip install –r requirements.txt)

6)장고 프로젝트 만들기

django-admin startproject drf_week2 . #.을 꼭 붙여주자!

7)깃에 올리기

(1)gitignore 추가

(2)git init

(3)git add .

(4)깃허브 레포만들고 주소 복사

(5)git remote add origin 주소

(6)git commit –m ‘init project’

(7)git push origin main

8)장고프레임워크 추가 사항 추가 후 서버돌리기

*settings.py

app에 ‘rest_framework’, 추가

랭귀지코드 : ‘ko-kr’ / timezone = ‘Asia/Seoul’

한 후 서버 돌리기

 

ㅁdrf 3주차 시리얼라이저

1)프로젝트 만들기

python manage.py startapp articles

*settings.py에서 app 추가

2)모델만들기(항상 제일 먼저해줘야할 것)

-흐름은 models에 column 만들고 db에 저장 > views.py의 템플릿 이용해서 html로 보여주는 것. 이제는 json을 이용해서 보내준다.

*json

-딕셔너리 형태

3)article 모델 작성

*articles > models.py

class Articles(models.Model):

title = models.CharField(max_length=100)

content = models.TexttField()

create_at = models.DateTimeField(auto_now_add=True)

updated_at = models.DaateTimeField(auto_now=True)

>>마이그레이션

4)admin에 들어가서 article을 만들어보기

*articles의 admin.py

from articles.models import Article

 

admin.site.register(Article)

*터미널

python manage.py createsuperuser 해서 admin 계정 생성

>서버돌리고 /admin 입력

admin 계정 로그인 후 새 글만들기

+)admin페이지에서 제목으로 뜨게 하기

*models.py class 맨 밑 updated_at 줄 맞춰서

def __str__(self):

return str(self.title)

5)api 연결해서 url 만들고 작성한 모든 게시글 조회하기

(1)url 에 app 포함 시키기

*project > urls.py

from django.urls import path, include

 

path(“articles/”, include(“articles.urls”)),

#이때 articles에는 아직 urls가 없으므로 urls.py 만들어줌

*articles의 urls.py

복사하고 admin 줄 필요 없으니 날려주고

from articles import views #views 추가

path(“index/”, views.index, name=“index”), #views에 아직 index 없으므로 views.py 이동

*views.py

from rest_framework.response import Response #drf의 Response 기능을 쓰기위해사용

#그리고 원래 import render가 있는데 이건 templates 돌릴 때 사용. 이제 사용 안하니까 삭제.

 

def index(request):

return Response(“연결되었습니다!”)

>해보면 오류남. 그럼 이제 이건 이해말고 그냥 시키는대로 해보기(api_view import하기)

*views.py

from rest_framework.decorators import api_view

 

@api_view([‘GET’])

def index(request):

return Response(“연결되었습니다!”)

#api는 drf에서 api를 간단하게 사용할 수 있게끔하는 브라우저블 api다.

6)articels 에 있는 데이터를 index에 접속했을 때 보여주기

*views.py

@api_view([‘GET’])

from articles.models import Article

 

def index(request):

articles = Article.objects.all()

return Response(articles)

>>>object of type is not JSON serializable : 뭔가 시리얼라이즈를 해줘야함. ()안에 str이나 dict는 들어갈 수 있음.

*views.py

def index(request):

articles = Article.objects.all()

article = articles[0]

article_data = {

"title":article.title,

"content":article.content,

"created_at":article.created_at,

"updated_at":article.updated_at,

}

return Response(article_data)

>이렇게 딕셔너리를 만들어주는 과정이 너무 귀찮음. 그래서 우리는 시리얼라이저를 활용.

7)시리얼 라이저 해주기

-이미 models.py에 다 정의되어있음. 그냥 article_data를 딕셔너리 형태로 만들어줄 필요 있음. 정확히는 json 형태로 만들어주는 것

 

#파이썬 데코레이터 function

-함수를 꾸며주는 함수. 인자를 함수로 받음

 

4.모델시리얼라이저를 이용한 crud

1)*articles > serializers.py

from rest_framework import serializers

from articles.models import Article

 

class ArticleSeriallizer(serializers.ModelSerializer):

class Meta:

model = Article

fields = “__all__”

>views에서 쓰기 위해서

*views.py

from articles.serializers import ArticleSerializer

article =articles[0] < 지워주기

article_data = {

"title":article.title,

"content":article.content,

"created_at":article.created_at,

"updated_at":article.updated_at,

} -> serializer = ArticleSerializer(article)

return Response(serializer)

>>>에러 뜸 > (serializer.data)를 해야 에러 안뜸.

articles 여러개 추가하고 싶을 때

aarticles=Article.objects.all()

serializer=ArticlesSerializer(articles,many=True)

>리스트가 만들어지면서 정상적으로 나옴.

admin에서 계정 추가해서 확인해보기

2)시리얼라이저 이용해서 데이터 생성하기

*views.py

@api_view([‘GET’.‘POST’])

def index(request):

if request.method == ‘GET’:

articles=Article.objects.all()

serializer=ArticlesSerializer(articles,many=True)

return Response(serializer.data)

elif request.method == ‘POST’:

print(request) #request 찍어보기, 인터넷창에서 바로 값넣어보기(정보가 안넘어감 request.data 해야 넣어감.

return Response()

3)디시리얼라이징해주기(json을 다시 article모델에 맞춰서 넘겨주는 것)

serializer =Articleserializer(request.data)

serailzer.save()

>에러 뜸(벨리드확인을 먼저 해야함)

먼저 데이터가 유용한지 검증함.

@api_view([‘GET’.‘POST’])

def index(request):

if request.method == ‘GET’:

articles=Article.objects.all()

serializer=ArticlesSerializer(articles,many=True)

return Response(serializer.data)

elif request.method == ‘POST’

serializer =Articleserializer(data = request.data)

if serializer.is_valid(): #유효성 검사

serailzer.save() #맞으면 저장

else: #아니면 에러 출력

print(serializer.errors)

>>>하고 title만 내용적어주고 입력하면 오류남. content는 필수입력항목입니다.라고 뜨는데 models.py 가서 null=True 해줘야함. blank=True 도 해줘야함.

4)response에 status 입력해주기

*articles > views.py

from rest_framework import status

if serializer.is_valid():

serailzer.save()

 

else:

print(serializer.errors)

return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

+)성공적으로 뭘 만들었을 때 추가해주는 것

if serializer.is_valid(): #유효성 검사

serailzer.save()

return Response(seliralizer.data, status=status.HTTP_201_CREATED)

 

5)update, delete, 상세페이지

%get

-업데이트,딜리트는 상세 페이지 관련 id가 필요 > url내용이 바뀜.

(1)url만들기

*articles의 urls.py

path(“<int:article_id>/”,views.article_view, name=“article_view”),

(2)함수 추가하기

*articles의 views.py

@api_view([‘GET’,‘PUT’,‘DELETE’])

def article_view(request, article_id):

if request.method == ‘GET’:

return Response(article_id)

>>>웹주소창에 1217.0.0.1:80000/articles/1이라고 치면됨. 이때 url 쌍따옴표 안하면 오류

(3)상세페이지 받아오기

@api_view([‘GET’,‘PUT’,‘DELETE’])

def article_view(request, article_id):

if request.method == ‘GET’:

article = Article.objects.get(id=article_id)

serializer = ArticleSerializer(article) #없으면 안돌아감.

return Response(serializer.data)

+)해당 id 가 없으면 오류페이지 등장, 오류페이지 출력 안하게 하기 > get object404 사용

*articles > views.py

from rest_framework.generics import get_object_or_404

@api_view([‘GET’,‘PUT’,‘DELETE’])

def article_view(request, article_id):

if request.method == ‘GET’

article = Article.objects.get(id=article_id)

article = get_object_or_404(Article, id=article_id)

serializer = ArticleSerializer(article)

return Response(serializer.data)

>>>>>>>>%put(post와 get의 짬뽕)

(1)

elif request.method == ‘PUT’:

article = get_object_or_404(Article, id=article_id)

serializer = ArticleSerializer(article, data = request.data)

if serializer.is_valid():

serializer.save()

return Response(serializer.data)

%delete

elif request.method == ‘DELETE’:

article = get_object_or_404(Article, id=article_id)

article.delete()

return Response(status=status.HTTP_204_NO_CONTENT)

+)index 수정하기

(1)url 변경

“index”>“” ,views.articleAPI

(2)views. py 변경

def index > articleAPI / article_view > articledetailAPI

 

5강 포스트맨

1)url이 너무 길어서 귀찮을 때

(1)enveiortments

local . deploy 등 설정

-local > variable : host > initial,cuttrent value : http://127.0.0.1:8000 주소적은 후 저장

(2)다시 게시글 가져오기 들어감

{{host}}

2)업데이트, 딜리트 만들기

 

6.제이슨이란

서버-서버, 클라-서버 주고받을 때 사용하는 데이터 형식

 

7.스웨거 적용하기

api를 문서화 하는 것이 중요

프론트에서 api를 한눈에 보기 힘듬

프로젝트 시작할 때 만들어두면 편함 > drf swagger

1)설치

pip install –U drf-yasg(가상환경 쓸때는 –U제거 가능)

pip freeze > requirements.txt

2)앱 추가

*settings.py

APPS = 'django.contrib.staticfiles', # required for serving swagger ui's css/js files

'drf_yasg',

3)urls.py

from rest_framework import permissions

from drf_yasg.views import get_schema_view

from drf_yasg import openapi

 

...

 

schema_view = get_schema_view(

openapi.Info(

title="Snippets API",

default_version='v1',

description="Test description",

terms_of_service="https://www.google.com/policies/terms/",

contact=openapi.Contact(email="contact@snippets.local"),

license=openapi.License(name="BSD License"),

),

public=True,

permission_classes=[permissions.AllowAny],

)

 

urlpatterns = [

re_path(r'^swagger(?P<format>\.json|\.yaml)$', schema_view.without_ui(cache_timeout=0), name='schema-json'),

re_path(r'^swagger/$', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),

re_path(r'^redoc/$', schema_view.with_ui('redoc', cache_timeout=0), name='schema-redoc'),

...

]

하고 정리해준 후 위에 import re_path (django.urls import include 뒤에)

>사이트주소에 주소/swagger/ 하면 만든 api가 나옴.

 

7강 클래스 뷰

-기존에는 함수형 view > 이제 class view

class 안에 def는 메소드

1)api view 가져오기

from import apiview

2)class 생성(def 이하는 함수에서 그대로 내용 가져온다.)

calss ArticleList(APIView):

def get(self, request, format=None):

articles=Article.objects.all()

serializer = ArticleSerializer(articles, many=True)

return Response(serializer.data)

def post(self, request, format=None)L

그대로 내용 가져오기

3)url 변경

views.ArticleList.as_view(),

4)detail도 마찬가지로 똑같이하면됨.

다만 detail에서 def get(self, request, article_id, format=None) #pk 대신 article_id 사용

4)스웨거 사용시 post는 def이용하면 잘 안됨. class 이용하면 잘되는데 해보기

*veiw.py

from drf_yasg.utils import swagger_auto_schema

post에 사용해줄것이기 때문에 def post 바로 윗줄에

@swagger_auto_schema(request_body=ArticleSerializer)

 

자바스크립트 부족한 부분을 jquery로 채움.($.ajax 사용)

요즘은 자바스크립트 많이 발전해서 jquey 안씀.

프론트에서 백엔드 데이터 받아오기

1)폴더만들기

drf front 폴더 따로 만들기

vs코드 세팅에서 색깔 바꿔주기(선택)

2)파일생성

*index.html > !하고 엔터 브라우저로 켜주기

3)자바스크립트 파일 만들기

*index.js

console.log(“js불러왔음!”)

4)js를 html 불러오기

*index.html

</head>위에

<script src=“index.js”></script>

5)js에서 실제로 데이터 불러오기

*index.js

window.onload = async function loadArticles(){ #로딩이 될 때 바로 할 것

const response = await fetch(‘http://127.0.0.1:8000/articles/’ ,{method:’GET‘})

 

resopnse_json = awit response.json()

 

console.log(response_json)

 

 

 

 

}

>웹페이지 확인하면 에러뜸. cors관련 에러. cors는 주소와 포트가 다른 것은 허용이 안됨.

cors 허용을 위해서는 장고 헤더에 cors관련 정보 넣어주기(이건 백엔드 에 넣어준다.)

(1)pip install django-cors-headers

pip freeze > requirements.txt

 

*settings.py에서 진행

(2)app 설치

“corsheaders”,

(3)middleware 추가

“corsheaders.middleware.CorsMiddleware”,

“django.middleware.common.CommonMiddleware”, #두개추가가아니라 이건 원래적혀있고 그위에 추가하라는 말

(4)configure

CORS_ALLOWED_ORIGINS = [

"https://example.com",

"https://sub.example.com",

"http://localhost:8080",

"http://127.0.0.1:9000",

]

 

CORS_ALLOW_ALL_ORIGINS = True #위에거랑 밑에거 택 1(밑에거는 보안에 취약)

하고 콘솔창확인하면 백엔드 정보 다 넘어옴.

6)html 로 받아오기

*html

body에 새로 div 지정

<div id=“articles”></div>

*js

const articles = document.getElementById(“articles”)

 

response_json.forEach(element => { #for문으로 response_json 의 데이터들이 차례로 돔.

conseol.log(element.title) #하면 제목만 좍 찍힘

const newArticle = document.createElement(“div”)

newArticle.innerText = element.title

articles.appendChild(newArticle)

});

 

}