Django Vue Tutorial: TODO app (AJAX via Axios.js)

Published: 02 May 2020
on channel: Red Eyed Coder Club

25,381

523

This Django Vue Tutorial uses as an example a very simple TODO app, that we'll build with Django and Vue.js on front-end, where AJAX requests are performed with Axios.js library. Also I'm using Bootstrap to keep the UI clean.
This video is mostly Vue.js tutorial than Django.

Follow me @:
Telegram: https://t.me/red_eyed_coder_club
Twitter:   / codereyed
Facebook: https://fb.me/redeyedcoderclub

============================
📎️ The source code is available via Patreon:
  / django-3-todo-js-36737726
=============================

Timecodes:

00:00 - Demo of the project.
00:49 - Creating a new Django project, attaching Vue.js, Axios.js
04:48 - Creating a basic HTML layout of the base template
09:40 - Creating a main HTML layout of the project with Bootstrap
14:23 - Creating a Vue.js object, and using of the VERBATIM Django tag
17:21 - Using of data reactivity in Vue.js, v-model directive
20:36 - Explanation of the main logic of interaction between Vue and Django
21:10 - Creating a Django model (Task), and using of Django forms for data validation
23:56 - Getting all tasks from a database and returning to Vue (backend). JsonResponse()
26:34 - Creating a new task (backend)
29:20 - Getting all tasks from Django, and displaying to a user. Creating a new task (Vue, frontend). Sending requests from Vue to Django with Axios.js
44:51 - Changing the state of task (updating in CRUD) to completed (Vue frontend side)
49:48 - Updating the state of task (Django, backend side)
51:55 - Adding a css styles to task objects with :class attribute (Vue)
55:57 - Deleting tasks (Vue, frontend side)
58:34 - Deleting tasks (Django, backend side)

➥ Please ➥ Like ➥ Comment ➥ Subscribe

✴️✴️✴️ Web Scraping course ✴️✴️✴️
is available via Patreon here:
  / red_eyed_coder_club

or its landing:
https://red-eyed-coder-club.github.io...

The Django explanations are available in the Django 3 Blog Engine Tutorial
   • Python Django Tutorial #0: Demo of Dj...

In this video:
How to use Vue.js with Django.
Vue.js directives (v-model, v-for etc.)
Event listeners and handlers
How to manipulate with a tag's CSS classes with Vue.js (:class directive)
How to serialize Django Models to JSON-serializable object
How to get CSRF_TOKEN from cookies with Axios.js
How to pass CSRF_TOKEN into the Django view via a request's header.

etc.

Links:
https://getbootstrap.com/
https://cdnjs.com/libraries/vue
https://cdnjs.com/libraries/axios

➥➥➥ SUBSCRIBE FOR MORE VIDEOS ➥➥➥
Never miss a new video.
Subscribe ⇢    / @redeyedcoderclub