And yeah, of course, right now, we don't have a backend. We just have a bunch of JavaScript files. So of course, I could pull in Laravel to provide our API. But I'm also right now sensitive to the fact that many people watching this possibly don't use PHP or Laravel. So even though we might reach for it in the future, right now in the series, I want these examples to be as broadly accessible as possible. So with that in mind, I'm going to set up a fake API, and I'll show you a cool way to do that. So I'm going to use npm to install a tool called JSON Server, and I'll save that to

do that. So I'm going to use npm to install a tool called json-server, and I'll save that to my dev dependencies list. Now if you run npm and it doesn't work, visit nodejs.org and install it, and then try to run this again. Okay, so now if I try to run this, and I can do that by saying npx json-server, it brings up the help, but also we see a little note here. Hey, we're missing the source argument. So we need to create a database that it can work off of. Okay, let's do that now.

So we need to create a database that it can work off of. Okay, let's do that now. So remember, we're not creating a real database. This is just a fake API for testing, and it's perfect for examples. I will call it db.json. And yeah, check out how cool this is. If I want an endpoint to fetch assignments, let's call it assignments, and that should return an array of assignments. So if we switch over, here's what we had before. Why don't we copy one of those, switch over to our database, and then paste it in.

So if we switch over, here's what we had before. Why don't we copy one of those, switch over to our database, and then paste it in. But of course, right now it's going to fail because it's not formatted properly. So let's make sure we wrap everything with double quotes, like this. And then I will reformat. All right, and that's the basic shape. If I want to add more, I can duplicate this as many times as I need to. Now when I make a request to the assignment's endpoint, it will return to me all of these objects. Okay, cool.

objects. Okay, cool. So to save time, I'm not going to make you watch all of this. Let me paste in one that I wrote earlier. And notice the names here perfectly correspond to the ones that we hardcoded within assignments.js. So ideally, I should be able to remove all of these, and instead fetch them from our new fake API. Okay, let's run it again. npx json-server, and then the filename is db.json. Very cool.

npx json-server, and then the filename is db.json. Very cool. I have an assignments resource ready to go. But there is one little issue. Notice it's trying to run on port 3000, but our main server is also running on port 3000. Why don't we exit out, do it one more time, and I will set the port to 3001. Okay, that way they won't interfere. So check this out. If I open this in the browser, our server is up and running, and here's our assignments endpoint that will return this data.

If I open this in the browser, our server is up and running, and here's our assignments endpoint that will return this data. Yeah, how cool is that? It's perfect. Exactly what we need for testing purposes. Okay, now let's make a request to this endpoint. And I'll show you how to do that. If we visit assignments.js, where would be a good place to make an AJAX request? Okay, well this is where lifecycle hooks come into play. So why don't we take a look at this diagram that Vue.js provides.

a series of lifecycle hooks. And here's some common ones. beforeCreate, created, mounted, unmounted. So for example, if we want to execute a bit of code right when the component has been created but it hasn't yet been compiled, then the created hook is what we want. And as it turns out, the names of these hooks are also the method names we use. So for example, created, alert, created, and let's give it a shot. Refresh, and it works. Okay, so the most common ones you'll use are created, mounted, and this means the component has been created, compiled, and rendered to the DOM.

Okay, so the most common ones you'll use are created, mounted, and this means the component has been created, compiled, and rendered to the DOM. So that's a very common one. And then another common one is after the component has been unmounted from the page. And you'll often reach for unmounted when building single page applications, where maybe you need to remove event listeners so that you can free up memory. Okay, so hopefully that makes sense. For now, the 80% rule, just learn about created, mounted, and unmounted, and that'll take you a really long way.

For now, the 80% rule, just learn about created, mounted, and unmounted, and that'll take you a really long way. Okay, so if we want to perform an AJAX request to create all of our assignments, what hook might we use? Well, we could use mounted, but that's after the component has been created and compiled. So it would work, but maybe it would be better to do it one hook before that. So we'll stick with created. Okay, now we can use any kind of JavaScript library you want to perform the AJAX request.

those assignments are coming from this database we created. Okay, so the next step is to accept those assignments. And in fact, we can call it whatever we want. Let's call it assignments. Let's now assign it right here. So I can say, after that AJAX request is complete and we have the assignments, let's save them to that data property. And when we do, we update this. It changes, so view re-renders the DOM. And yeah, you can tweak this as you need to.

It changes, so view re-renders the DOM. And yeah, you can tweak this as you need to. So for example, maybe you'll add another one here. Maybe we have an assignment for finish lyric cast video. And we're about to be done, so we'll set it to true. And that will have a tag of programming. Okay, now keep in mind, if I update this and I give it a refresh, it's not reflected here. Whenever you make a change to your database, make sure you Ctrl C out of your server and boot it up again.