Django Vue Tutorial: Django REST Framework + VUE.js | Django REST framework tutorial

first of all I needed to install junga and now I want to start a new project and I want to name it just project I open it in my atom editor and I want to rename parent project folder to beckoned folder now I want to apply unapplied migrations I need junga project folder the backand folder and to manage peopie okay and I want to start junga server and now I want to install a view CLI and create a new view J's project and to install view see why you need to have node.js installed we can do it with NPM install there gene visual I flag that G means that it will be installed globally okay and I'm creating in you view J's project that I want to name just front end I'm choosing the default preset because it doesn't matter now regardless to what you'll choose the core idea of using Django rest framework with vgs is the same and now let's start the view development server and Pam I'm sure sorry again okay back-end front-end so let's open front-end folder and I am opening SRC folder and main J's and as you can probably know vgs has two main features the first one is a data reactivity reactivity means that when a value of some variable is changing all places where this variable is used will be immediately rear-ended and the second one it's declarative ax t it means that all we have to do is to specify the places where our data should be rendered but not how this data should be rendered and we just take care of all the manipulations and the entry point of the view GS application is the place where an instance of the view class is created here it is the main J's file in the SRC folder here we can see that this view instance renders the app component that was imported from the app view file on this one and the app component uses the hello world component that was imported from components hello world dot V you file this one and in its turn the hello world component contains the code of the main content of the page of this page and this chain of imports is very similar to the idea of the template inheritance in Jenga so there is the view component and as you can see this file has three parts the first part is an HTML layout of the component and the second part inside the script tag is its logic and the third one is its styles that's because vgs implements the view model part of MVVM pattern and actually i don't want to use the hello world complaint i want to use just app component so i want to delete this import from app view file and I want to delete components hello world and this logger and now to render something to the page I need the data object but when we deal with the vgs components the data must be a function but not an object and this data function will return an object and I can use this message in the template okay view render to the hello world message and now I want to create some back-end to logic let's create a model because I need something to store in the database so let's say it will be something like a student management system it's just an example I don't know what to use you can use whatever you want soccer players MMA fighters chess players etc and first of all I want to create a new Jenga app I need manage py file start app students here I need settings py file and I have to add my students app to the installed apps list then I want to define a new URL pattern let's say API include student zeros I have no Urals not py file in my students folder so I have to create it and a new path will be students and the handler full requests to this address will be a just index function that I want to import from the use model of the students app okay dot means the current folder so here in the views py file I have to define the index function that accept the request object so I want to get all students that will be an empty list for a while and the index function will return jason response object students and i have to import JSON response from django HTTP model okay let's test it API students I have to restart Jeong server okay I forgot trailing slash again mm-hmm safe parameters set to false save okay and now we can see an empty list of students this one and now I need the students model and a couple of its instances so in the models py file I am creating a new class student and it will have the name field that will be a char field with max length and let's see it will have the course field and the regen it will be integer field let's order them instances of the student class by the names okay I've done with the model and now i need to make migrations and do i apply them so here okay and now I want to create a couple of instances of the student Moodle via Django admin let's register the model in admin py file and then to use Django admin panel I needed to create a user creates a per user command okay email okay one two three four five six seven eight and let's create a student and another okay I have two student objects and let's add STR method to our model okay now I want to change a bit my index function I want to get all students from the database so here I want to use the model manager objects and I am calling the old method and here we have the problem that Django rest framework is created to solve the issue is that the students here is a query set on the Python object that is not JSON serializable object but to create a JSON response object we must use here in adjacent sterilizable object and there are a number of ways to get Jason sterilizable data in one of my last videos I used the model to dict function from the Jenica forms models module in the last video I guess I used here the values method and then I converted returned query set of dictionaries to a list it was student objects values then I converted to create of digs to a list and it was a JSON serializable data and also we can just use a for loop to iterate through the query set and get a list of dictionaries and something like this it works it's a legit way but it's a bit cumbersome and not convenient especially when we have complex models with foreign keys and many-to-many relationships so it's time to use Django rest framework it's a huge battery for junga that allows us to serialize and deserialize our models to Jason format so pip install now I have to include on this app to install the apps rest framework and then I need to create requests router in the euros py file of my students tab and drunk rest framework rotors automatically determined euro configuration for our models and its power will become obvious abit later from rest framework import routers and now I have to create an instance of the router let's say that will be router it will be default router then I have to register an URL pattern and the first argument is a part of the URL I want to have that will be students without trailing slash and the second argument is a handler of requests to that URL let's say that will be students view set and the URL pattern list will have a new value rotor URLs and I can delete import and now I have to create the handler the students will use it it's a class that inherits properties from Moodle you said class that I have to import import mode of use it in the body of students view set class I can get a clear set with my students quickly set that equals to students objects Oh then to say to junga how he should serialize and deserialize our models we have to create a serializer that our student you set class I will use so I'm creating a new file serializers py and I'm important here in the model serializer class and from models I have to import student class and I'm creating a new class let's say that'll be student serializer it's a subclass of the model serializer here i have to define the meter class and the model will be the student and the fields i want to serialize will be ID name course and written and as you can probably guess the idea behind the model serializer class is the same like with the model foreign class of the forms module and if you know basics of jungle you can probably guess how the model serializer class works under the hood so in my views bi file i have to import students aerolizer and here i have to bind my query set with this students analyzer class so serializer class it's a student serializer and that's all we can delete index function we can delete import all the JSON response class and render let's test it students you said is not defined euros be wild line seven I have forgot to import this again a rest framework serializers sorry for that again it works I've got my JSON object and also as you can see in generates framework provides this cool dashboard where we can perform all collaborations with our models for example I can get the detailed view for the first student and I've got Kasparov's query set his object okay and also I can delete objects by this admin okay there is only anand let's create kasparov again i perform the post request okay I've got three Kasparov nevertheless we can create instances and delete them with this dashboard and that's all our back-end part is ready and now let's create a front end for our back-end I want to use bootstrap so I want to paste CSS Styles in the index.html file in the public folder and here I want to wrap this div with the app ID with a standard in bootstrap layout that will be the container div drawn and call eight with the mix after and margin top five classes that's all and in the layout part of the my app video component I want to create a table with the table bootstrap class that will have a head tag with the name course and radian headers I'm climbing up and here that will be the key body tag with an ER with GD attacks and I'm expanding this formula let's test it name course Aiden great then I'm creating the students list in the data object delete students it will be an empty list for a while and then I need a full loop for the TR tag of my table before that equals to four student in students list in this one and here I'm creating student name and also I need the key attribute for my for loop it should be something unique so the idea of an instance of the student class will be enough student ID and now I need to perform a get request to my jungle app to get students query set and to perform the get request I want to use the created lifecycle hook of my component and in the last video the perform requests the junga I used Axios library but today I want to use fetch function so I am creating in you variable response that will get the returning value from the fetch function and I am : this Andres but the server never responds immediately so the call of the fridge function is a blocking operation and so the fetch function call should be asynchronous so let's create let's make created function a synchronous machine and the phage and paid I should evade until the server will respond then I want to feel the students list with the Mike reset the wait response Jason okay let's test it f5 nothing changed okay let's open the console and we can see that my request to the localhost 8004 number from localhost 8080 port number was blocked by course policy it's because I try to perform cross the main request and we can fix it by installing and using junga course headers app so just google it or you just install it from peep junga course headers that's all I have included to my installed apps list and I have to include its middleware above common middleware of Pechanga and also we can use course origin allow all property or a wide list of allowed a means to get responses from so I want to just course origin allow all and set it to true and that's all let's test again f5 and I've got my query set from junga app and now I need to create a student instance and first of all I need a form so somewhere here I'm creating a form and the form will have three inputs with the from control class with with goal 3 margin to and with the place holder that equals to name of course Reagan and with the button button Mickey n Mickey and success and maybe with the submit text okay great now I want to have the submit event handler that will perform a post request with this data to my jungle app and I'm adding the submit attribute to the four that equals to create student function it's a function that will handle the submit event and also I want to prevent default behavior of my web browser I am adding here the prevent modifier it's because the action attribute of the forum is emitted and browsers will perform a get request to the address that is present in its address bar in that moment and by default all requests will be a get request because my form has no the method attribute to so I am preventing the default behavior and then I want to create the student attribute for my view object student that will have the name course and written and now I am adding to each input tag the modal attribute to get a two-way binding between my HTML form and my view J's object okay let's test it and we can see when I input something in the input field the student object data is changing accordingly okay it works and now the handler to send that the form data to my junga app i need to create the submit event handler and as i said before it will be the create student function and i want to define it in the methods dictionary each student it will be asynchronous too because I want to make a request to my jungle app so corresponds wait fetch then parameters of the post request the method will be posed headers application Jason then the body of the request will be Jason and that's all okay this students push and I'm awaiting response from my jungle response Jason okay it works maybe it's better to get all actual data from the server before I perform their quest so I want to create a function a method let's say it will be they get student students function that will perform requests want to get all students so it will be synchronous function and I just copied this and paste it here and then I just call it this weird students and here I can call the get students students function before post request and after post request student and I can delete this and paste get students call here and I can delete declaration definition of the response variable created should be a sink and a weight of course because I have to wait until survival response so every day and a sink and here I think it's that soul let's test it it works again is the last because it lowercased so let's and John okay John inserted in the middle of the list okay it works and now I want to edit students entries and first of all I need to get an instance of the student class I want to change and I have to fill my form with this data and the after user will change this data I need to save them to a database and as we know this students list and we got from our jungle app and the each element of this list contains all data of a certain instance of the student class including its ID and the filter form with this data I can just assign to the student object of my vu instance a new value and this value will an element of the students list and I want to use a double click event to fill the form with students data so I am adding to the key our tag dbl click event and the handler will be the following I am want to refer to my view GS own with the dollar sign data and I am assigning a new value to the student object it will be student variable or the for loop let's test it it's changing great and now oh I forgot to say that I want to use this form for creating and updating student data and the idea I want to use is very simple if the student object has the ID it means that when a user submits the form he wants to update the data and if the student object doesn't have the ID it means and that a user wants to create a new one and so I want to change and a handler of the submit let's say it will be submit form event handler submit func submit form function submit let's create it in the methods and the submit form function will just check whether the student object had the idea not if it has I want to call the Edit student method and otherwise I want to call the create student method so if this student ID is undefined undefined I want to have here an empty object student is an empty dictionary so if student ID is undefined I'm calling the create student method otherwise I am : edit student method and the Edit student function will be almost like the create student just copy it and paste it here but an address will be a bit different so I delete my single quotes and I am using these marks I don't know a post of maybe it says something like f string and Python and I want to insert here the ID of the student of a current student so dollar sign curly brackets this student ID and trailing slash okay I can clear the phone with this line hunky let's test it drinking enter nothing changed method not allowed because I used post method but it's Django rest framework so I have to use put on page method again okay it works by 5 it works great and the last one is the deleting the steps are the same like with the update and accept and the HTTP method of the quest so I need a button to delete students and they own click handler for it and I think add a new column here with the button outline the danger class will be a small button sorry X ok event handler on click delete student delete and that's all let's test it [Music] students undefined it's undefined because the student object of my data object is empty I have to pass the student instance and the delete student method so this delete student method takes an argument let's test it ok it works great that's all for now if you liked the video please thumbs up and subscribe to the channel

Channel: Red Eyed Coder Club

Views: 20,910

Keywords: python, django, django rest framework, django rest, django rest framework tutorial, django vue fetch, django vue tutorial, django rest vue tutorial, django rest vue.js, django rest for beginners, django rest project, django rest vue.js tutorial, django rest tutorial for beginners, django rest tutorial, vue django, django vue js tutorial, django vue, vue js django, django vue js, django and vue, django vuejs, vue and django, django tutorial, vue js, drf, django and vue js

Id: 7GWKv03Osek

Length: 47min 19sec (2839 seconds)

Published: Sat May 23 2020