Responder Web Framework Mini-course Transcripts
Chapter: Consuming the API with Vue.js
Lecture: A lightning Vue.js tour
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, keeping with our theme of a high speed fast mini course this is not a deep dive on Vue JS. But, like I said, I did want to provide this app
0:09
for you to play with, and so let me just give you a quick tour so it makes a little bit of sense.
0:14
You can see down here we have our movie service running. I'm going to put that away, so we have room
0:18
but it's going to be running down there the whole time. Now, let's open up this Movie Explorer and notice it has a views, as in HTML
0:26
it has JS and it has CSS. CSS, we don't care too much about but let's look over here at the index. Actually, let's start with the site.
0:35
So, here, you can see it's using the localhost API you can also use the public API that won't be a Responder that's Pyramid
0:41
but it doesn't really matter if you just want to play with Vue you can use that without running the little app here.
0:47
But this will let you work with the API that we are building right there. So what we do is we go and create a new Vue object
0:53
we tell it where it's going to run we pass the data binding elements like the movies and the genres we give it methods like search
1:00
and it's called a lot of movies, if we go down to movies. You see this going against our URL here using a cool library called Axios.
1:08
All that stuff's included, I've committed all the stuff under node modules so you don't have to NPM initialize it to install the local stuff.
1:16
All right, you just check it out and run it. So, anyway, this stuff here, is going to be bound over on this end, because we're saying, "Here's an ID."
1:27
And here's like a search input and we're model binding the search text and if you hit enter it calls that search function.
1:33
And then here, we're looping over all the genres we're looping over all the movie results and putting them here.
1:40
So now that we have our movie service here running in PyCharm, I just minimize that. Let's go over and run our Movie Explorer.
1:49
You can actually run that from PyCharm or we can just run it from the file system and I find that's a little simpler, so let's just do that.
1:55
Go over here to our index.html and, quote, "Run it," and we'll just open the HTML, it pulls in the JavaScript it's going to do its magic.
2:02
So here you you can see that it's hitting our API and I can show you that that is happening, right here you can see it's doing some get request
2:10
of the API input there. And we can do all sorts of cool stuff so I can see the top 10 movies, I can select a movie
2:16
by genre, so let's go see the documentaries "Butteryfly Girl," and whatnot we can say show me the sports, then click on that.
2:23
Or you can show me the the drama, a very popular one. Or you could even search for stuff that's just, you know, fun to watch.
2:30
"Funny People," "Fun with Dick and Jane." Apparently those are all in the comedy. Okay, so this is the application
2:37
and if you look at the network, we go to just XHR that's Ajax, basically. You can see all those requests going back
2:45
to our API input, here, so localhost, API, search test. Test two. If we go and click the top 10, there's the movie top 10.
2:56
Movies by genre, here we go, API movie genre, adventure. So we're not going to go into lots of detail about Vue JS
3:04
that's also covered in the Hundred Days of Web course in great detail, but not here because this is really not about Vue JS.
3:11
Nonetheless, hopefully, having this here to work with comparing how you might call the service and define it and then how you might interact with it
3:21
from a rich frontend framework, like Vue JS. Hopefully that's interesting and adds some value for you.
3:26
Either way, all this code is in the get it repository and you can go an play with it, as you like.