[Вершина полного стека] Полная разработка Node.js + Vue.js для официального мобильного сайта Honor of Kings и серверной части управления
Этот проект представляет собой соответствующий исходный код лучшего видеоурока Bilibili https://github.com/wxs77577/node-vue-moba. Он постоянно обновляется... Обратите внимание.
1. Начало работы
- Введение в проект
- Установка инструментов и построение среды (nodejs, npm, mongodb)
- Инициализировать проект
2. Опыт управления
Построение базового интерфейса управления серверной частью на основе Element UI.
Создание категорий
Список категорий
Изменить классификацию
Удалить категорию
подкатегория
Общий интерфейс CRUD
Управление оборудованием
Загрузка изображения (несколько)
Управление героями
Редактировать героя (ассоциация, множественный выбор, эл-выбор, несколько)
Редактор навыков
Управление статьями
Редактор форматированного текста (quill)
Управление домашней рекламой
Управление учетной записью администратора (bcrypt)
Страница входа
Интерфейс входа (jwt, jsonwebtoken)
Проверка входа на сервер
Ограничения маршрутизации клиента (beforeEach, мета)
Проверка логина для загруженных файлов (el-upload, заголовки)
3. Мобильный сайт
- Концепции «стиля инструмента» и SASS (SCSS)
- сброс стиля
- Определение цвета и шрифта сайта (цвета, текст)
- Определение универсального гибкого стиля макета (flex)
- Часто используемые определения полей (поля, отступы)
- Рамка главной страницы и верхнее меню
- Изображение карусели вверху главной страницы (vue swiper)
- Используйте спрайты
- Используйте значки шрифтов (iconfont)
- Компонент карты (карта)
- Компоненты карты списка (карточка списка, навигация, свайпер)
- Главная Новости и информация-Ввод данных (+Исправление серверной ошибки)
- Главная Новости и Информационно-информационный интерфейс
- Главная Новости и информационно-интерфейсный дисплей
- Список героев домашней страницы — извлечения данных официального сайта
- Список героев главной страницы — введите данные
- Отображение интерфейса списка героев на домашней странице
- Страница сведений о новостях
- Информация о новостях идеально подходит для страницы
- Подробности о герое, стр. 1 – подготовка внешнего интерфейса
- Страница сведений о герое 2 – Редактирование серверной части
- Страница сведений о герое — 3 вверху интерфейса.
- Подробности о герое, страница-4-идеально
4. Выпуск и развертывание (облако Alibaba)
- Компилировать для производственной среды
- Купить доменное имя и сервер
- Разрешение доменного имени
- Установка и настройка Nginx
- Установка и настройка базы данных MongoDB.
- установка и настройка git ssh-key
- Node.js устанавливает и настраивает образ Taobao
- Вытащите код, установите pm2 и запустите проект.
- Настроить обратный прокси-сервер Nginx
- Перенос локальных данных на сервер (mongodump)
5. Расширенный
- Включите безопасное соединение HTTPS с бесплатным сертификатом SSL
- Используйте облачное хранилище Alibaba Cloud OSS для хранения загруженных файлов.
