5

I'm building a simple REST API (with PouchDB and Vue.js). Right now, I can create projects with a few fields:

server.js:

var express = require('express')
var PouchDB = require('pouchdb')
var app = express()
var db = new PouchDB('vuedb')

app.post('/projects/new', function(req, res) {
  var data = {
    'type': 'project',
    'title': '',
    'content': '',
    'createdAt': new Date().toJSON()
  }
  db.post(data).then(function (result) {
    // handle result
  })
})

client.js:

// HTML

<input type="text" class="form-control" v-model="title" placeholder="Enter title">
<input type="text" class="form-control" v-model="content" placeholder="Enter content">
<button class="btn btn-default" v-on:click="submit">Submit</button>

// JS

submit () {
  this.$http.post('http://localhost:8080/projects/new').then(response => {
    // handle response
  })
}

How can I pass parameters to set title and content? What's the conventional way of doing this in a REST API?

Régis B.
  • 8,872
  • 6
  • 45
  • 81
alexchenco
  • 47,739
  • 69
  • 219
  • 389
  • URL params: `http://localhost:8080/projects/new?title=Alien&content=scream`... Express has methods (`req.params` I think) for picking those values out. – Andy Feb 17 '16 at 13:35

1 Answers1

6

On the server side, you can access to the data sent by the client in a POST request using req.body.

So your server.js file would be like this:

var express = require('express')
var PouchDB = require('pouchdb')
var app = express()
var db = new PouchDB('vuedb')

app.post('/projects/new', function(req, res) {
  var data = {
    'type': 'project',
    'title': req.body.title,
    'content': req.body.content,
    'createdAt': new Date().toJSON()
  }
  db.post(data).then(function (result) {
    // handle result
  })
})

On the client side, you'll have to pass the body of your POST request with an object as the second parameter of $http.post. client.js would look like this:

// HTML

<input type="text" class="form-control" v-model="title" placeholder="Enter title">
<input type="text" class="form-control" v-model="content" placeholder="Enter content">
<button class="btn btn-default" v-on:click="submit">Submit</button>

// JS

submit () {
  this.$http.post('http://localhost:8080/projects/new', {
    title: 'Your title',
    content: 'The content'
  }).then(response => {
    // handle response
  })
}
fbouquet
  • 76
  • 3
  • 1
    Perfect. Thanks! So this is the conventional way REST API's do it? – alexchenco Feb 17 '16 at 14:18
  • 1
    You're welcome! Yes, that's the conventional way to do it for POST / UPDATE / DELETE requests: you send a body in the request to provide data. The only HTTP method for which this would be different is GET (you would have the parameters inside the URL and would get it using `req.params.myvar` in Node. – fbouquet Feb 17 '16 at 14:29
  • Oh, I get it. But why not use `req.body` for GET too? It's not possible? Or there are drawbacks? – alexchenco Feb 17 '16 at 14:36
  • 1
    It may be possible but that's not the way the HTTP protocol is designed. By definition, a GET request is entirely defined by the URI and the request body should not be used (see http://stackoverflow.com/questions/978061/http-get-with-request-body for more details). Not sure about this guess, but I'd say a potential reason why the URI itself should be enough to identify a unique GET request is for caching purposes for example. – fbouquet Feb 17 '16 at 15:51