Ho Lee Fuk

Сенсей
🛡 МОДЕРАТОР 🛡
Регистрация
22 Февраль 2018
Сообщения
11.084
Автор: Исламов

Название: Админка на Vue.js + php (2019)

upload_2020-6-23_21-57-15-png.66187


Описание:

Попрактикуетесь в PHP и Vue.js и напишете свою админку для лендингов, которую можно продавать заказчикам.

Модуль 1. Подготовка к работе.

Важно изучить этот модуль, чтобы понимать, какие виды админ-панелей существуют и почему нужно сделать свою: сколько денег это принесет и какие преимущества перед другими админками это даст.

Урок 1. Введение.

- Зачем лендингу нужна админка.
- Обзор популярных админок для статических сайтов: Textolite и Sitecake.
- Три причины разработать свою админку.
- Что такое SPA.
- Краткий обзор используемых технологий.

Урок 2. Настройка рабочего окружения.

- Node.JS, NPM, Gulp.
- Пишем современный JavaScript с использованием Babel.
- Веб сервер с поддержкой PHP OpenServer.
- Организация кода.
- PHP и Gulp.

Урок 3. Немного о PHP.

- Что такое PHP и зачем он нужен.
- Основы синтаксиса.
- Hello World на PHP.
- Пишем простейшее API.
- Разбираемся с Cross-origin resource sharing.
- Тестируем работу API с помощью программы Postman.

Урок 4. Vue.JS.

- Почему нам больше не нужен jQuery.
- Что такое Vue.
- Установка и Hello World.
- Обработка событий во Vue
- Двунаправленный биндинг данных.

Результат модуля: подготовленное к работе окружение, понимание разработки больших Single Page Application с использованием фреймворка Vue, начальные знания о разработке API на PHP.

Модуль 2. Разработка админки.

Урок 5. Этот загадочный iFrame.

- Как работает WYSIWYG редактор.
- Загружаем редактируемую страницу в iFrame.
- Глюки фреймов, которые браузеры вот уже много лет не могут побороть.
- Пишем собственную реализацию onload для фрейма.
- Перезагружаем содержимое фрейма правильно.

Урок 6. Редактирование произвольного текста на странице.

- HTML аттрибут contenteditable.
- Немного о DOM дереве.
- Поиск всех текстовых нод страницы.

Урок 7. Виртуальное DOM дерево.

- Баги из-за клиентских скриптов.
- Создаем виртуальное DOM дерево с отключенными скриптами.
- Синхронизация текстовых нодhttps://s13.eground.org/реального и виртуального дерева.

Урок 8. Генерация измененного HTML кода.

- Поиск внесенных правок.
- Обновление виртуального дерева.
- HEAD и DOCTYPE.
- Генерируем HTML.

Результат модуля: работающий редактор, который загружает страницу и позволяет ее редактировать, а затем генерирует код.

Модуль 3. Доделываем админку.

Урок 9. Облагораживаем редактор.

- Не бутстрапом единым - альтернативные CSS фреймворки.
- Верстаем сайдбар.
- Интерактив через Vue.
- Обрабатываем нажатие клавиш.

Урок 10. Сохранение внесенных правок.

- Пишем на PHP API для сохранения кода.
- Знакомство с JS библиотекой Axios.
- Отправляем обновленные исходники на сервер.
- Любуемся результатом.

Урок 11. Защищаем админку.

- Пишем на PHP API для авторизации.
- Верстаем окно ввода пароля.
- Клиент-серверное взаимодействие при авторизации.
- Настраиваем Apache для максимальной безопасности.

Урок 12. Дополнительные модули для админки.

- Делаем редактор META тегов.
- Автоматическое сохранение бэкапов на сервере.
- Восстановление из бекапа - функционал на клиенте.

Результат модуля: полноценная админка с функционалом не хуже чем у Textolite и некоторыми фишками которых там нет.

Подробнее:
Для просмотра содержимого вам необходимо авторизоваться.

Скачать:
Скрытое содержимое могут видеть только члены группы Премиум.


Скрытый контент для пользователей All-dar.
 

Создайте учетную запись или войдите, чтобы комментировать или скачивать материалы!

У вас должна быть учетная запись, чтобы оставлять комментарии

Зарегистрироваться

Создайте учетную запись. Это просто!

Авторизоваться

У вас уже есть аккаунт? Войдите здесь.

Сверху