Django and Vue Todo App (Django Rest Framework / Vue CLI)

hi and welcome to building a to-do app using a few J's and Django at the back end and this Django NVGs example I will be telling it to do that this is a trivial thing to do when you know a language but it's also a great way to learn many of the key concepts of programming I will be starting off this Django and we just tutorial by installing and setting up Django first they will create a virtual environment called view angle T angle is just a combination of Django and view virtual env Django and then three six four which is the Python version I'm running I wanted to create that I can go into it and activate it parent source then activate and now we have a virtual environment running then I'd install Django and a few dependencies I can start with Django pip install tango and I waiting need Django rest framework this is what I'm going to use to create the API and I need to install Django cores headers there is no installed jungle course header is to allow requests on via Ajax we're at ease I would get an error in the browser if you want to read more about the Django course headers you can check out their github page there's a few more steps I need to do here and one is to create the Django project Django admin start project we go and go and there it's grated so then I can go to visual studio code then open up the project you angle and inside the settings file I need to include Django rest framework sorry it's not like that it's a rest framework and course headers in one word then I need to set a few others things like course origin allow all equals true this makes it possible to around the Ajax if I want more security I can whitelist a domain and stuff like that but for this tutorial this will be enough said here I need to add a local IP address like this and then I need to go over it's important that it's over the common middleware course headers but middleware dot course middleware then I can go back to the command line and run the initial migration script may migrations I don't manage to PI migrate and now the tables should be ready then I can try to run the project managed by run server copy this address yeah it's working perfect then I can go back and stop it and create a super user for the admin interface create super you user admin and the password and then the super user is created now the jungle is working as we want we can continue to the next part which is the view so now just split the screen 20 documents create a new folder hold view I'm here I want to create a new project view you you create you and go so this will create a new project want to manually select features I'm needed enter for this but I want CSS preprocessors and I want router yes that's it yes sass using notes s package the Chasen and I don't need to save this game to project this finished I can go into it and I can install two dependency Axios which is what I'm going to use to talk to the backend and I want to install bulma which is the CSS framework I'm going to be used to make it easier to create a nice interface then I can go back to visual studio code again and I can add one more project here just click add folder to workspace and then I go and at this view angle and inside the applet view I want to import the Bulmer just to see that everything is working and poorest slash node modules - boom ah I think that's everything we are going to need because I can insert a button just to see that it's working but it's right right now I'm safe then we can run the command here npm run serve i can copy this hit enter everything is working here and also the primary button is a Bullmastiff okay now that the review project is created I can go back to Jango again and I can go into the command line we're going to create app for the tasks to do that I run Python management I start at dusk then I can go back to the command line sorry TV vs code again inside the models is where I'm going to create a data base model loss task models that's modeled and here I want to add some constants to make it possible to set the status for the tasks to do what to do dum-dum step this choice s equals the toppled with the total inside I use this instead of using numbers because it's much more easy to use this in the front end because it's easier to understand done than just integral like 2 or something like that I want the task to have a description description models char field marks length 2 4 5 and then the status which is also going to be at your field but it doesn't have to be that long choice as equals stutters choices default equals to do I can just reference to do like this and save then I need to update the database again but first I need to add the task app to the settings file task if I run Python manage make migrations let's say that I want to create a model for the task and then I run the actual command perfect next I want to set up the serializers for the tasks which I want to use in the API later so inside here I create a new fight sorry Ally sirs PI from rest framework import serializers I'm taught models and port task and then I create the sterilizer eliezer serialize er is used to make it possible to get JSON data in a much easier way see realizers i thing model Syria aye sir class meta use the tusk model fields equals ID description under status we can save this next thing we need to do now is to create a view so in Harran it's important model again tasks from the serializers import tasks serializer underneath the import view view sets and stuff from the rest framework from rest framework report view sets from rest framework to authentication port basic authentication we import from rest frame work dot permissions import is authenticated democratic view task you set you set taught model you set that this is the API endpoint that allows us to view and edit tasks authentication process I would use the basic authentication permission bosses I don't use is just indicated is authenticated the query set to get the task from the database it's toasted objects with all the cereal visor plus serializer its tusks aerolizer we created then we can save this then I can go to the command line again and start up the shell I just want to test to add some data to the database Python managed shell from tusks that models important tasks task 1 equals that object get now create of course description task number one status will be added automatically oops sorry I forgot to add this one you note one more and I can't add the third one it status equals task dot done so that should be set that done and hit enter you just test this burning tasks equal task objects all yes as you can see here we get three different tasks perfect now we can just close the shell again the last thing we need to do for the Django is to go to URL store try and import this from toys that you use import toss view set I'm gonna need to import one thing from the rest framework from rest framework work import routers then I need to create the router [Music] there's the default router router register tasks task you set like that and then I need to import it down here sorry and it added are there like that include router that URLs don't need important you include from Django URLs had a comma there now I can try to start the server right on manage run server no module name no because it says three SS it seems to be work and then I can test this API by opening a new window here I'm trying out the curl command except vacation chasing them for you admin and password and then the URL HTTP up to seven zero zero one eight thousand tasks and here is chasing with all the tasks we just created and as you can see this is set to done so then we can go back to view again and I want to open up the use home does view and just remove this I don't want the hello world component can just be like this but I know I'm going to use a data array return like this next I'm going to add some HTML h1 plus titled Django HR dev class columns column is 3 it's offset 3 form h to close subtitle add task they've closed field tablecloths able description they've closed control pit plus encrypt type text their clocks filled able cause label status they've lost control so they know they've closed select first this is much bomber code select option rather you do option have you done close all the dips below this field don't that one more for the button field mmm yes link had no submit is better they've closed form like that and I can close that this and active everything there should be okay and below these columns I want to one more columns deathclaws column is six takes up half H to class subtitled to do this is around to show their tasks that have status to do this don't and I can just create one dummy they've lost to do Devdas card if card contact this is relative shoulder toss description you know flip turretless card footer [Music] hey it's card footer item don't wanna click this I want to set the status to done don't you implement this in lift while okay that looks better but I can copy this to do also paste it here but hair I don't need this but then I want you just copy this I can remove the default styles and so on from view step back back with 100% top card margin bottom 20 pixels don't opacity 0.3 and save so now I can test this in the browser it doesn't look very good but it's working and that's main port for this tutorial so then I can go back here and import Axios import lectures from axis and when this page is mounted I want to call a function to get tasks they start get tasks and how to create that method as well kept tasks Axios skills to use method get' URL HTTP / - one two seven zero one eight thousand tasks or username this is the super user I created and when that's done no I'm the donor and this then response list of tasks equals response Tara I wanted to have tusks like this that was all we needed to get the task from the back end and load them into an array now we want to make a few changes to the template in order to show the tasks so I just scroll up here for you to do and I want to make a loop on the card v4 tusks and tusks V if toasters status equals to do the point key task ID under stead of this I say task description and below here I can just copy this again paste it done toaster description I'm safe and that should be working now hopefully yes I have two tasks here and one there perfect change set this to dumb so that it has an opacity so you actually see it at the task isn't done next I want to make it possible to add tasks using this form so I can scroll up to the form and say we on submit dot prevent because I don't want to run it to the browser and task and I need to have the v-model description and also this need a remodel stairs then I can scroll down because I need to add a description their status I set it to do by default then I need to create add task methods you can do it below there and task if this the description because I don't want to make it possible to submit it when the description is empty Axios method post URL just say murad because the API will figure this out automatically description this description then it is terrace this Terrace like copy was because I need a two down here and one this done IRA then response fat arrow to make it a function let new task equals ID response that error ID description they stood description I do this because I want the ID from the server status and they stirred stairs then I can push this task to the tasks all right mr. tusk push new tasks and I want to reset the form by setting this description empty and they start status equals to do also should catch errors if there are any error Sottero console log error just print that to the screen so if I save this now I can go to the browser to test this out just open up the inspector refresh just did it test number one submit and then it's added there so if i refresh it's still there that's perfect I can also try to add there don't talk just to do that then it's added to the dome list now it's time to make it possible to set the task as done so here I say V on Twitter stairs task ID done close it and also make this a shortcut by just saying at click then I can create this method below the add task task ID and stairs and then here I need to run Axios command again method but because I don't want it post I want to put so the database knows I want to update it I'm not create a new one copy the URL but I need to toast in task ID here so that server know which task I want to update headers content type application / Jason and the data I'm going to close this or put stutters like that and blow there and it was in the oath like this and then we can save this if I did something wrong there yes hey this was not supposed to go there supposed to go out there like this that we can save again and it looks better click done it's a 400 error from server the field is this field is required okay so I need to pass in the description as well description above here I need to get that from the array just create an empty one first constitutes Eccles this tasks that filter ID equals task ID just get the first one just behind represent sure Const description task description I can do this instead save now and go back click done seems to be ok chaos moves over there but down here I need to make sure that it's automatically moved to the correct list then just create an empty function and say task status equals done in case I want to change this there it's automatically moved over there now we have a very simple task manager but maybe I want to make it possible to click to do here to move a task back that will be very simple when we already have this function so I can just copy the footer and paste it down here inside the cart to do so now this have to do button if I click it it will be automatically moved back there again so that was it for this video I hope you enjoy building this to-do application and there's a bunch of other things you can do to improve this for example a structure the code with components make it possible to delete tasks make it possible to change the description different kinds of sorting more statuses that's that's right you can also make big improvements on the security and maybe add users and symbol there if you liked this video please click like below and if you want more videos like this please subscribe to my channel

Channel: Code With Stein

Views: 25,846

Keywords: django, python, vuejs, tutorial, djangoandvue, django tutorial, learndjango, djangotodo, vuetodo, django and vue todo, learn django, django todo app tutorial

Id: j5DKSvAB-Ww

Length: 33min 36sec (2016 seconds)

Published: Fri Jun 12 2020