Wechat Wecat

WeCat

introduzir

• Projeto de chat instantâneo baseado em Vue.js Family Bucket + WebSocket + Node.js + Koa2 + MongoDB
• A parte funcional refere-se ao WeChat, com algumas funções interessantes adicionadas. Os comentários do código do projeto são muito detalhados e é um bom projeto introdutório full stack para aprender Vue, Node.js e koa.
• O front-end e a implantação do projeto são concluídos de forma independente. Se houver alguma imperfeição em várias interações e funções de lógica de negócios, sinta-se à vontade para abordá-las.

Exibição do projeto

1. Faça login

2. Registre-se

3. Recuperar senha

4. O registro foi bem-sucedido, selecione o avatar

5. Painel principal

6. Adicione amigos

7. Painel de informações do amigo

8. Envie mensagens e arquivos

9. Painel multifuncional, envie emoticons

10. Menu de configurações personalizadas

11. Página do administrador, informações do usuário

12. Consulte todos os registros de bate-papo

13. Detalhes do histórico de bate-papo

14. Documentação da API

Estrutura de diretório

1. servidor é o servidor
2. público é um arquivo estático
3. db é o backup de exportação do MongoDB
4. src é a pasta do projeto

Tutorial de instalação

1. Clone o projeto git clone https://github.com/imzusheng/Wecat.git
2. diretório raiz do projeto cd, instalar dependências npm install
3. Execute o serviço npm run serve
4. cd ./server e, em seguida, instale as dependências do servidor npm install
5. Importe o banco de dados mongorestore -d wecat ./db
6. Execute o servidor npm run dev

Conta de teste

ID do usuário: [email protected]
senha: a123456

PENDÊNCIA

• Conecte-se
• Evite logins duplicados
• Horário do último login
• Local de login recente (província-cidade-distrito)
• Cadastre-se (verificação de e-mail)
• Recuperar senha (verificação de e-mail)
• Selecione o avatar do usuário
• sair
• Bate-papo ponto a ponto com amigos
• Conexão de pulsação do WS e reconexão de desconexão
• Solicitações de amigos on-line e off-line
• Adicione amigos e verifique solicitações de amizade
• Notificação de solicitação de amizade
• Lembrete de mensagem não lida
• Pesquisar usuários
• Configuração personalizada do usuário
• Carregamento lento do histórico de bate-papo
• Status de entrada de amigo atualizado em tempo real
• O título do site exibe o número de mensagens não lidas em tempo real
• Os amigos com quem você conversou recentemente estão fixados no topo
• Gerenciamento de back-end
• Imagem de bate-papo e upload de arquivo (upload múltiplo)
• Pré-visualização e download de fotos e arquivos de bate-papo
• bate-papo em grupo
• Cartão de perfil do usuário
• excluir amigo
• Crie um grupo
• Cartão de informações do grupo
• Junte-se a um grupo
• Sair do grupo

Pilha de tecnologia relacionada

• VueCli3
• Vuex
• Node.js
• Elemento-ui
• eixos
• MongoDB
• koa2
• WebSockets
• es

Notas e Resumo

• Upload de vários arquivos em partes
• Implantado no diretório não raiz do site no modo Vue Router History
• monitoramento de teclado js implementa combinação de teclas ctrl + enter para enviar mensagens
• Use o módulo ES6 para encapsular seu próprio serviço Websocket

sobre

• E-mail [email protected]
• Endereço do projeto
• Sobre mim
• GitHub
• turismo rural