Frontend State Management with Vue and Vuex : Building the API for Weather and Currencies with API Server with Express JS

Building the API for Weather and Currencies with API Server with Express JS

As described earlier, on our home page, we want to show our visitors some weather and currency / foreign exchange data. We will build the mock API using faker in this section. 

Weather API 

const express = require("express");
const router = express.Router();
const faker = require("faker");

function generateWeatherData(city) {
  return {
    coord: { lon: faker.random.number(180), lat: faker.random.number(180) 	},
    temp: faker.random.number({ min: 273, max: 315 }),
    feels_like: faker.random.number(45),
    temp_min: faker.random.number(273),
    temp_max: faker.random.number(300),
    pressure: faker.random.number(100),
    humidity: faker.random.number(100),
    name: city || faker.address.city(),
  };
}

router.get("/:city", function (req, res, next) {
  res.json(generateWeatherData(req.params.city));
});

module.exports = router;

The currency API

const express = require("express");
const router = express.Router();
const faker = require("faker");


function generateExchangeRateData() {
	return [
	{
		currency: "EURO",
		value: faker.random.number(300),
	},
	{
		currency: "YEN",
		value: faker.random.number(300),
	},
	{
		currency: "DOLLAR",
		value: faker.random.number(300),
	},
	];
}


router.get("/", function (req, res, next) {
	res.json(generateExchangeRateData());
});

module.exports = router;

Import the files into the app.js and hook them up to the router.

const weatherRouter = require("./routes/weather");
const currencyRouter = require("./routes/currency");

 Mapping to the routes

app.use("/api/weather/:city", weatherRouter);
app.use("/api/currency/:local", currencyRouter);

course logo
Frontend State Management with Vue and Vuex
Number of sections:
15
Content length:
Delivery formats:

Instructor

F Yeboah
I am a Software / UI developer with interests in Search Intensive applications, Information Architectures(IA), UX/UI, FRP, and Reusable Frontend Components Design.... Show more