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

it's a simple to-do application build with junga three and view Jas also I'm using here bootstrap for to make it look nice I wanted to keep it simple so I didn't use Django rest framework is just vanilla Jenga and view Jas with the hot components the backend part completely repeats from the one I used in the video Django three to do F with Ajax in jQuery also the bootstrap layout of this app will be the same - I have installed Jenga so first of all I want to create a new jungle project and also I want to create a task app now I have to add the task application to my project I'm opening the settings to wire model and here I'm appending the installed apps list with the the task app then on the level of the Minish pie file I want to create two folders the template folder templates folder I'm sorry and the static folder to store my static files CSS and JavaScript now I want to add these folders to my jungle project so I need templates list and D released I'm opinion with the absolute path to the templates directory so based here variable and the templates name the name of the folder and at the bottom of the second X PI file I am creating this static files in years that is a list tool and again now I want to add to the static folder styles.css file and main in j/s file then in the templates folder I want to create the base HTML file and here I want to add my main J's file and the styles.css file I want to use the Lord static filter and here I want to add a link where href attribute will be equals to static styles.css and at the bottom of the file but before the closing body tag I'm doing the same but with the script tag also I want to add VJ s and Axios andreas library to my project you Dre s will manage our data and will take care of hole manipulations with the dome and to perform get and post requests from VJ s to junga I will use the Axios JS library so the bootstrap CSS then I need to script tags the first one will be viewed right s just Google for view jl CDN and x use a CDN then i needed to create a block to render data from the task app i want to use the standard bootstrap layout and I want to use another give them six bootstrap columns with and I want to get it centered and I need a margin from top 5 books drops in units and Here I am creating on the block now let's create a new view to handle a user's request I want to start with the Rodian so in the route a euros dot py file I want to create a new URL pattern that will handle all the requests to the tasks and I want to use euros py a model from the task app my task F has no euros py model so I need to create it and I'm creating in you here old pattern and all requests to the local host tasks will be handled by task view class and the name of the pattern will be tasks list a URL so now I need to define the task view I want to define it in views to be my file so I need to import it from views import dot means on the current folder this one now let's create the task for you and now I need to import the view class from from changa views generic model so the get method of this view will render HTML template so and I want to pass into the template the context dictionary with the name as the key and the read as the value now I need to create the task HTML template to do it in the tasks folder in the inner tasks folder I am creating templates tasks folders and inside in our tasks folder I am creating tasks HTML file and this tasks HTML file we'll extend the base HTML employed the name okay let's test it first of all I want to apply migrations and now I want to run the server okay 7,000 port number we can see the value of the name variable are rendered success for them okay now let's inspect the page I need the network pane and here we can see that all files bootstrap CSS VJ s XE ojs styles and main J's are loaded successfully and we've got 200 status code okay and now I want to make a layout for this project so the layout will have two parts it just a static HTML file so two parts the first one is the form with input field a label and the button and the second part is just a container for all tasks and each task is just a bootstrap card so in the tasks HTML file I want to create a div with the app ID this div will be bind with my view JS object then the form you can use bootstrap forms from the commentation like I'd eat in the last video I quickly do almost the same with the Emmett plugin so my form I will have standard bootstrap classes and the form tag will have one deep with the forum group CSS class and the raw CSS class this raw have two columns left and right the left one with a label tag and then input field and the right column will have only button so they're all will have two children the Col nine will have the label with the create new task text and an input field with form control CSS class then I am using the caret symbol to climb back up and : if I will have a sibling a give block but I want to change the alignment direction for this div so it will have the gift legs and a flex column CSS classes and the button with Biggi em we can em success CSS classes and with the create text and also I want to push this button to the bottom of this parent container so I want to use empty after CSS class two and I want to expand this abbreviation now I want to delete the action attribute and I want to align this form and I want to delete the four attribute of the label and input type it doesn't necessary so let's test it f5 okay I've got my form now I want to get the container and basically out four cards so I want to have the margin from top five then the card and this card Eve will have the card body div and this card body will have child button with the type equals to button and with closed bootstrap CSS class and with a full outright CSS class float:right pushes this button to the right edge of the parents container and this button will have a text on person x it's a cross and I think that's all I am expanding it okay let's test it again f5 I've got my card okay I want to add here some random text great and I think it's time to create a view J as object Android's data rendering so I am opening main.js file and here I want to create a variable that will be an instance of the video class and the constructor of the view class accepts a dictionary and JavaScript object as an argument and the first thing I have to do here is to specify an HTML tag that will be controlled and managed by this UGS object and bind an HTML text view J as objects are performed with the L key and here I want to bind the div with the app ID this whole deal the next is the data dictionary and here I have to specify a key that will become the variable I will use in my HTML template it's the same ID like we have in Jenga when we have passing the context dictionary to the template and the keys of the context dictionary becomes variables in the templates so the view j/s has the same idea so I am creating a new key with tasks and let's add some value something like this and now in the template I can use the task variable the name of the key or the data dictionary of the my view J's object and if we refresh the page now we can see that nothing changed f5 because there is a conflict between junga and VJ s they are both try to render here the tasks available we can fix it in the very bottom filter it's a jungle filter so somewhere here I want to use the very bottom filter opening and closing f5 this very bottom filter says to janga ignore all wrapped content so this content will be managed only by vo j s object and one of the main features of UJ s framework is the reactivity of data and to show it let's add to the input tag the v-model attribute so the model that equals to the task variable the task key of the data dictionary f5 view j/s manipulate saddam via special attributes that are called directives and one of its directives is the v-model attribute that established two-way data-binding between HTML tag between input tag and the data dictionary and now the next step is to render a number of HTML elements that have the same layout let's assume that we have several tasks so I want to add to the data dictionary the tasks available that will be a list of objects and each object will have the title and in junga in junk a template language we can iterate through a list of objects with special for filter we can do the same so let's add to the card if a new attribute before that equals the definition of the for loop like an Python for tasks in tasks and we can use here the task object and will be a dictionary a JavaScript object that is an element of the tasks variable and here I can use its attribute to get the value let's test it and I've got two cards for each of my tasks so I want to add a margin mg to and I want to delete the value for the task okay so the year is the same like we have in Jenga template language and there is a for loop and at each iteration of the for loop the task variable gets as the value an element of the tasks list the scope of this for loop is this div so my further actions are the following I have to say if to a database a task from a user and I have to return to the view instance a list of all tasks that already saved in a database if a user leaks on a card when the view object should send a request to junket updated state and if a user clicks on the close button I want to send a request to delete this certain instance of the task class so let's turn back to jungle and now I want to create a module and the form for this model and my model the task class will have only three fields a title the date time of its creation and the completed field and by default all tasks are not completed so on the completed field is false and I want to add Vanita class to sort curry sets and as I created the new model I should make migration files for the new database scheme and apply these migrations so I needed manage not py file ok and migrate now I want to create a form for this model so I need to create forms py module if you saw my jungle block tutorial there is nothing new here for you jiangha will generate an HTML form for the task model but I want to use Django generated HTML the form is already created I need the form because I want to use the form validation on jungle side and now let's open the views py file and here I want to import the form and my model from models import tasks from forms import task form and in the get method of my task view class I want to get all task objects and display them to a user typically we can get all objects with this expression but I have to send to my front end jason serializable object but the old method returns an instance of the query set class that is not JSON serializable so i can use the values method that will return query set of dictionaries that i can convert to a list and now I can return these tasks list of dictionaries to my front end so the get method will return an instance of the JSON response object that will encode my data to the JSON response so let's import it the first argument is a dictionary with the tasks key and as the value will be my tasks variable and the second argument is a status code I want to return to a front-end that will be 200 and now let's test it f5 and we can see that the form is disappeared and there is our empty jason list but i want to have a form and i want to send to my front-end the tasks list and it will be needed to fix it i have to check on whether the request from a browser is an ajax request or not i can do it by checking if the request object this one is ajax or not if it's true I want to return the JSON response object otherwise I want to just render my tasks HTML file and I want to delete this context argument let's test it again okay I've got my form and now let's create a new task to do it I have to implement the post method for my task view class and into the constructor of the task phone class I have to pass the data that user has submitted this data we can get from the request object again from its post dictionary for detailed explanation see my junga 3 tutorial okay I've got the submitted form and now I can create the task class object so if bond form is valid new tasks I will get from the save method of the instance of the task form class the save method will return a new task object and again I want to send to my front end the task object but the task object the new task variable is not jason serializable object and there are many ways to serialize bytom's objects on one of the ways to sterilize data is to use Django rest framework serializers but in this case the simplest way to do it is to use the model to dict function I want to import it and again the returning value of the post method in this case will be the JSON response object and the value of the tusky will be the result of the model to dict function and I am passing entreat my bound form variable if form is not valid I want to redirect a user to main page and here I can use the name of my url pattern but I need to import a very direct function now let's back to view Jes I have got back and that ready to accept data from the view object now I need to send request to genre I need a request to get all tasks that will be a get request and also I need to send requests with the users data to create a new task that will be a post request later I also want to send post requests to update tasks and delete them and as you can probably guess almost all requests will be sent to different URL addresses and they are will be handled by different junk views if I would use junk rest framework I can use only one in your address to send requests to create object read delete and update object and I can use different HTTP methods to do it vanilla janga understands only get and post requests so I think that to perform requests to my backhand to genre I want to create a function that will do it and in the right moment I will just call this function pass in to eat what I want to send and where and then I'll just get response from my Jenga app and fill the data dictionary of this weave object where the data the jungle will send so in the main J's file I want to create a function let's say that will be a descendant request function that will take a URL address of the first argument the method and the data at the URL argument is a URL address to send the request to and Method is a type of on the HTTP method to use get or post and the data argument is the data I want to use sent to junga to perform requests I want to use the Excellus library and I want to store the return in value of the Axios class in a variable but it is not necessary and the Axios class can accept as an argument a JavaScript object a dictionary that describes parameters of the request let's say the first key of the dictionary will be the method the second is the URL the data and that the perform post requests we must pass into a jungle app a CSRF token in the video join the cast tool here said of talking from cookies I shown how to get yourself token from cookies and how to send the token to a younger app via a requests header but the access library provides a very convenient way to do it we just have to specify a name of the CAF cookie and the name of the CSRA of header and that's all so X s are f cookie name key is the name of the cookie of CSRF token yes our F talking how to get this name we can open our app inspect console and we can use the document cookie and we can get our cookie with the names yourself token this name I used here then I need to set the header and the header should have the X she has our F token this name you can get from the jungle documentation then in the get method of my task view class I said that if the request is an AJAX a quest then I'll return JSON response object with all tasks and to determine whether a request is an AJAX request the is Ajax method checks the value of the X requested with header if the value is XML HTTP requests the is Ajax a method will return true so I have to set the header to XML HTTP request so I need the headers dictionary and my custom header exit quested who it will be XML HTTP request and the send request function will return the are variable but it is not necessary you can just return in this code access will return a promise now I want to call the send request function first of all I want to call the send request function when the page is loaded to do it VJ s provides hooks hooks are events that happened in a certain moment of a view objects lifetime and I want to use the created hook created here I want to call my send request function so I want to define a variable but it is not necessary again and I'm calling my send request function and the first argument is the URL it's an empty string the method will be the get method and that's all I will get a promise then I want to call the then method of the promise and it will be a function my callback and the function that takes a response from the jungle so it will be in the response variable and here I want to change the value of the tasks the dictionary to of my view object typically it can be achieved with this expression this tasks response data tasks the response object has the data dictionary and this dictionary will have the tasks key the tasks because the get method will return this dictionary with the tasks key so the crucial point here is that this keyboard that this keyboard doesn't refer to the view object here in this place it refers to the view object here but not here and it is important to aware when we declare a new function with the function keyword that function has its own context which is different from the function in which it was declared so here this refer to the view object but inside then function this doesn't refer to my view object so we can fix it if we'll save a reference to this of your object in some variable for example that will be the M variable and the value of the VM will be this and here I have to use the VM variable maybe even I want to define it here so I think that we've done with the get request to read all tasks from our Jenga app and let's move one let's create task object and to create it I have to pass into task view class the data needed to create task class object and this data are are the title of the task and that I can get from the input field and when a user clicks on the create button the view object has to make a post request with this data from the input field so first of all I need a non click event handler of the button but and besides the button we can use the Enter key on our keyboard and the result of these two events should be the same so I think that it's convenient to use a submit event handler for the form so in the tasks HTML file I am adding to the form the submit attribute that equals to a name of the method of my view object so I want to use a create task name I'll define it a bit later but by default if the action attribute of the form is emitted oh it's very is m'kay browsers will send requests to the address that is present in its address bar so in my case it will be [Music] localhost tasks and it will be the get method get requests because I am mitad the method attribute of the phone and what I wanted to use the parameters of the request that I already determined in my JavaScript file in my send request function so in the case of UGS framework we can just use the prevent modifier to prevent default behavior of our browsers then I have to define the hell're of the submit event so the handler will be create tasks that I want to define in the method methods in dictionary of my view Dre s object it'll be a function so again I want to save an instance of my view object because I will use axials promise again then I have to send to junga a user's input data and but unfortunately UJS framework does not provide to us the neat and convenient way to send data in Ajax requests like we have in jQuery and if you'll send the dictionary your back-end framework jungle on no dress or several others will probably get an empty dictionary said but true and the working of way to send data is to wrap them in an instance of the form data class so I'm creating a new variable from data that will be an instan instance of the form data clause and now I want to append the form data with the key and the value append the title as the key and this task as the value in this case at this line this refers to my VJ s object and now I want to call send request function the URL will be an empty string the method is the post method and the data will be form the heeta variable then M : then function than method that will get the response from the Geneva and here I want to use the VM variable tasks push and I need the tasks from the response object and I want to clear the input field so the M task equals to an empty string that's all I think that we can test it five okay okay internal server error so on Jenga says that I need we use peopie line 27 return Jason response model to dict bound for I'm sorry this new task of course f5 okay it works f5 again and I've got all tasks when the page is loaded great the next step is to change the state of a task I want to complete a task by clicking on its cart and again I need a click event handler and I need to bind the event handler with the click event binding a click event with its handler and VJs is very simple I am adding to the cart give this a new attribute at click and I need to specify here a handler for this event so let's say that'll be the complete task function okay but to change the state of a task completed first of all I need to identify this certain task in the database and I can do it only by its ID and so I have to pass into the complete task function an ID of this task and as you remember on each iteration of the for loop the task variable this one contains all data on that junga half returned so I need to pass the complete tasks task ID and the OSA I want to move the completed tasks to the end of the list and to do it I have to know an index of the tasks in the tasks list and I can get an index of each task this way here in the definition of the full loop in the v4 directive I can use this construction tasks task index and at each iteration of the for loop VJ s will write to the index variable the index of the element it's like pythons enumerate function I want to pass into the complete task also an index of a task okay now let's create an the complete tasks function in the methods in dictionary and again I need to see if my pjs object in the variable and again I'm calling the send request function and here I need to specify in you URL and at this point it is very convenient to use Django rest framework because I would be able to send put or page or delete requests for the same address but when you are jungle knows only two HTTP methods and get and post that is why I have two separate post requests for creating new tasks and updating them so a new URL will contain the idea of a task that will be an empty string plus ID variable plus complete string the method will be post and then I will get the updated task from the jungle app so I want to delete this task from my tasks list in the view 3s object by its index again I am colon then method the function that will get the response from the jungle app and here tasks splice to delete element from the tasks list the index and the quantity of elements to delete okay again VM tasks and I push this task to the end of the tasks list of my view object I have to use the splice method to delete the task from the tasks list and again added to the end of the tasks list because lists and dictionaries in villages are not react and view is not able to reflect changes in these objects now the jungle side I need a new URL pattern that'll be ID of a task completed complete like I said here and the name of the handler to get more details consider to watch my jungle 3 tutorial now I need to define tasks complete class in views py model now I need to get the task from my database and I want to set the completed property and to true and I want to save the task object now let's say turn it back to UJS that will be in the task and the task is on the value model to gift of course and the status will be 200 and the backend part is ready and the last thing I want to do is to change text decoration of the cart to line through so let's create in the style.css the completed problem text decoration wine through and now I want to add and this completed CSS class to all tasks that have the completed property equals to true so in the tasks HTML template I want to add to the cart give another property column clause that equals to a dictionary and the key of the dictionary is the class I want to add to the class attribute and and the value of the completed key will be true or false so I just refer to the task completed property let's test it f5 and it works but when I added a new task completed tasks are stay on the places and the new ones is added to the end of the list if i refresh the page now completed tasks are moved at the end of the list because we got sorted list from junga so I want to change a bit this behavior of my viewer as object so I want to sort the tasks list by the completed property so in main Jas I want to use the computed properties it's a dictionary tool and I want to use the computed property because the behavior it will provide effects on the data of my view days object and also computed properties are cache based so here I want and just to sort the tasks list but in JavaScript the sort method takes as an argument a function that will sort the list so in the computer dictionary I want to define a new method task list for example that will return tasks at least and I'm calling the sort method and the sort method will get as an argument a function that will compare elements of a list compare is the inner function so I have to define it here and from compare that takes two arguments a and B and if a completed otherwise return zero and that's all and now in the template in the tasks HTML in my follow-up I want to use a task list property instead of the tasks let's test it ok it works and at last a deleting of tasks the logic is almost the same like in updating tasks there is only one issue I want to delete jungle objects by clicking the close button that is placed on the cart thief ok and how to differentiate that the click was on the cross button but not on the entire cart it's important here because a click on the cart has different behavior and it's a different event and we have to stop propagation of the click event on the close button to enter it if it is very easy to achieve so in the template i am ii the click event listener on this button click let's say the handler of this event will be in delete task function that takes again task ID and index to delete the card from tasks tasks list in my VJ s dictionary but I want to use the stop modifier to stop propagation of the click event now let's define a delete task method and the delete task method will be almost like the complete ask method so I have to save reference to my PJs object then I send request delete it will be the URL the method will be post and the data will be hemmed him so then I'm : then method function that will get the response from the jungle and I have to call the splice method index quantity and that's all the jungle side I need a new URL pattern the view I need to get the in task instance on the database and I just call the delete method and now I need to return something to my front-end something like this it doesn't matter okay let's test it f5 f5 and it works ok I think that UJS is pretty cool thing if you liked the video please thumb up and subscribe to the channel thanks for watching

Channel: Red Eyed Coder Club

Views: 21,503

Rating: 4.9566159 out of 5

Keywords: python, django, django vue tutorial, django vue.js, django vue, django for beginners, django axios, django ajax tutorial, django ajax via axios, django project, django vue project, django vue for beginners, django with vue.js, django vue js, vue django, vue js django, django vuejs, vue js tutorial, django vue js tutorial, django 3, django and vue, vue and django, django tutorial, vue with django, django todo app, vuejs django, django with vue js, vue js with django

Id: xq532yn8gMA

Length: 60min 12sec (3612 seconds)

Published: Sat May 02 2020