iBlog

Экологическая подготовка

• Node.js v14.15.5
• МонгоБД v4.2.17

Установить базу данных MongoDB

Войдите на официальный сайт для загрузки, версия — 4.2.17, платформа — Windows, установочный пакет — в формате MSI.

разработка проекта

1. Клонируйте проект локально:

$ git clone [email protected]:miqilin21/vue-blog.git
$ cd vue-blog
$ pnpm i

2. Установите внешние, внутренние (администратор, веб) и внутренние (серверные) зависимости проекта:

$ pnpm install-all

3. Запускайте фронтенд, бэкэнд (администратор, веб) и бэкенд (сервер) проекты:

$ pnpm serve-all

4. Откройте предварительный просмотр браузера:

http://localhost:8080 открывает интерфейсную локальную страницу; http://localhost:8088 открывает фоновую локальную страницу;

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

Бэкэнд-система управления

• Добавить новую категорию

• Список категорий (добавление, удаление, изменение, проверка)

• Добавить новую статью

• Список статей (добавление, удаление, изменение, проверка)

• Список комментариев к статье

• Добавить ссылку в друзья

• Список дружественных ссылок (добавление, удаление, изменение, проверка)

• Список сообщений

• Список пользователей сообщений

• Интеграция редактора Markdown

• Функция загрузки изображений

• Добавить нового пользователя

• Список пользователей (добавление, удаление, изменение, проверка)

• Универсальная реализация интерфейса добавления, удаления, изменения и запроса (ресурс промежуточного программного обеспеченияMiddleware)

• Функция регистрации входа в систему

• Функция выхода из системы

• Добавить проверку jwt (1. Поиск имени пользователя 2. Проверка пароля 3. Токен возврата)

• Добавить перехватчик http (запрос, ответ)

Система блогов

• Пользовательский интерфейс домашней страницы блога
• Реализация интерфейса домашней страницы блога
• Пользовательский интерфейс страницы архива блога
• Реализация интерфейса страницы архива блога
• Пользовательский интерфейс страницы тегов блога
• Реализация интерфейса страницы тегов блога
• Пользовательский интерфейс страницы сообщения в блоге
• Реализация интерфейса страницы статьи блога
• Пользовательский интерфейс страницы ссылок на друзей в блоге
• Реализация интерфейса страницы ссылок на друзей в блоге
• Интерфейс страницы сообщений блога
• Реализация интерфейса страницы сообщений блога

Примечания по конфигурации

1. Чтобы отвечать на комментарии других людей на странице комментариев, ваш почтовый ящик QQ используется для синхронизированных уведомлений. Вам необходимо настроить почтовый ящик в server/plugins/sendEmail.js . Как получить код авторизации почтового ящика QQ, показано на рисунке ниже ( на странице настроек почтового ящика QQ).

2. Настройка основной учетной записи для комментариев (основная учетная запись используется для ответов по электронной почте, поэтому адрес электронной почты учетной записи, созданный для комментариев, должен совпадать с адресом электронной почты для кода авторизации почтового ящика QQ на предыдущем шаге). учетную запись необходимо указать в файле web/src/commentConfig.js (обратите внимание, что topNickName должно соответствовать псевдониму основной учетной записи, созданной комментарием. topParentId можно получить на фоновой странице, если основная учетная запись очищена). его необходимо перенастроить.
3. Что касается загрузки фонового изображения: по умолчанию используется локальная загрузка. Этот метод предъявляет более высокие требования к серверу. Естественно, это повлияет на скорость загрузки внешнего интерфейса. Вы можете использовать OSS Alibaba Cloud для загрузки и хранения. Вам необходимо добавить server/routes/admin/index.js , закомментируйте код для локальной загрузки изображения и, наконец, заполните конфигурацию операционной системы Alibaba Cloud.

Упаковка и развертывание проекта

• Упаковка веб-проекта и проекта администратора (запустите команду pnpm build-all в корневом каталоге)
• Покупка доменного имени
• Разрешение доменного имени
• покупка облачного сервера Linux
• установка git, добавление ключа ssh
• управление процессами pm2
• конфигурация ngnix
• конфигурация монгодба
• Перенос данных mongodb с локального сервера на сервер
• Бесплатное ускорение Qiniuyun cdn для всего сайта

Для развертывания онлайн-сервера обратитесь к этому руководству.

Серверная система управления блогом

Система блогов

Добро пожаловатьStar,Проблемы

• Ваша звезда — моя мотивация для постоянных обновлений и обслуживания! ! !
• Если во время использования возникли какие-либо проблемы, пожалуйста, сообщите о них.

Список дел

• Оптимизация производительности, изображения необходимо сжимать и предварительно загружать
• Добавить функцию поиска на страницу сообщения в блоге
• Проблемы совместимости браузера, мобильная адаптация. Я использовал только эффекты разработки браузера Google Chrome и адаптации мобильного телефона. Я не пробовал никаких других методов. Однако не рекомендуется использовать мобильный терминал. Эффект входа в систему с компьютера лучше.
• Решите проблему SEO Vue и проблему дрожания при обновлении страницы рендеринга. В настоящее время мы будем выполнять предварительный рендеринг Vue. Мы не исключаем возможности выполнения рендеринга на стороне сервера Vue или рендеринга на стороне сервера nuxt.js в будущем.
• Организуйте код и разделите его на компоненты. Сделайте структуру более понятной и уменьшите количество кода.
• Рефакторинг всего проекта с использованием машинописного текста
• Интересные функции будут добавляться постепенно по мере того, как я о них думаю, и они находятся в постоянной разработке...