Dimensional Impression, um fórum de comunicação de animação criado por SpringCloud
Prefácio
Diz-se que metade dos programadores chineses no Github são bidimensionais, então Para atrair mais estrelas Desenvolvi este fórum de troca de animação enquanto aprendia a tecnologia SpringCloud.
Introdução do projeto
Acimage é um fórum de troca de animação construído no Spring Cloud queseparao front e o backend . O backend usa SpringCloud + Mybatis-Plus + Reids + Rabbitmq + Elasticsearch . O front-end usa Vue + ElementUi + Vite . O projeto foi lançado. Caro pessoal do Github 2D, por que não me dar uma estrela(๑•̀ㅂ•́)و✧.
URL
* Dimensional Impressiono( ≧▽≦)ツ~Animation Exchange Forum www.acimage.top (Aplicável apenas à página da web. Se a tela for muito pequena, você pode ampliar o navegador adequadamente para obter melhores efeitos visuais).
primeira página
Página do fórum
Arquitetura do sistema
Função do projeto
Recepção do usuário
Use imagens para identificar imagens , ou seja, faça upload de imagens para identificar imagens semelhantes no fórum e os tópicos a que pertencem.
Pesquisa diversificada , você pode pesquisar com base em palavras-chave, categorias, tags e campos de classificação ao mesmo tempo e destacar o texto correspondente com base em palavras-chave.
Recomendações de tópicos relacionados , recomendações aleatórias .
Classificações de tópicos (classificados por estrela, número de visualizações, número de comentários, etc., tempo ativo).
Classificações de usuários (classificadas por número de tópicos, estrelas, etc.).
Categorias, tags e clique para filtrar tópicos que correspondam a categorias ou tags relevantes.
Exiba os últimos tópicos ativos em tempo real .
Filtragem sensível de palavras , compressão de imagens .
Notificação de mensagem
Veja atualizações pessoais e modifique informações pessoais.
Faça login, registre-se, saia, código de verificação para evitar deslizar e verificação de e-mail .
Poste tópicos, comentários, estrelas, etc.
Gerenciamento de back-end
O controle de permissão RBAC relativamente completo pode ajustar dinamicamente funções de usuário, permissões de função, permissões de interface, etc.
Exibição de dados básicos do site, número de visitantes, número de chamadas de interface, etc.
Gerenciamento de imagens do carrossel da página inicial.
Tópicos, comentários, gerenciamento de usuários.
Recursos do projeto
O JWT implementa logon único, autenticação de identidade unificada e autenticação no gateway e controle completo de permissão RBAC .
Use script Redis + Lua + tarefas agendadas para persistir regularmente dados que mudam com frequência (visualizações, etc.).
Usando Redis + script Lua + anotações personalizadas , apenas uma anotação pode ser usada para limitar o fluxo de IP, usuário e volume geral de solicitações.
O algoritmo Dhash é usado para realizar a função de reconhecimento de imagem com imagens, e o efeito não é ruim.
Todas as imagens enviadas são compactadas usando webp, o que reduz bastante a pressão da largura de banda.
Diretório do projeto
Serviços de back-end
acimage_gateway : gateway, autenticação de identidade unificada, autenticação, limitação de corrente para usuários e volume geral de solicitações, respectivamente
acimage_user : Central de usuários, cadastro de usuário, login, atendimento de e-mail, etc.
acimage_community : serviço comunitário, responsável pelas principais funções relacionadas aos tópicos do fórum
acimage_image : Serviço de imagens, responsável por enviar imagens de tópicos, enviar avatares e identificar imagens com imagens, etc.
acimage_admin : serviço de gerenciamento
módulo de back-end
acimage_common : módulo público, que armazena classes de entidades, interceptores públicos, configurações públicas e classes de ferramentas públicas, etc.
acimage_feign : Coloque o cliente fingido de cada módulo
front-end
vue_manage_system : página de gerenciamento em segundo plano
vue_acimage_web : página do portal
outro
doc : alguns documentos, fotos e arquivos de banco de dados
Execute e implante
O projeto ainda está sendo aprimorado, e o processo de operação e implantação será atualizado posteriormente .
Importe os três bancos de dados em doc/sql para mysql, respectivamente. Os quatro bancos de dados são os bancos de dados correspondentes aos quatro serviços front-end.
Configure o endereço correspondente ou senha da conta de mysql, redis, RabbitMQ e Nacos no arquivo application-dev.yml de cada serviço
Preencha as informações da conta Qiniu Cloud em application-qiniu-template.yml em acimage_common , incluindo access-key , secret-key , domian , bucket , ou atribua qualquer valor a esses quatro atributos (não pode estar vazio, caso contrário NPE ), mas você não é possível fazer upload de imagens desta forma. E renomeie application-qiniu-template.yml para application-qiniu.yml
Configure o endereço nacos e o endereço sentinela em application.yml no módulo acimage_common (se o sentinela não estiver configurado, isso não afetará a operação)
Inicie nacos, redis, coelhomq, mysql
Inicie acimage_user , acimage_community , acimage_image , acimage_gateway em sequência. Caso contrário, um erro pode ser relatado devido à criação da fila RabbitMQ e problemas de sequência de ligação.
Depois de executar o front-end (consulte o README de vue_acimage_web para obter detalhes), clique no link pop-up padrão para acessar a página inicial.
Login da recepção **: usuário: wk, senha: wk123456 (há vários outros usuários que podem ser vistos no arquivo sql do banco de dados, e as senhas são todas nome de usuário 123456)
porta:
acimage_user : 8100
imagem_acimage : 8090
acimage_community : 8080
acimage_gateway : 8070
Seleção de tecnologia
Pilha de tecnologia de back-end
SpringBoot , SpringCloud , MyBatis-plus , Druid (pool de conexão de banco de dados), Redis (cache distribuído), Rabbitmq (fila de mensagens), Elasticsearch (mecanismo de pesquisa distribuído), Minio (serviço de armazenamento de objetos), Nginx (servidor proxy reverso), Docker ( mecanismo de contêiner de aplicativo)
interface de usuário
Vue2 , Vue Router (roteamento), ElementUi (biblioteca de componentes básicos Vue), axios (cliente http), jsencrypt (biblioteca js baseada em criptografia e descriptografia RSA), vue-dompurify-html (ataque anti-XSS), tinymce-vue ( editor de rich text)
Front-end da interface de gerenciamento de back-end
Vite , TypeSript
Pendência
Categorias, tags
Tópicos, classificações de usuários
Recomendação aleatória
Tópicos semelhantes recomendados
Filtragem de palavras sensíveis
Interface idempotente
Limite de corrente refinado
Melhore o controle de autoridade RABC, autenticação de identidade unificada e autenticação no gateway
Adicione serviços de e-mail, verificação de e-mail, códigos de verificação, etc.
Armazene fotos em minio (originalmente armazenadas em Qiniu Cloud)
pesquisa diversificada elasticsearch, destaque de palavras-chave
Adicionar função de notificação de mensagem do usuário
Use redis+lua para extrair em lote tópicos e visualizações de página do cache para reduzir o número de comunicações e exibir dados em tempo real.
Adicionar emoticon de comentário
Adicionar função de acompanhamento
Melhorar a configuração e uso de sentinela e nacos
O projeto foi originalmente construído para aprender tecnologia. Devido às capacidades limitadas, ainda existem muitas imperfeições. Se alguém estiver interessado (espero realmente que alguém esteja interessado) ou se encontrar algum problema com o projeto ou tiver alguma sugestão para levantar um assunto, pode entrar em contato com o e-mail [email protected] ou ingressar no grupo 692992463 para se comunicar. Se gostar, lembre-se de dar uma estrela.
Captura de tela do site
Lado da web
Terminal de administração <br> Fique à vontade para postar algumas fotos do sistema de gerenciamento. De qualquer forma, todos os sistemas de gerenciamento parecem iguais.
