Мы собираемся создать приложение, в котором мы сможем искать фильмы. Здесь мы собираемся использовать Vue.js, база данных фильмов (TMDB) и Axios Анкет

Начиная

Запустите свой терминал и введите следующее:

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
$ npm install axios

Это создаст новое приложение Vue и установить Axios. WebPack начнет обслуживание вашего проекта на порту 8080 .

Давайте убрать!

Откройте свой проект в своем любимом текстовом редакторе. Open /src/app.vue и удалить компонент и тег в строке 3 и 4.

Теперь давайте сделаем наш собственный компонент в /src/компоненты Папка и давайте назовем это Search.vue Анкет

Внутри Search.vue компонент, вставьте следующий код:

Это начальный шаблон для нашего компонента. Давайте снова вернемся к /src/app.js и добавить наш недавно созданный компонент. Вы можете скопировать и вставить следующий блок кода:

Теперь вы должны увидеть что -то похожее на это:

Давайте послушаем вход

Теперь у нас это есть, мы можем двигаться дальше и добавить еще немного кода. Мы собираемся создать приложение для поиска фильма, поэтому нам нужен элемент ввода для поиска.

Давайте добавим элемент ввода под нашим

На каждом ключе мы будем запустить getResult функция Итак, давайте заявим об этом в нашем сценарии. Скопируйте следующий код и замените его на свой <Скрипт> ярлык:

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

HTTP -запросы с использованием Axios

Теперь давайте изменим наше GetResult Метод, чтобы мы могли выполнить HTTP -запросы (замените хэштеги вашим собственным ключом API tmdb ):

Это выполнит запросы на получение GET и передаст результаты в наш массив результатов. Теперь мы можем увидеть результаты наших запросов на получение запросов на консоли, но все же не на нашей странице. Давайте сделаем это сейчас!

Показывая результаты

Мы собираемся рассказать о наших результатах и распечатать результаты на нашей странице. Нам нужен дифта, где мы можем использовать директиву V-For и предоставить наши результаты. Внутри этого мы можем разместить

Поздравляю, ты сделал это! 👏👏👏

Оригинал: “https://dev.to/mustafaturk/using-the-movie-database-tmdb-with-vue-js-and-axios-1dn8”