Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:18Length:1.9 hours
Introduction to koa javascript framework 400x277
  • Overview
  • Transcript

3.2 Stubbing Out the Task Routes

The next thing that I'm gonna show you here is how to structure your route handling a little bit better, and put them off into a different location within your source directory. And then import them into your server file so you don't get all cluttered in your main file here. Now this route one, I think it's probably fine to leave here for now. But now what we wanna do is when we start actually start getting into the actual task routes. Let's go head and add these a little bit smarter. So now what I wanna do is I wanna come into my source directory and I wanna create another directory. So I'm gonna say, New Folder, and in this case I'm gonna call this routes. So now any part of my application that requires its own routes are now going to be put in here as its own file to handle those routes. So what am I talking about? Well, at this point in this application, we're really only gonna be talking about tasks. So I would create the task route file in here, right? But if I were to then extend this and be able to support task lists, and if I felt like task lists needed their own routes, then I would create another file in here for the task list routes, if you see how that works. So what I'm gonna do now is I'm just going to create the very basics of how I'm gonna have this look. And then I'm going to get this all wired up so you can see how it's actually gonna work. So within here I'm gonna create a New File. And within here this is going to be the tasks.ts. So you can call this anything you want. But this is, because of its location, I'm just gonna call it tasks. Under routes this is gonna be the handler for the task routes. All right, so now in here, what do I wanna do? Well, I'm gonna do just kind of like a skeleton, so I'm gonna do basically what I've already done in the server file. I'm gonna say import * as Router from koa-router. So we've already seen how I'm creating a new alias for router. And then down in here, I'm simply going to say const router = new instance of Router again just like we've seen before, that's nothing too crazy. And then what we could do is I can create whatever sort of routes in here that I want. Now I will tell you that this is going to be for tasks. And I'm gonna be handling four basic operations. I'm gonna be handling, well, actually five. I'm gonna be handling a get, that's gonna give me back all of the tasks. I'm gonna be handling a specific get that's gonna be handling a specific request for a specific task, so it'll return back an individual task. The post is gonna create a new task. The put is going to update a new task or update an existing task. And then delete obviously is going to do the deleting. So let's just go ahead and stub these out real quick, and then we'll go ahead and see what that looks like, and then how we can use everything defined within this route file in the server file. So I'm gonna say, router.get, now this is going to be the the route. Now in this case I don't wanna handle the route here. But when it comes to the API that I'm designing for tasks, I'm gonna say any time I go to a URL that looks like /tasks, I want this to be my handler. So this is gonna be async, and right now the async isn't really making much sense. You're not really seeing the benefit to it, but as we continue to build this application you'll see. So right now I just kinda put it in there and know that it's not really doing a whole lot yet, but it will later on when we start adding in some asynchronous code and you'll see why it's gonna be important. So then in this case, this is gonna be returning back all the tasks. So what I'm gonna do here is, I'm simply gonna say, ctx.body is gonna be equal to Returns all tasks, just like that. And then we'll do another get. We'll say router.get. And this is going to be /tasks. But in this case you can also handle multiple variations of input. So I can actually add in query parameters here or different parts of the URL request. So in this case I can say slash if I were to pass in maybe an id, right? If I wanted to get a certain test that had an id, I would put the id here. And the way that we specify that with this koa routing is with a colon, and then the name of whatever that parameter is going to be used in my code. So now anywhere in my get function in the request handler right here, I can refer to id. And I'm gonna show you how to do that. So we'll say async. And this is gonna have the context once again. And then we'll come in here we'll say ctx.body. And we'll say that's gonna equal to Returns task with id. And then what we can do is we can actually get in here and refer to this specific value that's been passed in. And the way that we do that is with our context. In this case we're not referring to the body. In this case we're referring to the parameters collection or the params, and then we can say dot, and then whatever we refer to it here as. And so in this case we can say .id. Let me make this a little bit bigger so we don't get that scrolling. So there we go. So now we're gonna say Returns task with id. And then we'll say router.get. And actually no, we're not doing gets anymore. This one's gonna be a post. Now the posts, the puts, and the deletes gonna be similar. But the posts and the puts are gonna be a little bit different. And we're augment this a little bit once we actually start building this application. But we're still gonna have tasks here. And then actually we're just gonna kind of create this quite simply similar to what we've already done here. But instead of the response here being Returns all tasks, this is going to be Creates a new task. And then we're going to augment that later on cuz it actually needs to do something. And then we're going to actually do two more of these. So we're going to copy this, we'll say paste, and paste. So we've got the post, now we're going to do a put. Now put's gonna be a combination where you're gonna have to pass in an id. So we're gonna have to pass in that parameter. And then we're also gonna have to pass in some other stuff so that we can actually update an existing tasks. So we're gonna say, in this case Updates task with id. And we'll do this parameter once again. Copy that, let me just paste it down here, like that. And then finally, we're going to have the delete. Now there's a couple of different ways you can handle delete. I tend to handle the deletes with a slash on the URL right here, just like this. But you can kind of, you can parse in objects or do whatever you wanna do. But in this case I'm simply gonna treat this as a delete. So I'm gonna send back a body of say, Deletes task with id. And then once again we're gonna parse in that parameter just like that. Okay, so we've got the basic structure here of what we want this to look like. So now we've created this new router that's going to handle all of the task routes in this case like I said, we're gonna keep these all in one single file. Obviously if you needed other routes for other things, put them on other files, keep them all together nice and cozy. And then at the very end here what we're gonna do is we're gonna make sure that we export this. We're gonna do an export default. And what we wanna do is we want to export our router. So we wanna export this router instance that we've created so that anybody that imports this can then use that router and do whatever sort of processing they want to. So I'll go ahead and save that. So now, where are we going to import that into? Well, I'm gonna import that into my server. And how do we do that? Well, it's actually pretty simple. We're going to come up to our imports here. We're going to do another import. So I'll actually put this down at the bottom, here we'll say import. This is going to be our taskRouter. So I'm gonna import that taskRouter, where's that coming from? That's coming from routes and tasks, like that. And then we'll come down in here. So we still have this processing here, and that's fine. And now what we're also going to do is, we can come down here below, and we can say that we also wanna do app.use. We wanna use our taskRouter.routes as well. So now we can have different tasks or different routes from different locations within our application, and we can use them all similarly to what we've already done. So let's go ahead and save that one more time. So we've got all sorts of restarts going on in here, kind of the nice feature of Nodemon. So my servers up and running listening on port 3000. So let's open this back up again. If we refresh this, you're gonna see here that if we go to the route, we're still getting that 200. We're still getting Welcome to My Koa App. But now if we were to make a change here and say, I wanna go to the tasks, I'm gonna get Returns all tasks as you can see here in my logging, I'm doing a get request on the tasks on 200. And then if I wanted to get a specific task with an id, I could say /5. And I'm gonna say Return task with id 5. And as you can see, I'm getting that same response down here. Now, handling the posts, and the puts, and the deletes are a little bit more complex and it's nice and easy to do in a tool like Chrome or in a web browser which is really only geared towards out of the box handling traditional get requests. So in the next lesson I'm gonna show you a nice little tip and tool that we can use to go ahead and handle those other types of requests.

Back to the top
Continue watching with Elements