Ваше полное руководство по Vue и WordPress - часть 1
Vue и WordPress - легко загружайте сообщения блога с вашего сайта WordPress
Как получить сообщения блога с сайта WordPress в приложении Vue.Js с помощью WordPress Rest API и Axios
В настоящее время я работаю над внештатным проектом, который включает получение сообщений с сайта WordPress и их отображение на настраиваемой панели инструментов и в приложениях для Android и iOS. Пока это был интересный проект, и я подумал, что поделюсь своим опытом работы с WordPress REST API и Vue. Я скоро опубликую еще одну статью о мобильных приложениях! Я также расскажу, как создавать новые сообщения из приложения Vue, в отдельной статье.
Как получить сообщения с помощью WordPress Rest API
Для чтения данных с сайта WordPress мы будем использовать API, уже встроенный в сайт WordPress. WordPress REST API предоставляет интерфейс для приложений, которые могут взаимодействовать с вашим сайтом WordPress, отправляя и получая данные в виде объектов JSON (нотация объектов JavaScript). Чтобы успешно использовать этот API, нужно знать несколько вещей.
Где мои конечные точки API? Y
Чтобы увидеть полный список конечных точек для WordPress REST API, перейдите по ссылке ниже.
Справочник по конечной точке разработчика REST API
Чтобы прочитать данные с вашего сайта WordPress, вы должны знать, где их запросить. Чтобы получать сообщения с вашего сайта WordPress, вы должны использовать следующую конечную точку.
YourWebSite / wp-json / wp / v2 / posts
В этой статье мы будем использовать образец сайта из документации WordPress Rest API.
Чтобы получать сообщения с сайта, ссылка на который указана выше, ваша конечная точка будет выглядеть, как в примере ниже:
Https://demo.wp-api.org/wp-json/wp/v2/posts
Вышеупомянутая конечная точка возвращает объект JSON, представляющий сообщения с демонстрационного сайта WordPress. Если вы нажмете на ссылку, вы увидите необработанные данные. Чтобы что-то сделать с этими данными в приложении Vue, мы должны решить, как мы хотим использовать WordPress REST API.
Аксиос спешит на помощь!
Axios - это HTTP-клиент для браузера и node.js. Я связал репозиторий Github ниже.
С помощью Axios я могу отправлять запросы GET и POST к конечным точкам API WordPress моего веб-сайта. Ниже приведен краткий пример всего кода, который потребуется для получения сообщений с сайта WordPress.
// Wordpress Posts Endpoint postsUrl: “https://demo.wp-api.org/wp-json/wp/v2/posts", // Returned Posts in an Array posts: [], queryOptions: { per_page: 3, // Only retrieve the 3 most recent blog posts. page: 1, // Current page of the collection. _embed: true, //Response should include embedded resources. }, // Get Recent Posts From WordPress Site getRecentBlogPosts() { axios .get(this.postsUrl, { params: this.queryOptions}) .then(response => { this.posts= response.data; }) .catch(error => { console.log(error); }); },
Теперь, когда мы знаем, каковы наши конечные точки WordPress API и как мы можем отправлять им запросы. Давайте создадим простое приложение Vue, которое может получать данные с сайта WordPress.
Создать новый проект
Давайте начнем с создания нового приложения Vue. Если вы никогда раньше не создавали приложение Vue, я настоятельно рекомендую эту статью с инструкциями по настройке среды разработки. Я буду использовать бесплатную среду IDE под названием Visual Studio Code.
В моем терминале я наберу следующее, чтобы создать каталог с именем VuePress для моего проекта. Следует отметить, что я использую операционную систему Windows.
mkdir VuePress
Теперь, когда каталог моего проекта создан, я перейду в него и создам приложение Vue, используя следующие команды:
cd VuePress vue create vuepress
Убедитесь, что вы используете все строчные буквы для каталога вашего приложения.
В настоящее время я использую Vue CLI v4.4.6 для создания своих приложений Vue. После выполнения команды vue create я получаю следующее приглашение. Я выбираю стандартное приложение и нажимаю клавишу Enter.
После создания моего приложения Vue я перехожу в каталог приложения и набираю команду, чтобы открыть свою IDE в том же каталоге.
cd vuepress code .
Теперь я могу открыть терминал в Visual Studio Code и запустить приложение Vue, набрав команду ниже:
npm run serve
Если все пойдет хорошо, вы должны увидеть следующий ответ. Ваш локальный сетевой адрес может отличаться от моего.
Если я открою свой веб-браузер и перейду к локальному или сетевому адресу, я увижу свое недавно созданное приложение Vue.
Единственное, чего нам не хватает, это Axios. Сначала я убеждаюсь, что нахожусь в каталоге своего приложения, а затем запускаю следующую команду, чтобы установить Axios для моего проекта.
npm install axios
Я также добавил еще один пакет под названием Moment, чтобы сделать дату публикации публикации более красивой.
npm install moment
Наконец-то мы готовы к работе с WordPress Rest API!
Чтобы мы могли сосредоточиться исключительно на работе с API, я перейду в общедоступный каталог и добавлю Material CSS framework в файл index.html в моем проекте, указав ссылку CDN.
Теперь я открою свой файл App.vue и напишу код, необходимый для получения сообщений через WordPress API.
Раздел шаблона
Во-первых, в моем разделе шаблона есть карточка материала, которая будет содержать данные публикации.
// Line 4: For each post in posts, create a Material Card. // Line 7-10: If the post has a featured image, set the image source to it. // Line 11: Display the post title. // Line 13: Display the post excerpt. // Line 15: Display the post title. // Line 17: Custom method that formats the post's published date and displays it.
Раздел сценария
Раздел скрипта моего приложения выглядит так:
В строках 27–28 я импортирую Axios и Moment. Строка 33 указывает на конечную точку API сообщений демонстрационного сайта WordPress. В строках 34–38 я настраиваю параметры запроса. В этом случае мне нужны 6 последних сообщений в блоге.
Мои два единственных метода - это getRecentMessages () и getPostDate ().
getRecentMessages ()
Этот метод использует Axios для выполнения HTTP-запроса к конечной точке WordPress API для сообщений. Раздел .get требует URL-адреса и объекта для параметров. В разделе .then мы обрабатываем любой ответ, который можем получить. В разделе .catch фиксируются все возможные ошибки.
getPostDate ()
Этот метод является вспомогательным методом для переформатирования даты, которую мы получаем в наших данных сообщения.
Без форматирования: 2020–01–05T20: 46: 15
С форматированием: 5 янв.2020 г., 21:39
Параметры форматирования можно найти на домашней странице Moment.
Раздел стиля
Раздел стиля содержит минимальные стили. Единственный добавленный мной код обеспечивает некоторое отступление вокруг содержимого.
Со всем приведенным выше кодом мы теперь можем получать сообщения в блогах с помощью WordPress Rest API! Если вы используете мой код, вы должны увидеть что-то вроде скриншота ниже.
Спасибо за уделенное время! Сообщите мне свои мысли в разделе комментариев. В ближайшем будущем я опубликую еще одну статью, в которой будет показано, как мы можем создавать сообщения через WordPress API. Удачного кодирования!
