Yelp Fusion API в Vue.js

Yelp Fusion API с Vue.js и Bootstrap-Vue

Конечно, у нас есть так много способов найти ресторан, который мы хотим, например Yelp. Вот учебная заметка. Я получил информацию о ресторане с помощью Yelp Fusion API в Vue.js с помощью Axios.

Установка - Axios, Bootstrap-Vue

Как обычно, перед функцией и кодом необходима установка. Чтобы использовать Yelp Fusion API, вам необходимо создать новое приложение в сервисе Yelp Fusion API.

I. Создайте новое приложение

Конечно, чтобы что-то делать с помощью yelp, вы должны зарегистрировать учетную запись yelp, затем вы можете перейти на страницу Yelp Fusion API, нажать начать и ввести свою информацию.

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

II. Установите Bootstrap-Vue и Axios

Затем мы можем использовать команду npm в терминале для установки Bootstrap и Yelp в наш Vue-проект. Кроме того, вы также можете использовать CDN в общей папке Vue.

npm install vue bootstrap-vue bootstrap  // bootstrap-vue v2.9.0 now
npm i axios // axios

и добавьте некоторый код в main.js для импорта функций и элементов Bootstrap-Vue (CSS и компонентов), после чего мы можем перейти к получению информации о ресторане из Yelp.

// import css and plugin
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Установите Yelp API с помощью Axios

import axios from "axios"

После импорта элемента Axios мы можем использовать его для вызова Yelp Fusion API для получения данных о ресторанах. Здесь я буду искать рестораны в центре Сан-Франциско (широта: 37,773972, долгота: -122,431297). Чтобы завершить эту задачу, мы можем проверить некоторые нужные нам конечные точки, предлагаемые Yelp Fusion.

term:restaurant
// the search keyword, type is "string", here we use "restaurant"
latitude:37.773972
longitude:-122.431297
// the centrol point of San Francisco, you can also use "location" to search by address, type is "number"
radius:500
// set the search range, type is number, unit is meter from the location or (latitude,longitude)
limit:40
// set how many search results you want, type is number

Здесь мы ищем ресторан только по указанным выше конечным точкам, если вы хотите выполнить поиск более подробно, вы можете проверить список конечных точек здесь: https://www.yelp.com/developers/documentation/v3/business_search

Yelp Fusion API — бизнес-поиск и Axios GET-запрос

Чтобы избежать проблемы с Cor, здесь мы используем cors-anywhere и устанавливаем заголовок в функции Axios GET, а также добавляем любой текст и число, которые вы хотите, с конечными точками. Затем мы можем напечатать ответ в нашей консоли, чтобы протестировать функцию, и, конечно же, вы должны установить методы в Vue-компоненте, а затем где-то вызвать функцию.

Печать и сортировка данных с помощью таблицы Bootstrap-Vue

Хорошо, теперь у нас есть все, что нам нужно, теперь мы можем поместить данные в b-таблицу и распечатать список ресторанов, которые мы хотим, в таблицу.

I. Установите функцию поиска и диапазона

С помощью Bootstrap-Vue мы можем очень быстро установить диапазон и панель поиска, а также мы должны поместить данные и установить v-модель, чтобы получить текст и диапазон, которые мы хотели бы найти.

Затем мы можем закончить нашу функцию поиска, мы можем поместить searchText и searchRange в функцию grabInfo(), которую мы сделали.

II. Сервируйте столик в ресторане с помощью b-table

Чтобы отобразить результаты поиска, мы можем легко установить b-table, а v-if & v-else может помочь нам убедиться, что результаты поиска ресторана т пустой.

<b-table
    striped
    fluid
    hover
    :items="restaurantList" // use restaurantList do the loop
    v-if="restaurantList.length > 0" // restaurantList has result
   >
</b-talbe>
<div v-else>
    There's no any restaurant in list now.
</div>

Затем вы обнаружите, что в вашем браузере отображается беспорядочная большая таблица, чтобы классифицировать и уточнить информацию, мы должны сделать некоторую редакцию с ‹template v-slot›, установить заголовок таблицы с полями, и выполните динамическую сортировку в таблице

// use template to replace the part of the table
<template v-slot:cell(column_name)="data">
    // content you want to replace
</template>
// in fields array, the "key" will show in table head, and sortable function will open through the true setting
{ key:'show_name',sortable:true || false }

III. Поиск ресторана по Yelp API

Здесь у нас есть базовый, но функциональный компонент для поиска и сортировки ресторана по данным Yelp, о других компонентах Bootstrap-Vue вы можете нажать здесь, чтобы проверить это.

Обзор

Эта статья является примечанием для записи моего самостоятельного изучения Yelp Fusion API в Vue.js, я изучаю Vue.js со многими другими API, чтобы решать некоторые проблемы, с которыми я столкнулся, или что-то, что меня интересует. Если у вас есть какие-либо вопросы или комментарии Добро пожаловать, чтобы оставить сообщения для меня!