Denis Ivy
Django-React Tutorial
TUTORIAL 01
1. pip install djangorestframework
2. add rest_framework on settings file
# all the codes below are to be added on API folder (or any app created within)
3. on views file
from [Link] import render
from [Link] import JsonResponse
from rest_framework.decorators import api_view
from rest_framework.response import Response
from .models import Task
from .serializers import TaskSerializer
# what this decorator allows is get the GET response from api
@api_view([‘GET’])
def apiOverview(request):
api_url = {
‘List’:/task-list/’,
‘Detail View’:’task-detail/<str:pk>/’,
‘create’:’task-create/’,
‘update’:/task-update/<str:pk>/,
‘Delete’:’/task-delete/<str:pk/’
}
return Response(api_url)
@api_view([‘GET’])
def taskList(request):
tasks = [Link]()
seializer = TaskSerialzer(tasks, many=True)
return Response([Link])
@api_view([‘GET’])
def taskDetail(request,pk):
tasks = [Link](id=pk)
seializer = TaskSerialzer(tasks, many=False)
return Response([Link])
@api_view([‘POST])
def taskCreate(request):
seializer = TaskSerialzer(data=[Link])
if serializer.is_valid():
[Link]()
return Response([Link])
@api_view([‘POST])
def taskUpdate(request,pk):
tasks = [Link](id=pk)
seializer = TaskSerialzer(instance=task, data=[Link])
if serializer.is_valid():
[Link]()
return Response([Link])
@api_view([‘DELETE])
def taskDelete(request,pk):
tasks = [Link](id=pk)
[Link]()
return Response(‘Item successfully de)
4. on models file
from [Link] import models
class Task([Link]):
task=[Link](max_length=200)
completed = [Link](default=False)
def __str__(self):
return [Link]
5. create a new file on the app named [Link]
from rest_framework import serializers
from .models. import Task
class TaskSerializer([Link]):
class Meta:
model= Task
fields = ‘__all__’
6. on [Link] file
from [Link] import path
from .import views
urlpatterns = [
path(‘’, [Link], name=”api-overview”),
path(‘task-list/’, [Link], name=”task-list”),
path(‘task-detail/<str:pk>’, [Link], name=”task-detail”),
path(‘task-create/’, [Link], name=”task-create”),
path(‘task-update/<str:pk>’, [Link], name=”task-update”),
path(‘task-delete/<str:pk>’, [Link], name=”task-delete”),
]
Just Django
Django-React Tutorial
TUTORIAL 01
Source: [Link]
1. create virtual environment
2. activate the virtual environment
3. pip install django
4. pip install djangorestframework
5. django-admin startproject djreact .
6. python3 [Link] migrate
7. python3 [Link] startapp articles
8. add the following on the installed apps section of the settings:
INSTALLED_APPS = [
‘…’,
‘rest_framework’,
‘articles’
]
9. On the main [Link] file add the following
import [Link] import path, include
urlpatterns = [
‘…’,
path(api-auth/’, include(rest_framework.url)),
]
10. On the settings file add the following at the bottom of the file.
REST_FRAMEWORK = {
‘DEFAULT_PERMISSION_CLASSES’: [
‘rest_framework.[Link]’
]
}
11. on the articles>[Link] file add the following:
from [Link] import models
class Article([Link]):
title = [Link](max_length=120)
content = [Link]()
def __str__(self):
return [Link]
12. python3 [Link] makemigrations articles
13. python3 [Link] migrate articles
14. on articles>[Link] add the following:
from .models import Article
[Link](Article)
15. python3 [Link] createsuperuser
16. create 2 artcles from the admin panel
# NOW WHAT THIS TUTOR IS DOING IS HE IS CREATING ANOTEHR FOLDER TO WORK
WITH APIS WHICH I DON’T THINK WE WOULD REQIURE BUT LETS JUST CONTINUE THE
LECUTRE.
17. create a folder inside articles named api
18. initialize the folder by adding a file named __init__.py inside the api folder.
19. create another file named [Link] inside the api folder.
from rest_framework import serializers
from [Link] import Article
class ArticleSerializer([Link]):
class Meta:
model = Article
fields = (‘title’, ‘content’)
20. Inside api folder create a new file named [Link]
from rest_framework import ListAPIView, RetrieveAPIView, CreateAPIView, UpdateAPIView,
DestroyAPIView
from [Link] import Article
from .serializers import ArticleSerializer
class ArticleListView(ListAPIView):
queryset = [Link]()
serializer_class = ArticleSerializer
class ArticleDetailView(RetrieveAPIView):
queryset = [Link]()
serializer_class = ArticleSerializer
class ArticleCreateView(CreateAPIView):
queryset = [Link]()
serializer_class = ArticleSerializer
class ArticleUpdateView(UpdateAPIView):
queryset = [Link]()
serializer_class = ArticleSerializer
class ArticleDeleteView(DestroyAPIView):
queryset = [Link]()
serializer_class = ArticleSerializer
21. create a new file named [Link] inside api folder.
from [Link] import path
from .views import ArticleListView, ArticleDetailView, ArticleCreateView , ArticleUpdateView,
ArticleDeleteView
urlpatterns = [
path(‘’,ArticleListView.as_view()),
path(‘create’, ArticleCreateView.as_view()),
path(‘<pk>’, ArticleDetailView.as_view()),
path(‘<pk>/update/’, ArticleUpdateView.as_view()),
path(‘<pk>/delete/’, ArticleDeleteView.as_view()),
]
22. on the main url file add the following:
urlpatterns = [
‘…’,
path(‘api/’ include(‘[Link]’))
]
23. pip install django-cors-headers
24. on INSTALLED_APPS of the settings file add the following:
INSTALLED_APPS = [
‘…’,
‘corsheaders’
]
25. on the MIDDLEWARE of the settings file add the following:
MIDDLEWARE = [
‘…’,
‘[Link]’,
]
26. on the bottom of the settings files add the following line of code.
CORS_ORIGIN_ALLOW_ALL=True
the above line of code will white list all the sites to make requests
But if you need only a few sites to be white listed we need to do the following:
CORS_ORIGIN_WHITELIST = [
‘[Link]’
‘localhost:8000’,
‘[Link]:8080’,
‘[Link]’
]
# NOW ON THE ABOVE SECTION WHAT WE SEE IS THE CLASS IS CONSTANTLY BEING
REPEATED THERE HAS GOT TO BE A BETTER WAY! WE WILL NOW UPDATE THE
ABOVE VIEW CODE AND URLS TO MAKE IT CLEANER.
27. Edit the urls file as below:
from rest_framework.routers import DefaultRouter
from [Link] import ArticleViewSet
router=DefaultRouter()
[Link](path(‘’, ArticleViewSet, base_name=”articles”)
urlpatterns = [Link]
28. Update the views file as below;
from rest_framework import viewsets
from [Link] import Article
from .serializers import ArticleSeralizer
class ArticleViewSet([Link]):
serializer_class = ArticleSerializer
queryset = [Link]()
# THE ABOVE DOES NOT ALLOW ANY MODIFICATION AS THE INDIVIDUAL CLASSES
