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