Sala de chat de Astro Boy

nube de código
~~Dirección en línea www.genal.fun~~ (No válido y ya no está previsto implementarlo)
Si tiene alguna sugerencia, vaya al área de problemas.

Introducción del proyecto

En mi tiempo libre, quería crear una sala de chat para consolidar mis habilidades de front-end, así que comencé el viaje de desarrollo de la sala de chat de Astro Boy el 24 de junio de 2020.
? El proyecto se desarrolla utilizando texto mecanografiado completo, lo que sienta las bases para futuras iteraciones funcionales. Por supuesto, también me gusta mucho el mecanografiado.
? En la actualidad, la sala de chat ya cuenta con funciones de chat completas. ~~Se desarrollarán más funciones interesantes en el futuro.~~ ¡La iteración se ha detenido ahora! Los amigos que estén interesados pueden bifurcarlo y desarrollarlo ellos mismos, ¡y tú puedes modificarlo como quieras! ¡Actualizaré nuevas funciones cuando tenga tiempo!

Interfaz del proyecto

versión para PC

ordenador personal

terminal móvil

Móvil Móvil

Introducción a la función

Compatible con dispositivos móviles
Modificación de la información del usuario (avatar/nombre de usuario/contraseña)
Chat grupal/chat privado
Crear grupo/unirse a grupo/abandonar grupo/grupo de búsqueda difusa
Agregar amigos/eliminar amigos/usuarios de búsqueda difusa
Paginación de mensajes
Emoticones
Envío de imágenes/vista previa de imágenes
Estadísticas de personas en línea
Tema personalizado
Recordatorio de reconectar

Descripción general de la tecnología

Typecript : un superconjunto de JavaScript. Su mayor ventaja es que proporciona un sistema de tipos y mejora la legibilidad y el mantenimiento del código.
Vue2.6.x : marco progresivo front-end.
Socket/io : comunicación en tiempo real, biblioteca de terceros websocket.
Vuex : un patrón de gestión de estado desarrollado específicamente para aplicaciones Vue.js.
Nestjs : es un marco para crear aplicaciones del lado del servidor Node.js eficientes y escalables. Está escrito en base a TypeScript y combina los conceptos relacionados de OOP1, FP2 y FRP3.
Typeorm : admite las últimas funciones de JavaScript y proporciona funciones adicionales para ayudarlo a desarrollar cualquier aplicación que utilice una base de datos.
ES6+ : El uso de la sintaxis de ES6+, las funciones de flecha, async/await y otras sintaxis son muy fáciles de usar.
SASS (SCSS) : al utilizar SCSS como lenguaje de preprocesamiento de CSS, puede utilizar la forma más eficiente de crear diseños complejos con una pequeña cantidad de código.

Diseño de estructura de tabla de base de datos.

Configuración del entorno

Base de datos mysql y base de datos de chat (tenga en cuenta que el formato de la base de datos es utf8mb4)
nodo v10.16.3

ejecutar el proyecto

Proyecto inicial

 cd genal - chat - client 
npm i
npm run serve

Configuración de MySQL Si MySQL no puede conectarse y se informa un error: ER_NOT_SUPPORTED_AUTH_MODE, se debe a la incompatibilidad de la versión de MySQL. Consulte este artículo https://blog.csdn.net/qq_41831345/article/details/83150502.
No hay ningún script SQL en la base de datos. Simplemente cambie la contraseña de la base de datos en el back-end app.module.ts y cree una nueva base de datos chat .
proyecto de fondo

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

Registro de iteración del sistema

Haga clic para ver