Чат Astro Boy

облако кода
~~Интернет-адрес www.genal.fun~~ (Недействительно и больше не планируется к развертыванию)
Если у вас есть какие-либо предложения, пожалуйста, перейдите в раздел проблем.

Введение в проект

? В свободное время я хотел создать чат для закрепления навыков работы с интерфейсом, поэтому 24 июня 2020 года я начал разработку чата Astro Boy.
?Проект разрабатывается с использованием полного машинописного текста, что закладывает основу для будущих функциональных итераций. Конечно, мне тоже очень нравится машинописный текст.
? В настоящее время в чате уже есть полноценные функции чата. ~~В будущем будут разработаны более интересные функции.~~ Итерация остановлена! Друзья, которым интересно, могут сами его форкнуть и развивать, а вы можете модифицировать его по своему усмотрению! Я обновлю новые функции, когда у меня будет время!

Интерфейс проекта

ПК-версия

Мобильный терминал

Мобильный

Введение в функцию

Совместимость с мобильными устройствами
Изменение информации о пользователе (аватар/имя пользователя/пароль)
Групповой чат/приватный чат
Создать группу/присоединиться к группе/выйти из группы/группу нечеткого поиска
Добавить друзей/удалить друзей/пользователей нечеткого поиска
Пагинация сообщения
Смайлики
Отправка изображения/предварительный просмотр изображения
Статистика людей в Интернете
Пользовательская тема
Напоминание о повторном подключении

Обзор технологий

Typescript : расширенная версия JavaScript. Его самое большое преимущество заключается в том, что он предоставляет систему типов и улучшает читаемость и удобство обслуживания кода.
Vue2.6.x : прогрессивная интерфейсная платформа.
Socket/io : связь в реальном времени, сторонняя библиотека веб-сокетов.
Vuex : шаблон управления состоянием, разработанный специально для приложений Vue.js.
Nestjs : это платформа для создания эффективных и масштабируемых серверных приложений Node.js. Она написана на основе TypeScript и сочетает в себе связанные концепции OOP1, FP2 и FRP3.
Typeorm : поддерживает новейшие функции JavaScript и предоставляет дополнительные функции, которые помогут вам разработать любое приложение, использующее базу данных.
ES6+ : использование синтаксиса ES6+, стрелочных функций, async/await и другого синтаксиса очень просто в использовании.
SASS (SCSS) : используя SCSS в качестве языка предварительной обработки CSS, вы можете использовать наиболее эффективный способ создания сложных проектов с небольшим объемом кода.

Проектирование структуры таблицы базы данных

Конфигурация среды

База данных mysql и база данных чата (обратите внимание, что формат базы данных — utf8mb4)
узел v10.16.3

Запустить проект

Фронтенд-проект

 cd genal - chat - client 
npm i
npm run serve

Конфигурация mysql Если MySQL не может подключиться и появляется сообщение об ошибке: ER_NOT_SUPPORTED_AUTH_MODE, это вызвано несовместимостью версии mysql. См. эту статью https://blog.csdn.net/qq_41831345/article/details/83150502.
В базе данных нет sql-скрипта. Просто измените пароль базы данных в серверной части app.module.ts и создайте новую базу данных chat .
Бэкэнд-проект

 cd genal - chat - server
npm i
npm run start: dev

Запись итерации системы

Нажмите, чтобы просмотреть

v1.0.0

Функция

Добавить нового пользователя
Добавить новую группу
групповой чат

интерфейс v1.0.0

v2.0.0

Функция

Групповой чат/приватный чат
Создать группу/присоединиться к групповому чату/группе нечеткого поиска
Добавить друзей/нечеткий поиск друзей
Изменить имя пользователя/загрузку аватара
Смайлики
Пагинация сообщения

интерфейс v2.0.0

v3.0.0

Функция

Групповой чат/приватный чат
Создать группу/присоединиться к групповому чату/группе нечеткого поиска
Добавить друзей/нечеткий поиск друзей
Загрузка изображения/вставка, отправка изображения/предварительный просмотр изображения
Изменить имя пользователя/загрузку аватара
Смайлики
Пагинация сообщения

интерфейс v3.0.0

То же, что и версия 2.0.0

v4.0.0

Функция

Групповой чат/приватный чат
Создать группу/присоединиться к групповому чату/группе нечеткого поиска
Добавить друзей/нечеткий поиск друзей
Загрузка изображения/вставка, отправка изображения/предварительный просмотр изображения
Изменить имя пользователя/загрузку аватара
Смайлики
Пагинация сообщения
Совместимость с мобильными устройствами

интерфейс v4.0.0

То же, что и версия 2.0.0

v5.0.0

Функция

Групповой чат/приватный чат
Создать группу/присоединиться к групповому чату/выйти из группы/группу нечеткого поиска
Добавить друзей/удалить друзей/нечеткий поиск друзей
Загрузка изображения/вставка, отправка изображения/предварительный просмотр изображения
Изменить имя пользователя/загрузку аватара
Смайлики
Пагинация сообщения
Совместимость с мобильными устройствами
Статистика людей в Интернете
Напоминание о повторном подключении