For this project we're going to build an API from Node.js to process the products we can use in the CRUD application. Normally I would use an API using something like Laravel but this is a demo to show how to build a page in VueJS so for speed we're just going to build a quick API in Node.js so that we can access product data from a JSON file.
Products JSON File
First let's create the products-data file we can use in our application, I've just taken the top 5 products on Amazon right now and we'll use these as the default data for the application. For the data we just need an array of JSON objects each having a property of id, name and price.
[
{
"id": 1,
"name": "Fire TV Stick",
"price": "32.99"
},
{
"id": 2,
"name": "Amazon Echo Dot",
"price": "49.99"
},
{
"id": 3,
"name": "Amazon Echo, Black",
"price": "149.99"
},
{
"id": 4,
"name": "Fire Tablet, 7",
"price": "47.49"
},
{
"id": 5,
"name": "Kindle Paperwhite",
"price": "104.99"
}
]
The Node.js API will allow us to read a product file, parse the JSON string into a object, be able to process this data and return what we need to. To create this API we're using a Node library called Express, which allows us to quickly build web applications or APIs. ExpressJS## Get All Products
To get all products from the products data file we're going to pass in the filename into the file system library and parse all the contents of the JSON file to be returned from the method.
app.get('/api/products', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(JSON.parse(data));
});
});
Get A Product By ID
To get a product by ID we need to pass in the product ID parameter into the URL, we'll then grab all the JSON data and search for the object with the ID then we can return the entire product object.
app.get('/api/product/:id', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var json = JSON.parse(data);
for(var i = 0; i <= json.length; i++)
{
if(json[i]['id'] == req.params.id)
{
res.json(json[i]);
break;
}
}
});
});
Create A Product
To create a product we need to run off the POST method which will read in the contents of the products file, push the new product object to the end of the product JSON then write the entire contents back in the products file.
app.post('/api/product/create', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var products = JSON.parse(data);
var newProduct = {
id: Date.now(),
name: req.body.name,
price: req.body.price,
};
products.push(newProduct);
fs.writeFile(PRODUCTS_FILE, JSON.stringify(products, null, 4), function(err) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(products);
});
});
});
Update A Product
To update a product in the application we're going to use the PATCH method to get the entire contents of the product file, find the product matching the passed in ID, delete the selected product, then add the new product to the end of the products JSON.
app.patch('/api/product/edit/:id', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var products = JSON.parse(data);
for(var i = 0; i <= products.length; i++)
{
if(products[i]['id'] == req.params.id)
{
var product = products[i];
product.name = req.body.name;
product.price = req.body.price;
products.splice(i, 1);
products.push(product);
fs.writeFile(PRODUCTS_FILE, JSON.stringify(products, null, 4), function(err) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(products);
});
break;
}
}
});
});
Delete A Product
To delete a product we'll run off the DELETE method, this will need to read the entire contents of the product data file, search for the product matching the ID then delete this from the product JSON and write the entire contents back into the products data file.
app.delete('/api/product/delete/:id', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var products = JSON.parse(data);
for(var i = 0; i <= products.length; i++)
{
if(products[i]['id'] == req.params.id)
{
products.splice(i, 1);
fs.writeFile(PRODUCTS_FILE, JSON.stringify(products, null, 4), function(err) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(products);
});
break;
}
}
});
});
Full API Code
The following is the entire Node.js Server API file where we can see all the methods used by the API.
var fs = require('fs');
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var PRODUCTS_FILE = path.join(__dirname, 'src/assets/js/components/product-data.json');
app.set('port', (process.env.PORT || 3000));
app.use('/', express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
// Additional middleware which will set headers that we need on each request.
app.use(function(req, res, next) {
// Set permissive CORS header - this allows this server to be used only as
// an API server in conjunction with something like webpack-dev-server.
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,PATCH,POST,DELETE');
// Disable caching so we'll always get the latest comments.
res.setHeader('Cache-Control', 'no-cache');
next();
});
<br/>
app.get('/api/products', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(JSON.parse(data));
});
});
<br/>
<br/>
app.get('/api/product/:id', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var json = JSON.parse(data);
for(var i = 0; i &lt;= json.length; i++)
{
if(json[i]['id'] == req.params.id)
{
res.json(json[i]);
break;
}
}
});
});
<br/><br/>
app.post('/api/product/create', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var products = JSON.parse(data);
var newProduct = {
id: Date.now(),
name: req.body.name,
price: req.body.price,
};
products.push(newProduct);
fs.writeFile(PRODUCTS_FILE, JSON.stringify(products, null, 4), function(err) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(products);
});
});
});
<br/><br/>
app.patch('/api/product/edit/:id', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var products = JSON.parse(data);
for(var i = 0; i &lt;= products.length; i++)
{
if(products[i]['id'] == req.params.id)
{
var product = products[i];
product.name = req.body.name;
product.price = req.body.price;
products.splice(i, 1);
products.push(product);
fs.writeFile(PRODUCTS_FILE, JSON.stringify(products, null, 4), function(err) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(products);
});
break;
}
}
});
});
<br/><br/>
app.delete('/api/product/delete/:id', function(req, res) {
fs.readFile(PRODUCTS_FILE, function(err, data) {
if (err) {
console.error(err);
process.exit(1);
}
var products = JSON.parse(data);
for(var i = 0; i &lt;= products.length; i++)
{
if(products[i]['id'] == req.params.id)
{
products.splice(i, 1);
fs.writeFile(PRODUCTS_FILE, JSON.stringify(products, null, 4), function(err) {
if (err) {
console.error(err);
process.exit(1);
}
res.json(products);
});
break;
}
}
});
});
<br/>
app.listen(app.get('port'), function() {
console.log('Server started: http://localhost:' + app.get('port') + '/');
});
To start this server you need to run the following command in your command line.
node server.js
With the server started you can navigate to http://localhost:3000/api/products and you'll see the entire JSON contents of the product file.