Демо -версия API национальной службы парков с Vue.js

В эти выходные я был в дороге, и у меня было некоторое время, чтобы построить (еще одно) приложение с Vue.js. Я не думаю, что это обязательно делает что -то ужасно круто. Минимум это было больше «упражнения» для моих мышц VUE и предоставляет еще одну демонстрацию, которой я могу поделиться с людьми. Как всегда, если у вас есть какие -либо предложения или отзывы в целом, просто дайте мне знать. Если такие сообщения, как эти не Полезно, также бесплатно бесплатно, чтобы поделиться!

Позвольте мне начать с того, что я построил высокий уровень обзора того, что я построил. Я начну с нескольких снимков экрана. На начальной странице показан список всех пятидесяти штатов.

Выбор состояния затем позвонит в API национальных парков API попросить все парки в этом состоянии. Затем я их выявляю:

За кулисами я использую следующие технологии:

• Vue.js конечно.:)
• Vue Router
• Vuex Чтобы справиться с названием моего API и кэширования (я думаю, это несколько интересно).
• Vuetify для пользовательского интерфейса.
• Zeit Для моей без серверной функции.

Прежде чем я копью кода больше, вы можете найти полный репозиторий здесь: https://github.com/cfjedimaster/vue-demos/tree/master/nps_gallery Анкет Вы можете запустить демонстрацию здесь: https://npsgallery.raymondcamden.now.sh/

Хорошо, так что я не собираюсь ничего делиться о первом представлении этой страницы. У меня есть жесткий список из 50 штатов (и сокращений), которые я храню в своем магазине Vuex И я просто заставляю их рендерировать. Единственная часть, которая была здесь интересной, – это то, что я обнаружил правильно обрабатывать значения кодирования URL:

{{state}}

В ссылке выше обратите внимание, что я могу безопасно использовать Государство ценность без беспокойства. Я должен был ожидать этого, но я был рад, что это сработало хорошо.

Это то, где все становится интересным. Во -первых, основной компонент представления, который довольно прост, поскольку моя сложность лежит в другом месте.

Вы можете видеть, что я рендеринг значений, связывая с Парки переменная, которая поступает из моего магазина. Вы заметите, что я звоню две вещи в моем Создано Связано с магазином. Я впервые звоню понятный выбор а затем LoadParks Анкет ClearSelection Удаляет любые ранее загруженные парки из представления и LoadParks Очевидно, выстреливает запрос на загрузку парков. Давайте посмотрим на магазин сейчас, потому что вот где все становится немного глубоко.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import api from './api/nps';

export default new Vuex.Store({
  state: {
    states:{
      "AL": "Alabama",
      // stuff removed here
      "WY": "Wyoming"
    }, 
    parks:{

    },
    selectedParks:[]
  },
  mutations: {
    cache(state, args) {
      console.log('storing cache for '+args.abbr+ ' and '+args.parks.length + ' parks');
      state.parks[args.abbr] = args.parks;
    },
    clearSelection(state) {
      state.selectedParks = [];
    },
    select(state, parks) {
      state.selectedParks = parks
    }
  },
  actions: {
    async loadParks(context, abbr) {
      // check the cache
      if(context.state.parks[abbr]) {
        console.log('woot a cache exists');
        context.commit('select', context.state.parks[abbr]);
      } else {
        console.log('no cache, sad face');
        let results = await api.getParks(abbr);
        context.commit('cache', {abbr:abbr, parks:results});
        context.commit('select', context.state.parks[abbr]);
      }
    }
  }
})

Так что самое большое, что я хочу указать здесь, это то, что я использую магазин, чтобы обернуть вызовы в мой API и в качестве простого кеша. В любое время, когда вы просите парки для штата X, я сначала посмотрю, кэшируется ли он, и если да, – немедленно верните его. В противном случае я звоню в API. Это довольно простая система Но мне нравится, как это вышло, и производительность, это действительно работает.

Часть API на самом деле в два раза. Вы можете увидеть, что я загружаю в './api/nps' , что еще одна обертка:

const NPS_API = '/api/npswrapper';

export default {

    async getParks(state) {
        return new Promise(async (resolve, reject) =>{
          let results = await fetch(NPS_API+`?state=${state}`);
          let parks = await results.json();
          /*
            API returns park.images[], we want to change this to park.image to simplify it
          */
          let parkData = parks.data.map(p => {
            if(p.images && p.images.length > 0) {
                p.image = p.images[0].url;
            }
            return p;
          });
          resolve(parkData);  
        });
    }

}

Все, что это делает, это вызывает мою функцию без сервера. API NPS не поддерживает COR, поэтому мне нужно, чтобы это справилось с этим аспектом. Я также делаю немного фильтрации, чтобы мы вернули изображения. (Хотя это, похоже, не работает – я думаю, что в некоторых парках есть изображения, которые 404.) Последний бит – это функция без сервера:

const fetch = require('node-fetch');

const NPS_KEY = process.env.NPS_KEY;

module.exports = async (req, res) => {

    let state = req.query.state;
    let httpResult = await fetch(`https://developer.nps.gov/api/v1/parks?stateCode=${state}&limit=100&fields=images&api_key=${NPS_KEY}`);
    let results = await httpResult.json();
    res.json(results);

};

Если вы хотите узнать больше о Serverless и Zeit, ознакомьтесь с статья Я написал несколько дней на нем.

В любом случае, это все! Как я всегда говорю, я бы хотел отзыв, так что оставьте мне комментарий ниже.

Фотография заголовка Себастьян Унау на Unsplash

Оригинал: “https://dev.to/raymondcamden/a-national-parks-service-api-demo-with-vue-js-4odn”