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

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: https://twitter.com/CoderEyed Facebook: https://fb.me/redeyedcoderclub ============================ 📎️ The source code is available via Patreon: https://www.patreon.com/posts/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: https://www.patreon.com/red_eyed_coder_club or its landing: https://red-eyed-coder-club.github.io/courses/practical-python-web-scraping The Django explanations are available in the Django 3 Blog Engine Tutorial /watch/wtjZYvwIzgro9z6YSDgqbbqIbfXUIm4eLP=tsil&E_D91o8LaeWLZ 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 ⇢ /channel/UCh_LSaTv2GeZ3woJNTGihew

Category