В этой статье мы будем создавать блог с помощью React.Js, Strapi и Strapi SDK.
При создании полного блога в виде одностраничного приложения на ум приходят следующие вопросы:
- Как управлять содержимым на бэкэнде, не работая при этом разработчиком?
- Как создать API для блога и управлять им?
Хорошая новость заключается в том, что существует автономная CMS под названием Strapi, которую мы можем использовать для управления содержимым и разработки API.
Страпи
Strapi - это самая продвинутая платформа управления контентом с открытым исходным кодом для создания мощного API без каких-либо усилий, построенных на Nodejs. Он поставляется с интерфейсом администратора, позволяющим создавать контент.
Думайте об управлении контентом в Strapi как о серверной части Wordpress с интерфейсом, в котором вы можете создавать, редактировать и удалять контент.
Reactjs
React.js - это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательских интерфейсов специально для одностраничных приложений.
Мы будем использовать его для создания интерфейса блога.
Strapi SDK
Strapi SDK интегрирован в Strapi, чтобы заменить использование библиотеки XHR (например, Axios).
Итак, приступим!
Настройка
Настройка Strapi API
Для настройки Strapi у вас должно быть установлено следующее:
- Nodejs (версия 9 и выше)
- MongoDB, MySQL или PostgreSQL
Мы будем устанавливать Strapi с npm глобально в командной строке:
npm i strapi@alpha -g
Strapi установлен по всему миру. Теперь у нас есть доступ к команде `strapi`.
Если у вас есть ошибка прав доступа, вы можете следовать официальному руководству по npm или запустить его с правами суперпользователя, который запросит пароль суперпользователя. См. Команду ниже:
sudo npm install strapi@alpha -g
Чтобы проверить, установлен ли Strapi, скопируйте и вставьте приведенную ниже команду в командную строку:
strapi -v
Это должно вывести что-то вроде 3.0.0-alpha.x.x.x.
Если ваш вывод аналогичен приведенному выше, вы успешно установили Strapi. Поздравляю!
Создайте проект Strapi
В командной строке следуйте приведенным ниже инструкциям.
strapi new blog-api
Это создаст папку blog-api и загрузит в нее новый проект Strapi. Перейдите в каталог в созданную папку, которая называется blog-api:
cd blog-api
Затем запустите сервер:
strapi start
Приведенная выше команда запустит проект Strapi, и вы сможете увидеть его, набрав http: // localhost: 1337 в адресной строке браузера.
Если вы зайдете на http: // localhost: 1337 / admin, вы будете готовы создать первого пользователя, который будет управлять Strapi, то есть ADMIN.
Создание первого пользователя
Создайте тип контента
Чтобы создавать сообщения в блоге на бэкэнде с помощью Strapi CMS, нам нужен тип контента для создания контента для нашего блога и для генерации API.
В меню «Плагины» нажмите «Тип контента».
Создайте тип контента под названием Сообщение в блоге с тремя полями:
- заголовок (строка типа)
- контент (введите текст, отметьте «Отображать как WYSIWYG» на вкладке «Дополнительные настройки»)
- автор (отношение типа, много статей к одному пользователю: «Сообщение в блоге принадлежит одному пользователю и принадлежит ему»)
Затем нажмите кнопку «Сохранить».
Создание сообщения в блоге
Мы будем вставлять контент в базу данных, используя тип контента Blog Post, который мы создали выше.
- Посетите страницу сообщения в блоге (которая находится в верхнем левом углу экрана)
- Нажмите «Добавить новую запись в блог».
- Введите значения в поля "Название", "Автор" и "Содержание".
- Нажмите "Сохранить"
Создайте еще три сообщения в блоге.
Контроль доступа
По соображениям безопасности доступ к API по умолчанию ограничен. Чтобы разрешить доступ, перейдите в раздел «Роль и разрешения» в разделе «Плагины». Нажмите Общедоступно. В разделе "Общедоступные" найдите раздел "Разрешения". В разделе «Разрешение» нажмите «Приложение» и выберите найти под сообщением в блоге - и сохраните.
На этом этапе вы должны иметь возможность запросить список сообщений в блоге.
Доступ автора к API также ограничен. Разрешите анонимный доступ, выбрав действие find (в разделе «Пользователи и разрешения»), и сохраните форму.
Если вы посетите http: // localhost: 1337 / blogpost в своем браузере, вы увидите список сообщений в блоге. Итак, мы успешно создали наш API, чтобы читать его в нашем блоге.
Перейдем к фронтендной части.
Настройка React
Мы будем использовать create-react-app для начальной загрузки нашего приложения для блога React.
Установка приложения Create React
В командной строке введите следующее:
npx create-react-app
(npx поставляется с npm 5.2+ и выше)
Это загрузит настройку реакции в папку блога
Измените каталог на каталог блога
cd blog
Запустите приложение с помощью:
npm start
Это запустит приложение реакции. Если вы зайдете на http: // localhost: 3000, вы увидите, что приложение работает в вашем браузере.
Наша реакция на настройку завершена, теперь нам нужно установить strapi sdk. Для этого выполните следующую команду:
npm install strapi-sdk-javascript
После успешной установки откройте папку проекта в любом редакторе. (Я использую Atom). После загрузки проекта в IDE откройте файл App.js, удалите все содержимое. Скопируйте и вставьте следующий код в файл App.js.
import React from ‘react’; import Strapi from ‘strapi-sdk-javascript/build/main’; const strapi = new Strapi(‘http://localhost:1337'); class App extends React.Component { constructor() { super(props); state = { posts: [] } } async componentDidMount() { try { const posts = await strapi.getEntries(‘blogpost’) this.setState({ posts }); } catch(err) { alert(err); } } render() { return ( <section> {this.state.posts.map(post => { <article> <div>Title: {post.title}</div> <div>Content: {post.content}</div></article> })} </section> ) } } export default App;
мы импортируем Strapi из "strapi-sdk-javascript / main / build"
В строке 4 у нас есть экземпляр нашего API, и для переменной установлено значение strapi.
Вы также заметили, что в componentDidMount мы добавили async / await для получения записей блога и установки нового состояния.
Вы могли убедиться, насколько легко Strapi легко настроить и использовать с помощью Strapi SDK. Подробнее о Strapi SDK можно прочитать здесь и здесь.
Заключение
Настроить Strapi с помощью React.js намного проще, чем вы думаете. В следующей статье мы рассмотрим аутентификацию с помощью React.Js.