Python Flask and Vue Tutorial - Video 1

hey guys what up so this video is brought to you by Deb mountain coding bootcamp if you guys are interested in going to a coding bootcamp make sure you give them a look the link is in the description tab below they're focusing on all the latest web development technologies so that you can get your foot in the door as quickly as possible hey guys what's up so in this tutorial series we're gonna be looking at building a modern web site using Python flask which is a micro framework based on the work zhuge built in Python server as well as Jinja - template engines but we're also going to be adding a different flavor to this tutorial series where we're going to be dealing with a client side view framework which is called view j/s which is really popular right now so it's all about micro services in this day and age and and for that reason Python and flask are a perfect combination for being able to set up an API which stands for application protocol interface and really it's just how you communicate with a data service but building that data to service in something like Python and flask is actually something that's very very quick to do and then it works very well with something like with view though that we'll see in this tutorial series so in order to get started with anything with Python you have to have it installed so you just have to go to Python org and then if you go over to the downloads and then you can click on python 3.7 which is the latest version of python as at the time of this video and i'm gonna be installing the latest version on my machine alright so when we pull this up here what I want to make sure you guys do is say add Python three seven to the path this should be the default because it really throws off beginners but make sure you have it added to the path or you're gonna be completely screwed alright so now we're gonna go ahead and install Python on our machine now you can think of Python is just really just an executable program so I'm sure you guys aren't new to Python if you're following along in the series but just in case you are flask is just a bunch of Python code that's written with Python and it uses Python to execute that flask code so really anything we do in flask can be done in just simple Python so you want to think of those two as one in the same essentially now when we talk about view our current the client-side framework that we're gonna be using for this tutorial series that is something that's that's relatively new it's based out of China which is a road also it's kind of new for a popular open-source language or a framework or library that whatever you want to call it's really more of a framework but um yeah it's just it's it's an interesting thing it's used by Alibaba and a lot of different companies out there and view is completely free to use it's MIT license so it's just much simpler to use for beginners I think compared to something like react but if you guys are interested in react or like type script I have other tutorials on you to me that you guys can check out so now that that's installed let's go ahead and close this out what I want you to do is go to your Windows and then type in CMD to go to your command prompt and if you're on Windows or Mac or Linux and it's gonna be something similar but just go to your command prompt and you want to just make sure when you type in python that you're getting python 3.7 and that means that python is actually installed on your path and then you can actually execute Python code which that's what our emulator there is doing so I'm going to ctrl Z to get out of that alright guys so in this next video what we're gonna look at is actually how to install flasks on our project so what I want to do is actually figure out where my projects gonna live I have a project's tutorials directory and inside of here I'm going to create a folder that I'm gonna call flask and inside of here I'm gonna you know double click and then I can actually remove this and type in CMD it's gonna pull up a command prompt to that location this is where I'm gonna use pythons built-in package manager called pip and this is going to reach across the internet and install all the files and everything that Flash needs in order to run so I'm going to say pip install and then with a capital F I'm gonna say flask so this will reach across the web once again you may end up getting a your internet like your antivirus may flag it but just allow it to go through you could see here that I already have flask installed so this is gonna look probably a little bit different than what you guys have if you don't have it installed but because I already have installed it's not going to you know just kind of tells me I already have everything I need so in order for us to be able to write code we need to go ahead and download a free product called Visual Studio code so Visual Studio code is a free product from Microsoft it works cross-platform so Mac Linux Windows you can use this it has a lot of community support and there's a ton of packages for it so make sure you guys download that and install it once you have it installed you can go ahead and just type in the Visual Studio you should be able to see Visual Studio code you're gonna select that then you're going to need to open your folder location to the tutorials folder for flask that we just created and you can put your project in whatever folder you want but this is just kind of my convention for my tutorials if you guys are new to Python I have other Python series available on udemy so make sure you guys check that out some of the latest Python stuff is there we're gonna go ahead and create our first flask app right now so let's say new file and in here we're gonna say app dot py and py is the Python file extension we're gonna say from flask import with a capital F we're gonna say flask so now that we've done that we can now go ahead and create our app container object and we're going to use the flask class name that we just imported and then we want to use this convention this underscore underscore convention followed by another underscore underscore which allows us to run our server from the command line here we're gonna go ahead and identify our route so by convention this string right here this forward slash is the root directory to your website so like that's your homepage but we're identifying okay on the home page whenever you route to that I want you to fire this method which is just gonna be called the index method and this is just a Python method note no different than anything else for Python methods and it's just gonna return a string which will say hello world alright so that that's the string that'll be returned when we navigate to our root directory of our application all right so now a new convention with flask is that it actually recommends adding an entry to our path in order for us to be able to run a built-in web server that comes included with flask it's not the type of web server that you actually want to run a production website in but it's actually good enough for development and the fact the flash developers felt like you know it would just be a lot easier to have that shipped with the project so let's go ahead and um I'm gonna open up my folder location here and I want to show you that we want to add this to the path here so you can see because if you try to run this application you're gonna get that the path attribute is not found so we're gonna go ahead and actually add the flask app attribute so we're gonna say set because we're on Windows flask app and then this is where we give it the name of the project so what is our project called it's called F dot py right so if we go ahead and do that and we've now added this so if we say Python using the M flag we're gonna say flask run so now you can see though that it says do not use the development server in a production environment okay so like clearly don't want that you can see debug mode is off but it says running on localhost localhost 5000 so how do you get to that you just have to pull up a browser so what you do here is you just have to pull up a browser and you're gonna put in your localhost address which is 127.0.0.1 and then colon the port that is it that the apple is is listening to which is port 5000 and that way you can see when we go to this home Paige we now have this hello world so let's go ahead and add another page to see that we can easily add another route and we could say you know what this is going to be called the about Us page so this is gonna be about we're gonna say divine about and then this is gonna it's just simply return Chris Hawkes is a programmer subscribe to him on you too I have a hundred thousand people on YouTube that followed me actually a lot more than that but um if you guys could also check me out on youtube I have a lot of free content there but if you go and we now have this I have this built what I want to show you is if we go over here and we put forward slash ape out you're gonna see that we get a not found now the reason why is because we need to restart the server so anytime you make new changes you're gonna have to actually kill your server you're gonna press ctrl C to stop it just press the up arrow the up Direction arrow on your keyboard and it will remember the last thing you ran and just press ENTER and it will run it again and now if we go to the about page you can see that Chris Hawkes is a programmer subscribe to him on YouTube so that's how we created a separate endpoint we go back to the home directory you can see that we get this new hello world so now we have two separate pages to find in our flask application alright guys so in the next video we're gonna actually see how to get up and running with view so I actually got ahead of myself I actually said that we would be jumping into installing view we're actually not ready for that right now so what we're gonna do instead is we're actually going to look at how to get static files working for our application static files meaning CSS I want to be able to add some color and some style to our header pages here so I'm gonna go to visual studio code here I'm gonna create a new folder and I'm going to call it my static folder and by convention everything for like CSS files and everything are usually put in a static folder now create my main CSS file and inside of here I want to go ahead and just say h1 equals you know color is red so that we know that something is working I also went back to my app and I changed this to actually return an h1 tag so I'm sorry to show you guys that but if you guys actually change this to an h1 tag you can see that these strings can return just raw string which gets put inside of your body tags of your HTML page or you can actually return actual HTML so in order to use templates in flats what I want to do is create another folder but I don't want to put in my static folder I want to put it in the root directory I'm gonna create a folder that I'm gonna call templates and inside templates we're gonna create a file that we're gonna call just index.html which is like our main page this is gonna be a bunch of HTML here so I'm going to type this in we're gonna say home page and then I'm gonna put a body tag in here and then we're gonna say hello from the templates all right so that's the h1 here so we have this template so how do we render it we're gonna go to our app and up at the top where we have and the import from flask we're also gonna import something called render template and it's render underscore template so down here instead of actually returning this string we're gonna actually say return a render template and then we're gonna pass it an argument and the argument that we're gonna pass it is the it's actually a couple of arguments so we're gonna pass into this function the first one being the actual template name which we need to say that's in the templates directory in the index.html so we want to use template and then we also want to say you know what yeah that's fine we're just gonna return the template for right now don't don't worry about anything else another thing too is I want to just be able to run this straight from Python so at the bottom here I'm gonna say if so this shorter hand convention is just if underscore underscore name underscore underscore equals and then inside here there's string underscore underscore main underscore underscore we're saying if it equals main sort for running it from the command line just go ahead and run the app so we're saying app top run so now by doing that though I can go to my command line and I can just simply say Python and then the name of the project which is app I have to say dot py sorry on my machine but now you can see it's going to try to run it doesn't give us any sort of indication that the file is running we should probably actually say something like print the server is running on localhost or something like that we should probably say something right that that it's doing something so the reason why I also don't have this working is because I have an extra underscore in there so that is a typo I need to get rid of that but going back over to the command prompt if I do that you can now see that we're getting the same functionality and also just notice that the main difference is that we didn't have to give it all the different arguments so before we now we're saying Python app top py where before we had to say you know Python run the flask keyword and then say run and it uses the built-in server and stuff but you can see you know the conventions behind the scenes it's like we don't really need that sort of magic let's just figure it out but here you know now you can listen on the port 5,000 we can actually change a lot of that one thing I want to show you guys with the app dot run is we can give a command let me let me actually show you in the next video so in this video I want to actually focus on one of the reasons why debugging is important and and flask and by default the debugger is not actually set to be enabled so what I wanted to show you guys in the last video we looked at how we can actually set up templates and we created our first template but I want to show you that this isn't going to work and and and and really one of the hiccups that you might have when developing with flask and hopefully this video will just straighten that up so this is not going to be found this is going to complain when you try to go to the home directory it's going to say that it cannot find that templates folder so let me go ahead and explain that real quick if I go to the command line I'm gonna go ahead and run my app so I'm going to say app type UI now if I navigate over to the localhost and I try to go to this page you're gonna see that we get this internal server error so we get this generic error message but if we go to the command line we get a little bit more information you can see that the template is not found so it's like well it could not get that in the browser well by default it's a security concerns whoever throw up a server error to say what the problem is so any sort of end user because they might be able to take that problem and manipulate it even further so by a convention that's that's a security concern but since we're doing local development it's really not that big of a deal to just go ahead and have some some more helpful debugging features in there so what I can do is in my app dot run I'm gonna say debug equals true with a capital T because it's a built-in type for Python it's a boolean type and by doing that now I can get some additional information when I run the application so I'm gonna press control C to kill this restart it and now you can see that we have this you know this additional debugger it says it's on it's active if we go over to the page we try to refresh we get much more helpful formatting and styling and everything and it says template not found it just tells you right there boom you don't have well why is it not found the reason why it's not found is we said it look inside the templates directory but flashed by default already does so I don't need to do that so by taking out templates it's automatically going to look for a templates folder in your root directory of your project and it's going to look for a matching template inside of here which is indexed so that's it's it's just gonna be found by doing it that way so if I go ahead and restart the server and now I navigate back over to this home page you're gonna see that we actually give the hello from templates so in the previous video we created a template and now we're actually able to see it working we also have good debugging working so now let's go ahead and see if we can link to this static file so we're gonna do that in the head and we're gonna see if we can actually link to that so we're gonna say link relation equals style sheet and then href equals the location to where it can be found so we're gonna say static main dot CSS so we're saying look in the static folder find the main dot CSS file hopefully if everything goes well you're gonna load it and we're going to see if we can actually get that running so we have to kill the server again and now we have actual CSS working with our application so let's take it one step further since this tutorial series is all about making modern applications so everybody uses bootstrap and bootstrap is um it like I said it's just everywhere you need to learn it and learn how to use it so you just go to the bootstrap you're gonna download the compiled CSS and JSS rjs code I'm sorry and it's just gonna have some CSS and JavaScript folders so if we go ahead and open this up I'm going to be able to come on alright I'm gonna be able to take both of these I'm gonna extract oh shoot I didn't I mean yeah I'm gonna take both of these and extract this over to I'm gonna go to my project and so C char C colon projects tutorials flask static put it in my static folder so now that I've done that you can go over to our static folder you can see we now have all these files that the CSS and all this other stuff so let's put our main in into the CSS folder there because I'm actually going to do that and so since I've done that I need to modify this location to say main dot CSS and I also now want to go ahead and include the bootstrap dot min dot CSS as well and I want to include that before my CSS so that way if I have to ever override anything that bootstraps doing my stuff will come after that so we're gonna say CSS we're gonna say bootstrap min and dot CSS so now that we've done that we're now going to get h1 styling from on the bootstrap library so let's go back over to the home page here and you can see that we actually now have new templates and if I look at the h1 by right-clicking you can see that ok we get the color red from our main dot CSS but then beyond that like we get all this other stuff from this type dot s CSS and you can see that all this stuff actually is coming from the bootstrap project it's all written in sass so that's what that s CSS stuff is all about but anyway that is that's some good helpful information we now have bootstrap working and we're rocking and rolling alright guys thanks for watching hey guys what's up welcome back so in this video what we want to do is actually look at how to install a bootstrap theme and you can go to a website like start bootstrap comm where they have free themes that you're able to download so we're gonna download this entire bootstrap theme and it's a bunch of files and everything so we have to actually figure out where we want to extract all those to so if I double click into this like we saw on the last file when we installed all that other stuff we basically want all these files to go into the static folder the same static folder that we just used for our project so we're gonna extract all that there now my index obviously is going to be extracted instead of from the static folder we're gonna put that into the probably you guessed at the templates folder alright so we're gonna put that there and then we're also going to replace the home page so now if we go in and we look at the app let's go back over to it you can now see that we're getting all this this in this new text and everything that's coming in but what we're missing is we're missing all the static con so if we look at our browser and we right-click and say inspect element if you pull up the console tab you're gonna see that we get all these 404s that's missing all kinds of stuff from bootstrap men all this stuff so let's take a look at what's going on here and if I go into my application of Visual Studio code I'm gonna close this document for right now so we can see this a little better and you can see all this stuff in here and we're missing the static file references to all this stuff so if I went ahead and I said you know what forward slash that works like static and then vendor so I'm gonna just copy this specific statement and anything that doesn't have a fully spelled out URL like obviously the vendor I need to put that in there too CSS I need to put that in there probably any sort of images that this thing is using you're going to need to do that so are we using images over here it doesn't look like it's so far here's an image right here so we want to put that in the static here's another image and another one okay another one oh shoot so basically for the entire template here we're gonna go through and we're going to take all our static content and we're going to replace all these locations to the location to where it can actually be found by our flask application looks like we might almost be done with this and I'm just kind of rushing through this I might miss a few but it's not gonna be the end of the world you guys obviously understand what's going on if you still get missing references it's probably because you didn't update the URL so you just have to do this a couple times too to get it right really just once usually if you take your time so we're gonna paste all this and we're almost done all right so now that we've done that if we go back and we refresh we now get much better results so we're still missing some stuff though you can see missing bootstrap mndot CSS that's a that's a big deal actually that's a that needs to be there so where is the bootstrap reference oh yeah let's see we're missing the main core file there so that's what I was talking about take your time you do it right it works but anyway look at that so now we have a much better template so we have a very modern looking website it's very zoomed in right now this is like the normal zoom you can see we got images we have CSS we have a very modern looking style on a flask application very very quickly alright guys welcome back again so let's go ahead and add a few things in here so we're gonna say an awesome tutorial by Chris Hawkes if you guys like this tutorial make sure you guys follow me and I have other tutorials out there Chris Hawkes is gonna be the author of this I'm gonna call this flash and a view tutorial alright so then we have some more of our so basically some custom stuff so what I want to talk about in this tutorial is that the template engine that comes with flask is called Jinja - it's a very popular template engine very similar to Python or I'm sorry Django's template engine that is pythons other very popular framework which is Django and and it allows us to use block tags and stuff like that so we can use things called like template inheritance and things like that so what I want to show you guys is that in our templates folder we're gonna create a new file for our about page so about HTML and instead of actually saying you know what and inside the templates folder I'm also going to create a new file I'm going to call this layout dot HTML so that's gonna be our layout page everything that's in the index page I'm going to ctrl a ctrl C and I'm going to press ctrl V to paste that into the layout so there's gonna be the main portion of our app now on the home page what I want to do is after the header this like portfolio section I basically want this to be the home page so I'm going to copy that entire section I'm going to cut it out actually I'm going to take out everything in index I'm just gonna paste that small section of of HTML there alright so now in the layout page I'm going to go back to that I'm gonna say that I'm gonna take this About section and I'm going to I'm going to cut that alright so I'm going to cut that all out and I'm gonna put that and you guys did the about section and now in order for the about and the index to actually use the layout and then we need to actually tell it that it needs to use the layout so the top the first thing you're gonna do inside these curly brace percent signs you're gonna say extends which is a keyword extends and then here is the layout page they're gonna say layout HTML and you don't need a closing bracket for this um so that does actually throw people off but what we need to do is create a section then we're gonna call our block content and then any sort of block that you have you always have to have an in block statement so after your content you're gonna say just simply end blog just like that alright I want to fix the indentation here I'm gonna if I highlight this portion I can press can shift tab and it's going to indent it correctly here and this needs to go in one alright so that looks good alright so now we have this block content section I don't want that and then to come on there we go sometimes this editor tries to do too much for you alright so there now we're using the extends I'm gonna go ahead and copy this entire part right here and I'm gonna do that inside of the index as well so I'm going to put that right there and then we're gonna do an end block down here all right so now that we've done that let's go ahead and test it out I'm going to show you that this isn't going to work right away because we have to do one other step but if we go over here you can see that it doesn't look any different I mean that's because we actually need to restart the server so do that first restart it and then now when you go ahead and refresh it you're going to get a similar looking result and the reason why is because the index page is being served and it is extending the layout but what you're going to notice here is that is that our layout dot HTML file is not saved so I'm impressed ctrl s to save that and then now if we go back over and we refresh it you can see that we're missing some stuff we're now getting the contact me so it's like well hold on a second so number one contact me should probably be its own page as well so let's go and break that out and do the right thing right we're gonna create a contact page so contact HTML and then again just like we've done with our indexes and everything else in fact I'm gonna copy this entire thing and do that inside the contact but then the section I'm gonna take all that out so basically your pages can look like this and then we're going to go back over to the layout and we're gonna take out this contact section and actually shrink all that up take that out and put that inside the content brackets all right so now how do we get all this content to actually show up in the layout the reason it's not showing up is because we don't have a matching block content tag so that's we're gonna do now block content and then that by adding this it's now going to know okay because I'm using this template inheritance I'm going to find my block content and anything between those block content tags for the page being requested it's going to inject all this in there so we can have one layout that has very dynamic you know it's a lot of reusability so code use some senior developers and everything it's all about code reuse you don't want to reinvent the wheel you don't have to have duplicate code to maintain and transfer crosswire when you don't need to but look at this so now we get this this page now we just have the home page working it says portfolio if we wanted to get this this about page working let's go ahead and do that so we need to go ahead and update the location inside of our templates go to the layout and inside the navigation here I'm gonna find where it says about and instead of the I just need to say about forward slash about and then we're gonna do the same thing here a forward slash contact and because we're creating a new endpoint we obviously need to go to our app and we need to create a contact page so really I'm gonna go ahead and just get rid of all that paste that in there you're obviously want that to be the about about a bout this is going to be contact contact okay alright you guys obviously get the point here let's go back over to our layout though cuz I do want to yeah both of those working this is just gonna be the home page right now so we'll just make that the forward slash and then we might as well the main oh yeah right here this join right here we just want that to be the home page as well and we're gonna call this Chris Hawke's tutorials and again I have tutorials for everything under the Sun a lot of stuff on YouTube if you guys want to follow me there but if for all my latest stuff which is usually of higher quality than stuff that I used to do back and back in the day I do charge minimal for that with you to me but it's because I have to eat unfortunately alright so anyway guys out if I go over to the about page we're now getting the about page loading up go to the contact page we're getting that you may decide that you know what like this whole start bootstrap and stuff like that it's like well maybe that shouldn't be in the layout page so let's go back over to that real quick we're like you know this big ol the header piece to start when you're like you know what header piece should be optional this is only going to be in the home page that's at least what I would do so I'm gonna put that up here alright so now we have the header and if we go back you can see that the about page now we have some spacing issues and stuff so probably need to go modify really if I probably put a seconding decreased the padding which I don't really want to do that I could probably put a margin on it right maybe that's not going to work probably cuz it's fixed position uh yeah it's fixed position anyway we can do what I say you know what any sort of section you could just say margin top 20 pixels you can say you can get some decent more you get space and me good you get what I'm talking about there you can modify the CSS in fact we even do that together let's go over here we're go to the CSS go to my main dot CSS so we're gonna add a section and we'll just say margin top 20 pixels so now by doing that we go back and it's not taking effect probably because it's being overridden I could always just press you know it that shouldn't be actually that should take effect I may have to restart it so that the CSS file gets updated or clear the cache that might have to be as well you know that's pissing me off actually why doesn't that take effect bastard alright so if I said specifically section give a bow does it care about that does it care about that clear the cache oh you know what we're probably not loading it anymore yeah we're not probably not oh yeah that's right we never okay so that's uh that's also debugging 101 like you'll do stupid stuff like that we're like you're like why is it not working but then the longer you've been doing this the quicker you'll come to the realization so we're gonna say these custom styles custom mofo styles is our custom styles and we're gonna call it main and dot CSS so now that that works I probably could just go back and say you know what instead of specifically saying only the About section I want all sections to have a margin top of 20 pixels you can now see that we have the spacing working correctly all right guys so that's how we update our modern theme have dynamic navigation code reuse all that stuff you hey guys welcome back so in this video what we're gonna do is finally get involved in installing view and getting getting that working so now that we have our templates and all that stuff working and our in our main layout page what I want to do is at the top no I really it will put this at the bottom we want a view really to come after everything we're just gonna put it after everything and we're gonna add this and I want you just to pause the video real quick and if you could just copy this this in right here this is a content distribution network so that as long as you have internet access this will just reach across the web and it will use view in order to use view what I want to do is I'm right outside of this this block content here actually let me think yeah so for right now for right now I'm gonna put this right into our layout page so I'm just gonna say div id equals app and it's just a simple empty div tag so it doesn't look like anything but after you've installed or you've included this script tag we can go ahead and use the view J s library just so for testing purposes I'm gonna put a script tag and just underneath of that and and just so you know in JavaScript and web development JavaScript files are ordered in in the order that they're run into so they're order that whatever order they're in they're gonna go one by one and they're gonna load themselves and their entirety before they go to the next one so that is something you want to keep in mind and they're procedurally executed so in order to use view what we need to do is create in an object and we're gonna call it our app object then it's gonna be the main portion of our app and we're going to say use a new view object and the new view object actually takes in an object itself which is really just a bunch of parameters and we're gonna say the element ID is the ID to the app that we just created so it's app and if you guys remember we just created that a second ago and then what we're going to do is we're going to assign some data we're gonna create a data object and we're just gonna say that the data object equals where there's gonna be a title and it's just gonna be hello world there's simple data title so how do we reference that inside the app well in order to do that all I gotta do is go back up to where identified the app and it's all the way up here and if I go inside the app tags I can now start using all that stuff or it's like I can reference now the title it's gonna know automatically oh he's looking for a data element because he's using these two curly braces so this means he's looking for some sort of some sort of data element that has a key value called title so it's gonna look inside your data of your view object and it's gonna find title and it's gonna return the string hello world so if everything goes well it's press ctrl s to save it pull back up our application and when we go to look at the application it's actually not going to work and the reason why is because flask is using Jinja - Jinja - uses the same two curly braces that that view Jas uses so what we have to do is actually give alternate delimiters to our our view Jas object so we could say we can identify the delimiter object that we could say you know what it equals and we're just gonna say this way so it's gonna be two square brackets and then we'll just say two closing square bracket so those are our de limiters I need a comma after that so you can see now that if we've done that we need to go back up to the top here though and once again because we use this same standard format in Jinja - and this is ginger - that's rendering of UJS we need to go ahead and use the new de limiters that we've created so if we do that we go back to the server we're gonna just ctrl C to restart it real quick just to make sure and if I go over and refresh you can now see Oh God I'm using an equal sign in there there's a there's a this is not that's not valid JSON it needs to be a colon alright anyway guys that is so if we change the delimiter there we restart the server you shouldn't have to restart it every time I'm actually not going to do that sometimes it takes it you have to restart it when you're adding new routes and things like that but for something as simple as this you shouldn't have to restart it if we look at the app now and we go to our elements we're gonna look for our app object so one of the things if we highlight where it is you're gonna be like oh it's off the screen why the hell does it look like that well we don't we don't have it in a sort of section you can see that everything kind of sits inside these like sections that that the app is using so basically what we want to do is probably say you know what the app probably shouldn't be in the layout like really the app should be inside the content block so basically I would say you know what we're gonna use view on we're just gonna say on just the index page and up here I'm gonna get rid of well keep the header really I think you know everything inside of this portfolio inside of this row right here all right so inside of this row right here we're gonna put our app inside here all right so there's there's our good app so now what I'm going to do is create another block section as well for our our layout we're gonna create a block script section and this is where we can be we can safely put our JavaScript code so that way it only executes after all the pages and everything and get executed I'm gonna copy this entire thing down in the layout where we have our JavaScript code I'm going to just below that I'm going to put the block scripts tag here I'm going to take this entire script section out and this ensures that the block scripts section will be injected at the bottom of the page and then by going back over to the index page inside this I'm going to paste in my script so I don't have the indentation exactly perfect but it's good enough for right now so if I go ahead and go back to the application and you can see that we now have better results inside this portfolio we now have this hello world this can be any sort of HTML or whatever you want it to be right now title is just being rendered in nothing but I could wrap it in an h1 on that lower case and if I put the brackets inside of the h1 you can ask you do we have the color that we're using from our main dot CSS file hey guys welcome back so in this video what we're gonna do is we're gonna create a new endpoint that's actually going to return some JSON data from our API our flask server so we're gonna create a new endpoint I'm just gonna paste the since I don't mess it up but I'm creating a route for test and then inside of here I'm creating a Python dictionary object and really you know what this is just gonna be something it doesn't even have to just gonna return a simple object so my dictionary has a title and a genre and we're gonna use this JSON dumps to return the dictionary so what I want to do is actually import the JSON project from the flask library and by doing that I can now go back to my server I should be able to go forward slash test and it's gonna return some JSON data so if I run that through a JSON validator it's gonna be valid now in order for me to get that data what I need to do is go to my index dot file I'm gonna modify this this view object that we've created to add a few more things so the first thing being that we want to go ahead and just for our data we're gonna return a simple object we're gonna just gonna say return it shouldn't you know it's just gonna be an object that's gonna have a title on it because we know that we need a title the title for right now it's gonna be a string it's gonna be empty string yeah that'll work for right now and then down below we want to go ahead and create a methods object so we're gonna say methods and this is a object that has a bunch of methods on it and we're just gonna say fetch the data is our function so that's going to be a function here and we're just gonna say var data equals it's going to be a return object and then here this is where we're gonna go ahead and make an AJAX call so in order to make the ajax call so in order to make an AJAX call using modern methods what we want to do is add a script tag to our index so just above this script tag here I'm gonna go ahead and use this other CD in here so if you pause the video and use this CDN this is going to allow us to use JavaScript promises in order to make an AJAX call so in order to do that I'm going to say the example I'm just going to copy the example from the in fact I'm gonna get rid of the data part here I'm gonna copy this entire thing and once again you're gonna pause your video real quick this is a sample demonstration that comes from the website for this project and you can see here that this is the data that's being returned so we just want to say we just want to return the actual response so we're gonna say return a response and then we're gonna change this some URL to our test URL so basically we're saying if there's an error we're not doing anything if I will just say console dot log and error occurred which isn't very helpful but for right now at least says that an error occurred so this is going to return the response now in order for us to actually be able to use this method we have to do some some work around we're not really a workaround but there is a ready function that is available on the view object when it actually is created it's going to go ahead and fire this initialization function so we're just gonna say what we want you to do is this fetch data so call that fetch data as soon as you're able to so if everything goes well basically this is going to our data object is going to return this response hopefully the title is still there let's go ahead and see what happens so if we go ahead and I wanna make sure I clear the cache and everything if we go into the console we have no error message that message is actually showing up if we look inside the network and we refresh we should be able to see that if everything goes well there should be like a call out to test you can see there is no call to test that's actually being done currently so that Ajax call is not actually going through which is interesting so let's see if we could actually hit the breakpoint so you can see that the method fetch data is not even being called so one of the reasons why this doesn't work is this ready function is actually doing change to mount it it so we want to change that to mounted these things changed a lot unfortunately also I want to say response type body so I want to return return the response body portion so let's go ahead and refresh this real quick so now you can see we're actually getting hit and we're hitting and you can see response and we're turning response type body which is really what we want so now I just hit the wrong button so one other thing that we need to do then we need to change to this and I apologize this is something that has is relatively new at least to me I don't I don't recall having to do this before but what what ends up happening is after you when we create this number one let's let's change our data object you know our data object is just like all the data that gets returned to the the view component there's going to be a band object that obviously is being returned by that endpoint so we're just gonna set the band object as an empty object by default so instead of returning what I want to do is say this dot band equals response dot body so that's actually going to be the result that we're looking for so again instead of just returning the response stop body you want to say this stop band equals response to body because there is no this is just the proper convention for loading the data and then binding it to your state so anyway if we go back if we refresh the page we're gonna hit get hit on this response here you can see again response that body is an object with two values on it and we go ahead and from the results we have property or method title is not defined on the instance by reference during the render ah all right so then the reason why is because instead of saying we need to reference our band object because obviously the band object is being defined here Ajax call gets fired when it's women it's mounted and then takes that band object and it replaces it with the respond stop body that's what's going on and now we reference the band dot title again we go back to our code this should really work now and then finally we at bayside so that is how we actually set up a restful service call that restful service using view j/s take the data that we've called binded to our view j/s component and we're good to go

Channel: Chris Hawkes

Views: 49,351

Keywords: chris hawkes, Python Flask and Vue Tutorial - Video 1, Python Flask, Flask and Vue, Vue Tutorial, python tutorial, python web tutorial, python web development, python 2019, python 2018, flask for beginners, vue for beginners, absolute beginners, flask and vue, python flask and vue, flask + vue, flask vue, vue + flask, vue + flask tutorial, vue flask tutorial, vue and flask, vue flask, vue, flask

Id: iwhuPxJ0dig

Length: 48min 57sec (2937 seconds)

Published: Mon Sep 03 2018