En este artículo, conoceremos la llamada a la API REST para obtener los detalles de la ubicación en VueJS, además de comprender su implementación a través de los ejemplos.
VueJS es uno de los mejores marcos para JavaScript como ReactJS. El VueJS se utiliza para diseñar la capa de interfaz de usuario, es fácil de aprender para cualquier desarrollador. También es compatible con otras bibliotecas y extensiones. Si desea crear una aplicación de una sola página, en mi opinión, VueJS es la primera opción. En el campo del desarrollo, puede haber tantos problemas que no se pueden resolver con una sola biblioteca, por lo que VueJS es compatible con otras bibliotecas, por lo que puede hacerlo fácilmente. VueJS es compatible con todos los navegadores populares como Chrome, Firefox, IE, Safari, etc. Puede comparar fácilmente esta biblioteca con sus bibliotecas favoritas.
REST significa Transferencia de estado representacional. REST es un estilo arquitectónico para crear sitios web utilizando el protocolo HTTP. Existen ciertas restricciones arquitectónicas que los desarrolladores deben seguir al crear sitios web o API. Una API REST también se denomina API RESTful , es una interfaz de programación de aplicaciones que se adhiere a las restricciones del estilo arquitectónico REST y permite la interacción con los servicios web RESTful. Las redes interconectadas conforman la web. Un servicio web es un conjunto de protocolos y estándares abiertos que se utilizan para intercambiar datos entre aplicaciones cliente-servidor. Los servicios web que siguen la arquitectura REST se conocen como servicios web RESTful. La llamada API RESTes una solicitud de llamada realizada por el cliente o los usuarios al servidor, con el fin de recibir de vuelta los datos a través del protocolo HTTP. La API (Interfaz de programación de aplicaciones) es un conjunto de comandos, funciones o protocolos que actúan como un intermediario que permite que dos aplicaciones se comuniquen. La API de Google Map se puede utilizar para obtener los detalles de la ubicación, es decir, facilitan al usuario obtener su ubicación para las aplicaciones web, según los requisitos. La API interactúa y proporciona la respuesta principalmente en formatos JSON o XML. La notación de objetos Java Script (JSON) es un formato de archivo estándar abierto y un formato de intercambio de datos.
Pasos para configurar el marco Vue JS con los paquetes necesarios:
Aquí, clonaremos o descargaremos la aplicación desde un repositorio de GitHub ya creado. Todas estas instalaciones y clonaciones o descargas se realizarán en la misma carpeta o en el mismo directorio de trabajo. Consulte el artículo de Vue.js para crear un nuevo proyecto en detalle.
Paso 1: Debemos tener instalado npm en el sistema local. Clonó o descargó el proyecto, una vez que esté hecho, vaya a la ubicación del proyecto donde está presente package.json y necesita dar el siguiente comando
npm install
Para verificar que npm esté instalado o no, ejecute el siguiente comando:
npm -v
Paso 2: Descargue Node JS del sitio web oficial. Para verificar si el Node está correctamente instalado o no, ejecute el siguiente comando:
node -v
Paso 3: Instale el paquete de Nodes Vue Cli globalmente usando el siguiente comando:
npm install -g @vue/cli
Paso 4: clonación y ejecución de la aplicación
Después de instalar npm y todos los demás paquetes relacionados, coloque la carpeta del código fuente en el directorio de trabajo actual o en el mismo. Una vez hecho esto, podemos ver que node_modules estará disponible en el directorio del proyecto. Ahora, ejecute el siguiente comando para ejecutar la aplicación.
npm run serve
La aplicación se ejecuta y aloja en localhost:8080.
Estructura del proyecto: después de una instalación exitosa, la estructura del proyecto se mostrará como la siguiente imagen:
Llamada API REST que se usa:
Usaremos este enlace de llamada API REST https://api.zippopotam.us/in/600028 ib nuestro proyecto.
Aquí, 600028 es el valor del código postal para el que se recuperan los datos, pero dentro del código, el usuario puede ingresar el código postal y obtener detalles.
Salida JSON:
Ejemplo: este ejemplo ilustra cómo obtener los detalles de la ubicación a través de la llamada API REST utilizando VueJS.
Esto está en el directorio raíz.
paquete.json:
Javascript
{
"name": "RestAPIInvocation",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
},
"dependencies": {
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"gh-pages": "^1.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-rc.10",
"@vue/cli-plugin-eslint": "^3.0.0-rc.10",
"@vue/cli-plugin-unit-mocha": "^3.0.0-rc.10",
"@vue/cli-service": "^3.0.0-rc.10",
"@vue/test-utils": "^1.0.0-beta.20",
"chai": "^4.1.2",
"vue-template-compiler": "^2.5.16"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": ["plugin:vue/essential", "eslint:recommended"],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
.centeralign {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
router.js: archivo Main.js para informar dónde buscar el archivo de vista y obtener los detalles.
router.js
import Vue from "vue";
import Router from "vue-router";
import detailsByZipCode from "./views/detailsByZipCode.vue";
import getExchangeRates from "./views/getExchangeRates.vue";
Vue.use(Router);
const router = new Router({
routes: [
{
path: "/",
redirect: "/detailsByZipCode",
},
{
path: "/detailsByZipCode",
name: "detailsByZipCode",
component: detailsByZipCode,
},
{
path: "/getExchangeRates",
name: "getExchangeRates",
component: getExchangeRates,
},
],
});
export default router;
detailsByZipCode.vue
<template>
<div class="home">
<div class="vue-logo-back">
<img src="../assets/logo.png"
width="100px"
height="100px" />
</div>
<div class="col-md-6 centeralign">
<p>
This Page Displays Country details
by Zip Code. Example : 600 028
</p>
<input type="text"
v-model="input.zipcode"
placeholder="Zip Code" />
<button v-on:click="getLocationDetails()">
Get Location Details
</button>
<div class="card-body">
<h5 class="card-title">
{{countrydetails["post code"]}}
</h5>
<p class="card-text">
Zip Code : {{countrydetails["post code"]}}
</p>
<p class="card-text">
Country : {{countrydetails.country}}
</p>
<p class="card-text">
Country Short Form : {{countrydetails["country abbreviation"]}}
</p>
<ul>
<li v-for="place in countrydetails.places" :key="place.longitude">
<p class="card-text">
Place Name : {{place["place name"]}}
</p>
<p class="card-text">
Longitude : {{place["longitude"]}}
</p>
<p class="card-text">
Latitude : {{place["latitude"]}}
</p>
<p class="card-text">
State : {{place["state"]}}
</p>
<p class="card-text">
State Short Form : {{place["state abbreviation"]}}
</p>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'countrydetails',
// Fetch the call for default Zip code
mounted(){
axios.get(`https://api.zippopotam.us/in/600028`)
.then(response => {
this.zipcode = response.data.origin;
this.countrydetails = response.data;
}).catch(error => {
})
},
data() {
return {
input: {
zipcode: ""
},
countrydetails: {}
}
},
methods: {
// According to the given zipcode, the fetch is happening
getLocationDetails() {
axios.get(`https://api.zippopotam.us/in/`+this.input.zipcode)
.then(function(response) {
this.countrydetails = response.data;
}.bind(this)).catch(error => {
})
}
}
}
</script>
<style scoped>
.addmargin {
margin-top: 10px;
margin-bottom: 10px;
}
.vue-logo-back {
background-color: black;
}
</style>
En la carpeta «pública», debemos colocar las imágenes requeridas, index.html.
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>india.png"> <title> Finding Area Details By ZipCode </title> </head> <body> <noscript> <strong> We're sorry but simple-vue-app doesn't work properly without JavaScript enabled. Please enable it to continue. </strong> </noscript> <div id="app"></div> </body> </html>
Producción:
En el ejemplo del código, el código postal está codificado durante la carga, pero los usuarios pueden ingresar el código postal y obtener detalles de ubicación para otros códigos postales también. En caso de que sea necesario desarrollar varias llamadas a la API Rest, «router.js» debe tener los detalles necesarios. Agregue los archivos de vista necesarios y, en ese momento, se debe realizar la llamada API Rest adecuada y luego iterar la respuesta JSON.
Algunas otras API REST:
- https://api.exchangerate-api.com/v4/latest/INR -> Proporciona los tipos de cambio de otras monedas en USD, GBP, etc.,
- https://api.coinbase.com/v2/currencies -> Código de moneda y nombres
Enlace de GitHub : https://github.com/raj123raj/RestAPIInvocation.git
Publicación traducida automáticamente
Artículo escrito por priyarajtt y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA