Вызов REST API для получения сведений о местоположении в Vue.js
В этой статье мы узнаем о вызове 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
РЕКОМЕНДУЕМЫЕ СТАТЬИ |