FREELessons: 24Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Persisting Models to the Server

The models that your web application creates on the front-end will need to be stored to a web server on the back-end. In this lesson, we’ll look at creating a back-end that our models can connect to and the model methods that take advantage of it.

Related Links

2.4 Persisting Models to the Server

In most of your Backbone applications, the models that you use on the front-end will either come initially from the server, or you'll want to save them to the server if they've been created in the browser. So this means we need some kind of a connection between our front-end Backbone application and our back-end. In this case we're going to be using node and express as our back-end. And right here you can see the beginnings of a very simple back-end server. So I've created an application, and as you can see, we're just serving our public directory here, statically, so that we can access our index page as well as our JavaScript files. And then right now just for every root that's requested, we are serving that index page as well. And we also have some body parsing in here which will be used when Backbone sends a request to the server. And for now, we're not going to use an actual database to store our records. We're just going to use this right here, a books object, and here's our id attribute, which we'll use to count the ids for these objects. So right now, we just have our book model here with no properties. What we need to add for our book to access a server is a URL root. Now the URL root is the root, or the beginning portion, of the URL that Backbone will access on the server to do any of the work. So in our case, let's start by making that /books. This means that when we want to create a new book, it will post to /books. When we wanna read a book that already exists there, it will get /books / id. When we want to update an existing book, it will do a put to books/id. And finally, when we want to destroy a book it will do a delete request to /books/id. So this is the API that we will have to create on our back-end. Now here, as you can see, I'm at localhost3000. This is the little application that I've set up, and let's create a book here. So we'll just create a book with no attributes for now. We can find out, has this book been saved to the server, by doing book.isNew ,and as you can see right now that's true, which means that this is a new book. It does not have a representation on the server. So let's go ahead and give this book some attributes. All right, and now we can do, and will save this book to the server. Now if we do this, notice that we get a error here. Posting to /books was not found. Okay, so let's come back here to our server, and let's actually create this route. So we'll say and when we post to /books, we have a call back that takes a request and response. I should mention that if you are not familiar with express, this is a really good library for building a back-end into a web application. And I would recommend that you check it out. I have a course that teaches express on Touch Plus. I'll have a link to that underneath this video. Let's create our book object here. In this case, we'll just say request.body, and this will be the body of the http request. And we can access this body because we have enabled the body parser of specifically for adjacent bodies. So this will actually be an object that will be the attributes that we have past back to the server. Of course in most cases, you probably wanna do some kind of validation on the properties here and not just accept them into your database. But we'll keep it very simple since we're focusing on backbone here, so let's give our book an id, which we will get by doing plus plus on the id variable that we're keeping. Then we'll say books, which is this object right here on line 9. We'll give it as the index, and we'll just assign that to book. And then as a response, we will send back the book as JSON. Now I should mention, when we use that book.isNew method, the way Backbone checks to see if a model is new is if it has an id attribute. So what we've done here is we've added an id attribute to this model. We've saved the model on the server, and then we return the model with the ID so that Backbone knows that the model has been successfully saved on the server side. Great, so now this should restart automatically for me. So, if we go back to the browser, I'll refresh the page here, and we can say book = new Book. And I'll show you here that we can do, and we can actually set those attributes right in this save. And this is just a shortcut from doing book.set and then Great, so we'll go ahead and save that. And as you can see, we don't get any request errors. You can see right here at the bottom of the network panel we have books, our poster quest was made successful this is what we got back. Right there, you can see our response includes the author, the title, and the id attribute just like that. So now I can say book.isNew, and then you can can see that it's false, because book as an id. If you look inside the book here you can see not only does the actual object itself get an id, but inside attributes we have our id as well. So we can do book.get ID, and you can see the ID that we just set. Now if our book has been saved previously and we do save again, it will do an update to that model instead of creating a new model. And so, if we do this now, you can see, we could do, and let's give it a published date. And now you can see we get another error, we cannot PUT to books/1, so we have to go ahead and create that back in now. So let's say app.put to books/:id, and the entire book will be sent back, not just the update. So we can say where id equals, and let's do a parseInt, and we'll get which is this token right here, :id. And so then we can update it by saying books id is going to equal whatever the request body is. So we'll just replace what's currently in our little database with whatever the new request body is. And then, let's just go ahead and do response.json response books id. So we'll make the update and then send it back. The server will have refreshed, which means I have to recreate our book. So we'll go ahead and create our new book, and then we'll just do the initial save. As you can see, that does our post request. And so now, we'll do book dot, and let's just do this as a set first, so we'll set published equal to 1893. And then we can save, and no error this time. If we go to the Network tab, you can see right here we made our put request successfully, and you can see we have our response exactly as you would expect. So there you go. We've done creating, and we've done updating. Now let's talk for a second about reading, and I'm gonna copy this, and we're gonna put it into books. Down here we'll just go books[++id] = and then let's just paste that right in there. And we'll also, of course, give it an id. This way when our server refreshes again, we will have our object still saved in here. And this should be the id, there we go. Okay, and that's good. If we want to get this from the server, we'll do app.get/books/:id. And I'll copy this getting the id line from our put function. So we'll parse the request params id token. And then all we have to do is response.json, and we'll send books[id]. Okay, so now what this means is that we can come and refresh our server. And now, let's create a new book. And we will only give it an id. So if I set the id equal to 1, which I happen to know corresponds to our id on the server. Now, I can say, book.fetch, and what it will do is, this only will works if the book has an id. But since our book does have an id, it can get that specific resource from the server, and it will get those properties and fill this book in. So now, if I do book.values, for example, you can see that we have those attributes loaded from the server. If we look at the network tab here, you can see that if we did a get request to /books/1, and that book was returned. Okay there's one more thing that we want to do, and that is book.destroy, and if we do this you can see that the problem is we don't have a delete request on the server. So let's add that final one. So we'll add it after the update here. We'll say app.delete, and when we delete on /books/:id. And then in here, we can do delete books[id]. And then we'll just go ahead and return null, because once we delete the response, there's nothing actually to return. Now, if we refresh this, and let's just do that again where we get the book. Now we can do book.keys, and you can just see that we did fetch it from the server. And now, if we do book.destroy, and if we go to the Network tab here, you can see we made our delete request and null was returned. And, now, if we refresh this, we can create our new book with an id of one. This time, if we do book.fetch, we should find, if we go to the Network tab here, this response has no data available, nothing was actually returned. So, if we do book.keys, you can see that, we only have an id, because that is all that we set. So there is nothing left on the server that has an id of 1. So that is how we can create a server back-end that will work with all four of the different CRUD actions for our Backbone models.

Back to the top