Вызов REST API для получения сведений о местоположении в Vue.js

Опубликовано: 11 Августа, 2022

В этой статье мы узнаем о вызове REST API для получения сведений о местоположении в VueJS, а также понимаем его реализацию на примерах.

VueJS — один из лучших фреймворков для JavaScript, такой как ReactJS. VueJS используется для разработки слоя пользовательского интерфейса, его легко подобрать любому разработчику. Он также совместим с другими библиотеками и расширениями. Если вы хотите создать одностраничное приложение, то, на мой взгляд, VueJS — лучший выбор. В области разработки может быть так много проблем, которые нельзя решить с помощью одной библиотеки, поэтому VueJS совместим с другими библиотеками, поэтому вы можете легко использовать его. VueJS поддерживается всеми популярными браузерами, такими как Chrome, Firefox, IE, Safari и т. д. Вы можете легко сравнить эту библиотеку с вашими любимыми библиотеками.

REST означает передачу репрезентативного состояния. REST — это архитектурный стиль для создания веб-сайтов с использованием протокола HTTP. Существуют определенные архитектурные ограничения, которым должны следовать разработчики при создании веб-сайтов или API. REST API , также называемый RESTful API , представляет собой интерфейс прикладного программирования, который придерживается ограничений архитектурного стиля REST и обеспечивает взаимодействие с веб-службами RESTful. Взаимосвязанные сети составляют сеть. Веб-сервис — это набор открытых протоколов и стандартов, используемых для обмена данными между клиент-серверными приложениями. Веб-службы, которые следуют архитектуре REST, известны как веб-службы RESTful. Вызов REST API — это запрос вызова, сделанный клиентом или пользователями на сервер, чтобы получить обратно данные по протоколу HTTP. API (интерфейс прикладного программирования) — это набор команд, функций или протоколов, которые действуют как посредник, позволяющий двум приложениям взаимодействовать. API Google Map можно использовать для получения сведений о местоположении, т. е. они помогают пользователю получить свое местоположение в веб-приложениях в зависимости от требований. API взаимодействует и предоставляет ответ в основном в форматах JSON или XML. Нотация объектов Java Script (JSON) — это открытый стандартный формат файлов и формат обмена данными.

Шаги по настройке платформы Vue JS с необходимыми пакетами:

Здесь мы клонируем или загружаем приложение из уже созданного репозитория GitHub. Все эти установки, клонирование или загрузка будут выполняться в одной и той же папке или в одном рабочем каталоге. Подробные сведения о создании нового проекта см. в статье Vue.js.

Шаг 1: Мы должны установить npm в локальной системе. Клонированный или загруженный проект, как только это будет сделано, перейдите в расположение проекта, где присутствует package.json, и вам нужно дать следующую команду

npm install

Чтобы проверить, установлен ли npm, выполните следующую команду:

npm -v

Шаг 2: Загрузите Node JS с официального сайта. Чтобы проверить, правильно ли установлен узел, выполните следующую команду:

node -v 

Шаг 3. Установите пакет узла Vue Cli глобально, используя следующую команду:

npm install -g @vue/cli

Шаг 4: Клонирование и запуск приложения

После установки npm и всех других связанных пакетов поместите папку с исходным кодом в текущий или тот же рабочий каталог. Как только это будет сделано, мы увидим, что node_modules будут доступны в каталоге проекта. Теперь выполните следующую команду, чтобы запустить приложение.

npm run serve

Приложение запускается и размещается на локальном хосте: 8080.

Структура проекта: После успешной установки структура проекта будет отображаться следующим образом:

Использование вызова REST API:

Мы будем использовать эту ссылку вызова REST API https://api.zippopotam.us/in/600028. наш проект.

Здесь 600028 — это значение почтового индекса, для которого извлекаются данные, но внутри кода пользователь может ввести почтовый индекс и получить подробную информацию.

Вывод JSON:

Пример: этот пример иллюстрирует получение сведений о местоположении через вызов REST API с использованием VueJS.

Это в корневом каталоге

пакет.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: файл Main.js, чтобы сообщить, где искать файл представления и получить подробную информацию.

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>

Под «общедоступной» папкой нам нужно поместить необходимые изображения, 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