Stel, we zijn een front-end aan het bouwen. We willen data waar we mee kunnen werken, maar onze backend is nog niet zo ver, en toch willen we met een API kunnen werken. Dan kunnen we in node een mock server inrichten. In deze post leg ik uit hoe.
De requirements
Voor de API die ik wil bouwen wil ik het volgende:
- Op basis van een statisch json bestand een lijst met users op kunnen vragen (bijv http://localhost:9999/users)
- Uit dat zelfde json bestand een specifieke user op basis van ID op kunnen vragen (bijv http://localhost:9999/users/1)
- Assets (in mijn geval afbeeldingen) in kunnen laden per user (bijv http://localhost:9999/images/user1.png)
De meerwaarde
Wanneer we onze data als objecten wegschrijven in onze componenten dan zullen we al die componenten moeten omschrijven. Dit is een hoop onnodig werk. Met een mock API kunnen we de API service die we hebben geschreven voor onze frontend blijven gebruiken. We moeten alleen een referentie naar een API wijzigen.
Idealiter wil je dat je frontend op dezelfde manier functioneert, en dat je met minimale wijzigingen kan switchen tussen een mock API en een (cloud) API
Oplossing in node
Met node kunnen we prima een mock server opzetten. We maken bijvoorbeeld in ons project een server.js aan:
// Express is een node.js framework dat zich prima leent voor dit soort doeleinden.
var express = require('express');
var app = express();
/* Cors zorgt ervoor dat deze API ook vanaf andere locaties te benaderen is.
Concreet: Het zorgt ervoor dat mijn fronted (localhost:8000)
en mijn backend (localhost:3000) goed samen kunnen werken. */
let cors = require('cors');
app.use(cors());
// Ik stel een json object samen voor mijn users
let users = require('./data/users.json');
// En ik haal deze users op
app.get('/users', function (req, res) {
res.json(users);
});
// Hier haal ik een detail van mijn users op.
app.get('/users/:id', function (req, res) {
res.json(users.filter(user => user.id == req.params.id)[0]);
return;
})
// Tot slot trap ik mijn API aan
app.listen(3000, function () {
console.log('Listening on http://localhost:3000/');
});Met het bovenstaande voorbeeld heb ik de eerste twee requirements afgetikt. Deze server start ik op door simpelweg node server/index.js te runnen in mijn terminal. En dan kan ik naar localhost:8080/users gaan om al mijn users te bekijken. Als mijn users een id property hebben kan ik ze ook individueel benaderen door naar localhost:8080/users/:id te gaan. Express en cors zijn wel dependencies, dus zorg ervoor dat je die toevoegt aan je node project.
En dan rest ons nog één taak: Assets benaderbaar hebben in de app. Ik voeg deze code aan server.js toe:
var path = require('path');
/* Hier refereer ik naar een images directory,
waar ik mijn afbeeldingen kan plaatsen. */
var dir = path.join(__dirname, 'images');
// Vervolgens 'gebruik' ik deze directory met 'express.static'
app.use(express.static(dir));En klaar. Als ik nu een afbeelding foo.png heb in mijn images directory en ik ga naar localhost:3000/foo.png dan laad ik die afbeelding in. De images folder refereert dus naar de root van mijn server. Mocht je dit onlogisch vinden, dan kun je een extra laag aanmaken in je images folder.
Om het geheel te demonstreren heb ik een vue app aangemaakt met deze mock api als backend. Deze is te bewonderen op https://github.com/martman85/mockapi.
Wow! Thank you! I continually wanted to write on my website something like that. Can I implement a portion of your post to my website?
Rattling wonderful info can be found on website. “Life without a friend is death without a witness.” by Eugene Benge.