Learn Vue - Vue and Django API - Preparing a Vue app with axios to consume a Django REST API

hello and welcome in this tutorial I will take you through the steps first building a django restful api using the rest framework and configuring course then we will work through building a view application using Axios to display data from our newly created django REST API so this tutorial represents part one of two tutorials working towards authentication via JWT using Django Axios and view and also I'll go through the view J's storage so the aim here in this tutorial is to configure and learn the underpinning configuration needed so that in the second tutorial we can just focus on the configuration of the authentication as per normal you can use the timeline provided in the video description area to navigate through this tutorial and focus in on the components you are interested in so the first section we're going to go through building a simple rest framework using Django so I've made a new folder here on my C Drive and now going to start a new project like I previously said if you're familiar with this setup then just head over to the next section and move through the video utilizing the timeline provided if you're completely new to Django you might want to head over to my other tutorials first and just set up your environment you will need Python installed in order to get this working so first of all we're going to like I said sets up this new project I'm working here on the C Drive in this folder so I'm going to open up the command prompt and just head into this folder so the first thing I'm gonna setup is the virtual environment so as per normal I get an e Python and I'm just going to make a new virtual environment folder so now I can go ahead and activate the environment so looking for photo call scripts and then activate okay so now we're activating we can now pip install django that might take a couple of seconds so now we have django installed we can now start a new Django project so we'll use the Django admin to start project and we're going to call it project D for Django REST API and we're going to install it in this folder not in a new folder so I'd use the dot okay so now we have this new project you see that it's included Z manage dot py so we're going to be utilizing that now to create a new application so we're going to be able to an application inside of this new project we're just going to call that something simple so let's go ahead and do that so to build a new project just going to type in py and then manage to py and I'm just going to call this app so we're going to start app I'm just going to call this app okay so now we have a new app folder so we're going to be utilizing this app to build our restful api so that's all that's needed at this point let's head over to our code editor and open this project on the C Drive so let's select this project okay so now we've opened the project so remember that this is the main folder here the rest api folder and this is the app we just made so we need to go into the settings of our main app and the first thing we need to do is just register this new application in the installed apps so I'm just going to call this app so that just registers and tells our application that we have a new app called app so as we're going to be building a RESTful API we're going to need to install that into Jango so you can do that obviously by the terminal here I'm using the command prompt here so you can just see it a little bit more clearly so we're going to need to install an application so pip install and then we're installing the Django rest framework so this is going to give us all the scaffold in all the components that we need to build a restful api with django so once that's done we can then head over to the app folder and models and create a simple model here I've created a I'll use database terminology we've created a table here called posts and inside of it we have two fields title and contents so by all means you can extend this maybe you already have a an existing model that you want to utilize it should still work if you follow this process so that's that done so with that in place I just head back into the terminal because I just go ahead now and migrate that and then use the migrate command to commit that so now we have our database in place so we're going to need some data in our database so you may as well use the admin to insert that so we could just insert that manually but let's just create a super user and go into the admin area and create some data so here we're going to run a command create super user and then go ahead and fill in some of this information there we go okay so now we have a super user we can now login to the admin area so I'm just going to run the server and oh yeah and then we can then go into the browser and go into the admin area and use the username password we've just created and from here you can see that our model doesn't exist because now we need to go into the admin area and just register our model so it's viewable in this area here so back in to our app here we're going to go ahead over to the admin page and from here we just need to add a little bit of code so that we can register our model so it appears in the admin area so let's get rid of that so what we need to do is import on model so we just need to say from dump models import and then the model we just created which was posts and then we can get rid of that and then add been the site duck register and then the name which is post or pay sorry was it pacer place remember model place okay so now we've got that in place we can now head back into should automatically update if we refresh we've now got our new model called pace so from here I'm just going to go in and create some new pace so new post one you post one content and then our Krejci place there we go so now we've got some content and we can view that now when we actually build our view application so we've got something to view so for the next task I built a new file here in my app folder called serializes dot py so the idea here is that we're going to build a serialize ER that's going to take the data from the database and prepare the data so it can then be used and transmitted through our API and utilized in this case by our view application so here then I'm going to include from the rest framework which we installed earlier serializes so we now we have that resource available and then we're going to need our model so we're going to import our model pose ok so now we build a new class and I'm gonna call that post serializer and then we're gonna need these serializer dot and model serializer ok so now we just need to define the meta which is basically just defining what data we want to serialize so the model is gonna be a model which is place that we created earlier and then we just define the fields that we want to serialize so here I'm gonna just serialize them all because there's only two in there so you see oh so that's just going to take all the data from the database and serialize it so it can then be utilized and sent across for our API and captured by our view app and then it can then be displayed via view so now we head over to our view in our app and just run through these stages here so first of all we're going to need a response from this API so we import response and we're going to be using generics because I'll talk about that in a second and then we also need to import our models from post we need that data and then of course these serializes that we just created so we then create a new class called post views and from generics were utilizing retrieve API view which if you retrieve the link here and it's worth reading through the documentation this is for used to create a read-only endpoint to represent a single model instance so this is going to be a read-only API so now we import the query set so here we're just running a query equivalent of select all from posts and putting it into this new variable called query set and then we make a new function so this function we take in the query set so we're going to need that and then we run it through our serialize ER and then we then return that data and that's what's then sent to the client or whoever's trying to consume this API the last step is now just to configure the URLs so let's head over to our main app the D REST API and head over to the URLs so first of all we just need to build a link between this URLs and a new set of URLs we're going to create in the app folder so we're going to need to include here and then we're going to create a new path and this is basically just a link to the new URLs that we're going to build in the app folder so here is going to be called app dot URLs so with that in place I can close that and now just build a new file called your house don't py and now inside of this and we now need to build a URL and so that we can point our API to it so I've gone ahead and created this file so from Django URLs we import the path and then we also need to include the view because we'll make a link between this and the view so our URL pattern is really simple so our API is going to be consumed from post slash so that's where we need to point view in a minute to post slash and that's all we're going to be able to access the data from our database so let's just go ahead and test this to see if it's working just save those so before we can test this just head back into the serializers dot py if you're following this because I forgot to include the S on the model and the fields so before you start the server just make sure you change that if you're following the code and then just go ahead and run the server it should be working okay so I've installed postman if you've not got this installed then it's worth a look so placement allows me to consume API sand to test them so let's test our API so we know that these server addresses one two seven zero one eight thousand and we set up the URL of post slash so let's create a new tab and let's just test our API so if you remember earlier we also added some data into the database so we should return something so slash posts I send that using get and you can see here that I've returned from our Django API our two posts that we created so that just confirms that this is working and now we can move to the view Jeff's application and build that and try and consume this API utilizing view so now we're going to move across to view we're going to build a new view app to consume our API that we just created so back in our command line here we're just going to change the directory hmm and we're just going to go back into my folder so we're just going to create a new view application with inside of this folder so this application can be built absolutely anywhere it is independent of this Django application so I'm just going to make it a new directory called view API so just few apps I and then we'll just head into that ok so just make sure that you've got node installed in or NPM manager so you can obviously do that by typing in node view and the MPM so just make sure you've got that installed if you haven't already and again if you're not too familiar creating a view application then head back in to my previous tutorials where we just go through basic building a basic view application so gonna be utilizing the view CLI so let's just run or create a new view app so I just type in view create we're gonna call this view Django rest okay so that's going to build a a new application we're going to select the default so once that's done let's just run npm run serve just to make sure that everything is working ok so there seems to be potentially an error and that's because i've not moved into the app folder so remember to move into your app folder and then we can run that command again okay so you can see that our server is running on localhost 8080 so let's just try that out oh Christ in every case so our view app is working so a quick view of our working folder here we've got the Django app that we created and then the main folder D REST API we've got a virtual environment and then the view app we've just created so here we created the view app inside of a folder so this is what we're working from here so now let's just go into our code editor and let's just set this folder up okay so and now we have everything ready to start working with you so the first task then let's just get rid of remove the components that we don't need so we don't need this hello world dot view that so just get rid of that and then in our app view we can just remove this information here which just leaves a template and the Dib here we don't need to import that we don't need these components and we also don't need this style okay so that just clears out everything that we don't need and now we can start building what we do need so this is the plan and now for this few application so I'm going to be calling it routes because I know that a lot of you won't like the fact that I call it a Rooter and a router potentially so we're going to first configure routes or the roots for this application and then we move on to build our navigation bar an important bootstrap and then the last phase is setting up Axios so let's now configure our routes so we head into the app drop view first and then import the route of view so that gives us access to our Ruta that we're going to build and then we just create a simple style for our body our padding and the background color it's a little bit of styling and that's it really for this section and we won't need to touch this app top view anymore so we can close that so we're going to be building our own route so let's create a new file we're going to call it root CA yes so that's in the main project area here so now we have a routes file so before we had any further into this project is probably worth now actually installing the view Rooter so let's create a new terminal and then NPM install and then the view Rooter so if you're running I think it's NPM manager 5 or below or below 5 version 5 then use these safe so you can save in your dependencies so am/pm in still be Rita so we install that now we can go ahead and head back into our main J's file and then just connect this all up so we need to import the router from slash routes don't jas yep and then we can go ahead and now add it to our project so Rooter ok so that's now I'll connect it up so next up we're going to add some views we're going to create a new folder called views inside of our project and create new file I'm going to call this place don't view so before we configure our routes pages worth reading through we will be just be following most of the mana trees that are required to build a a Rooter here router so definitely head over to the view official pages and have a ivory true that if you don't quite understand what's happening in this next section so let's head over to our routes jessamy we important the view from you and we Rita from the Reuter and then we're going to be building a new route of route to posts so we need to import that view that we just created and then we use the view use be route a blessin loads here you can see here that we need to call this to make sure that the router is added to our middleware so that we can use it in our project and then we set up routes so we're using mode history again I've left a note here so by default URL hashes are used to simulate the full URL so we just get rid of that and makes it look prettier so we use mode history and we created the base set for our URL and then we have some routes okay so there's any one route that we need to make and we're going to make a home or a default or base routes so / and we're going to give it a name of posts and then the component that we're going to be using is posts so that then obviously links to our post instance we made right so that's a simple route there to our posts view so now that's created and we're nearly ready to actually test this system out so heading back into our command line this doesn't seem to be any problems our servers still running and let's just go back in and go to the place so I pasted in this simple framework in preparation to develop this page and it should instantly now change on the page yep so now we can see how they world so I've reached a work in the application is working now we can move forward and start to connect to our API before we set up Axia celesta sir create a and navbar so in components under create a new fog just going to call that bah that's the first step and also I'm going to be utilizing bootstrap for this project so let's just head over to the terminal and then NPM install in stall bootstrap so we just bring that into the project to make it easier to create some style link so now I've imported bootstrap let's just go into the main J's and just add it to our project so we need to import this in bootstrap just CSS bootstrap we use the MnDOT CSS so now bootstrap is available within our project so I've now gone ahead and just added a simple navigation bar to our project I won't go through this line by line you can see that I've included an asset which is brand name so I've added the brand name and I've also added a link so this is a method of adding links via the router you can see I've used Rooter link and then I've passed in the name so that's going to create the URL from based upon what's configured in the router so that should just be slash now given our name and so have a look at that apart from that there's nothing else here that needs explaining really have a look at the code which will be available on github if you want to look through this here ok so now we've got the navigation bar in place now let's just add it to our posts so to add our navbar to pace what we need to do is first of all imported in so important our bar from the components section and then we add it to components and then we just need to then include it where we want it on our page or template just right there okay so now that's in place that should now have configured and included the navbar and the page so we can test that should all happen automatically yep so now we have our navigation bar within the template so we're now on the last section so now we're going to configure our view application to be able to get the data from our django api and then serve it on to our page so we're also going to need to go back into django at this stage and just configure one more module because we're going to need to allow access from external sources to access our API so we're going to install cause so let's just go through this stage by stage first of all we need to install Axios okay so back in the terminal notice that my terminal always starts blank I'm using a virtual machine so npm install' Axios should take a few moments okay so now we've got that installed we now need to make a new file so let's make the new file in our directory so a new file I'm gonna call that Axios - API doc jeaious okay so that's now in place okay so now then we're going to set up or create a new instance and we're going to then make this available on other components inside of our application so first of all we need to import Axios so in excuse me import Axios from Axios okay and now we're going to create a new instance with a custom configuration so const get api because Axios don't create and then we're going to need to now configure the base URL so this base URL basically is the URL of where our api is our api resides so the base URL in this case is going to be our django server address so HTTP colon slash slash 127.0.0.1 and then Kalyan 8,000 so that's currently where our Django application resides yours might be slightly different and then we're set a a timeout so if the request takes longer than the timeout we get an error just knowing means that the server isn't working correctly so we now have that in place so once that's in place that's just the basic configuration we can now export that so it can make it available in our other components so let's export that as get API okay just before I finish let's just change that there we go so now that's a ready to start okay so now we've got this base in place there's not too much we need to do now we just need to now head over to the pace component here and we now just need to configure this page to access the data and return the data on to this page so we're going to set up a simple bootstrap a framework here that utilizes cards I'm not going to explain every line again I'll just copy and paste this in but by all means have a look at it and of course you can change it I'll go free the main components so you understand what's going on so this is the bootstrap component right here you can see that we've created to contain it and then a row and then inside of here and then using v4 so I'm going to create a loop basically go through the data that we're going to collect from the API the junker API I'm just going to loop for it every time I loop through it's going to run this section here so you can see here I'm making a card a bootstrap card and every time I leap out I want to collect the data from that instance within the loop and I want to collect and output the post title and the post content so that's what it's going to be outputted from the data that's returned from my Jango API so we simply loop it loop out the data once we've collected the data and we go through that in a second and then we're going to output post title and posts content ok so to finish this off so within the script section of our posts component first of all we get the information that we set up in our Axios API and that's basically the and we create a new instance of Axios and we created a base URL and time out so we get all that information we need that we've obviously imported our navbar and now we create a data point so we can put our data that's returned from our Django API so that we can then use it and loop it out on our page so this is how simple it is now to fetch data from our API so here we're creating a or using an instance lifecycle hook created this what I've written into the lifecycle hooks of you if you want to understand more about view so basically here we're saying that if new instance is created we're then going to run this script here these this piece of code here so all that's happening here in general terms is we're getting the data from we're forming the URL so slash posts including the data from Axios API file so at the base we use the base and then we connect it to slash posts to then connect to our API or Django API and then we get a response so if we do get a response we just log that in the console that we've got a response that's handy if our code up here isn't working for some reason but we are getting a response from the API that we've received the data then there must be a problem with the code above there so we get the response response data and then we put it into our array and then we can make that available now for the v4 here so that we can loop out the data on our page and like we've seen before we loop out the post content and we loop out the title so now this is in place let's just see if this working it shouldn't be working so let's just see if it is working or not go into our page refresh now let's just go into our console here and you can see that there is a an error so at the moment there is no access to this it says they blocked by cause policy so at the moment there's a problem accessing our data from Django so now we need to head into Django and finish the configuration there so the last step of this Django installation is the cross-origin resource sharing so we need to install cause to allow access to our API our django api so that it can be accessed from other resources from other domains so first of all you can see here we need to just install the django core headers and then you can just simply go through and I've left a link here you can simply just go through the configuration options that are available in the manual and we just mace you need to add cause to the setting app and then install into the middleware and then create a whitelist it's as simple as that so let's first of all people install django cause headers so i'm back in again so i'm back in the django application again i just head over to the command prompt so i just stopped a server and then i will install the cause package okay so that's now available so let's head back into our system and now we can heed to configure the the settings file so in our main app the d rest api we need to go to settings and now we just need to add some items into the settings here okay so the first thing we need to do again following the chords instruction than the manual we just need to go into the middleware and drop in the cause middleware so right there so cause header middleware cause middleware so that's the first thing that we need to configure so next up we then need to configure the whitelist so this is basically just a list of domains that is allowed access to our api so here I've utilized HTTP code on localhost 8080 that's if you remember is our view server address so have also included the 1 to 7 version as well so that's a whitelist a list of domains that can have access to our API and then last of all let's not forget to have had the cause header to the installed apps so let's restart the Django server and then head back into our application we can refresh the page this time and you can notice that now our view application is serving the data from the Django API so we're now successful in viewing the data from the API web view so we can test this flusters add a new post in Django so new posts 3 and just press safe and then we go back into our arrest into view now we just refresh and you can see now we have the new data appear so that completes this tutorial so remember in the next tutorial we're now going to setup authentication so that we need to be authenticated in order to access this data from the server so thank you very much hopefully you've gained something from this tutorial in the next tutorial we then apply the authentication to both Django and the view application so that you need to be a authenticated to access the data from the Django API as per normal if you've got any questions you want to ask them please and that I've run the Facebook page or utilize the comment section of YouTube hopefully I'll see you in the next tutorial

Channel: Very Academy

Views: 15,136

Rating: 4.9625292 out of 5

Keywords: vue, vue django, django vue, django and vue, vue and django, vue axios, axios vue, vue js axios, axios vue js, vue 3, vue example, vue js 3

Id: KFO8atMJ4Eg

Length: 38min 19sec (2299 seconds)

Published: Tue Jun 09 2020