UPDATE
Client Side
ref – https://github.com/redmacdev1988/SlideShow-Frontend
When we want to make a web request, we can use JS’s Request object.
The first parameter takes in an url, next parameter is a dictionary where key/values specify the details of the request. i.e web verb, headers, body data, etc.
For example, we want to make a PUT request on an url http://1xx.xx9.xx.xxx/pictorials/beijing-tower, use standard mod as cors, specify body data as “description=’hehe haha'”, etc.
Also notice that we set the body data like so: parameter=value&also=another
https://stackoverflow.com/questions/14551194/how-are-parameters-sent-in-an-http-post-request
updatePictorial.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
updateButton.addEventListener ("click", function() { var newDescription = document.getElementById(this.getAttribute("id")).value; var requestURL = API_URL + this.getAttribute("id"); var request = new Request(requestURL, { method: 'PUT', mode: 'cors', body: "description="+newDescription, // 2 mb limit redirect: 'follow', headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }) }); fetch(request).then(function(result) { if (result.status == 200) { alert("updated"); } }); }); |
Then we fetch this request object, and get the response.
Server side
ref – https://github.com/redmacdev1988/SlideShow-Backend/
In node, we specify our routes. We say for our app, when the incoming request has the route of /pictorials/id and the web verb is PUT, then we take care of this by calling exported function update_a_pictorial in the pictorialController file
SlideShow-Backend/api/routes/pictorialRoutes.js
|
1 2 3 4 5 |
var pictorialList = require('../controllers/pictorialController'); // todo change post to put app.route('/pictorials/:pictorialId') .put(pictorialList.update_a_pictorial); |
And so we implement update_a_pictorial function. We have the standard request/response object. In the req object, we look at the body to make sure we have received the data. The id, being passed via the url, will be in the params array property.
Once you have that, we use mongo’s findOneAndUpdate function to update the row associated with the ID with our new description.
SlideShow-Backend/api/controllers/pictorialController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
'use strict'; Pictorial = mongoose.model('Pictorial'); exports.update_a_pictorial = function(req, res) { console.log("--- update_a_pictorial ---"); console.log(req.body); Pictorial.findOneAndUpdate( {name: req.params.pictorialId}, { $set: { description: req.body.description } }, {new: true}, function(err, pictorial) { if (err) { console.log(err); res.send(err); } res.send(pictorial); }); }; |
DELETE
This feature makes a DELETE request. We set up our basic Request properties such as method, mode, body, etc.
Notice in our body, we now attached the unique id of the pictorial so the server can delete that row in the database.
client side
Also notice that we set the body data like so: parameter=value&also=another
https://stackoverflow.com/questions/14551194/how-are-parameters-sent-in-an-http-post-request
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var deleteButton = createElement("button", deleteBtnAttributes, "delete"); deleteButton.addEventListener ("click", function() { console.log("DELETE button clicked!"); var requestURL = API_URL + this.getAttribute("id"); var request = new Request(requestURL, { method: 'DELETE', mode: 'cors', body: "pictorialId="+name, // 2 mb limit redirect: 'follow', headers: new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }) }); fetch(request).then(function(result) { console.log("--- result ----"); console.log(result); document.location.reload(true); // refresh page }); }); // addEventListener |
SERVER SIDE
We then let express know that for the delete verb, call delete_a_pictorial function.
SlideShow-Backend/api/routes/pictorialRoutes.js
|
1 2 3 4 5 |
var pictorialList = require('../controllers/pictorialController'); app.route('/pictorials/:pictorialId') .put(pictorialList.update_a_pictorial) .delete(pictorialList.delete_a_pictorial); |
SlideShow-Backend/api/controllers/pictorialController.js
We extract the data (unique id) from the body, and use it to specify which pictorial we want to delete.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
exports.delete_a_pictorial = function(req, res) { Pictorial.remove({ name: req.body.pictorialId }, function(err, pictorial) { if (err) { res.end(err); } res.send({removed: req.body.pictorialId}); }); }; |