Django Vue Tutorial: TODO project using Django, Vue.js + Fetch API
This Django Vue Tutorial is about how to create a full-stack TODO app using Django and Vue.js frameworks.
The main feature of this Django Vue.js project is performing asynchronous calls to Django app with Fetch API - fetch() function.
Also in this project I didn't use Django REST framework to show how to do it on a more lower level.
Follow me
Telegram:
Twitter:
Facebook:
️️️ Web Scraping course ️️️
is available via Patreon here:
or its landing:
The source code:
Timecodes:
00:00 - Demo
00:46 - Installing Django, creating a new Django project, and a Django app
01:51 - Creating Templates and Static folders, Django templates, adding Bootstrap, Vue.js
06:04 - Creating a new Django route
08:01 - Creating a new Django view
11:16 - Creating an HTML layout for this Django Vue.js project
16:12 - Creating a new Vue.js object
18:24 - Using of Verbatim Django tag
19:23 - Demo of Vue.js reactivity of data using the v-model directive (attribute)
20:36 - Rendering a card layout for each Task with Vue.js
22:36 - Creating Task model in Django, and couple of Task instances
26:26 - Rendering all saved Tasks (beginning)
27:15 - Serialization of a Django QuerySet object with Tasks to JSON object to send to Vue.js with JsonResponse class
29:18 - Checking a Request Headers - whether it's an AJAX call or not
31:03 - Getting all tasks from Django and displaying them to a User with Vue.js
36:00 - Creating a form for Task model to validate User's input
37:40 - Creating a Task (POST request) instance (Django side)
41:47 - Vue.js side of creating Tasks (POST request)
46:49 - Using Django CSRF tokens with Vue.js (Django and Vue.js sides)
52:19 - Refactoring of Vue.js code
58:00 - cleaning the input field after submiting the form
58:38 - Deleting a Task (Django and Vue.js sides)
01:04:24 - Completing a Task by a double click (Django and Vue.js sides)
SUBSCRIBE FOR MORE VIDEOS
Red Eyed Coder Club is the best place to learn Python programming and Django:
Subscribe ⇢
Django Vue Tutorial: TODO project using Django, Vue.js + Fetch API
