Вызов 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
РЕКОМЕНДУЕМЫЕ СТАТЬИ |