iBlog

Preparação ambiental

• Node.js v14.15.5
• MongoDB v4.2.17

Instale o banco de dados MongoDB

Entre no site oficial para fazer o download, a versão é 4.2.17, a plataforma é Windows e o pacote de instalação está no formato msi.

desenvolvimento de projetos

1. Clone o projeto localmente:

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

2. Instale dependências de projeto front-end, back-end (admin, web) e back-end (servidor):

$ pnpm install-all

3. Execute projetos front-end, back-end (admin, web) e back-end (servidor):

$ pnpm serve-all

4. Abra a visualização do navegador:

http://localhost:8080 abre a página local de front-end; http://localhost:8088 abre a página local de segundo plano.

Registre o usuário ao fazer login como administrador de back-end pela primeira vez. Depois de fazer login, você pode ocultar o botão de registro para evitar que a conta de login vaze.

Sistema de gerenciamento de back-end

• Adicionar nova categoria

• Lista de categorias (adicionar, excluir, modificar, verificar)

• Adicionar novo artigo

• Lista de artigos (adicionar, excluir, modificar, verificar)

• Lista de comentários do artigo

• Adicionar link de amigo

• Lista de links amigáveis ​​(adicionar, excluir, modificar, verificar)

• Lista de mensagens

• Lista de usuários de mensagens

• Integração do editor Markdown

• Função de upload de imagem

• Adicionar novo usuário

• Lista de usuários (adicionar, excluir, modificar, verificar)

• Implementação universal de adição, exclusão, modificação e interface de consulta (recurso de middlewareMiddleware)

• Função de registro de login

• Função de logout

• Adicionar verificação jwt (1. Pesquisa de nome de usuário 2. Verificação de senha 3. Token de retorno)

• Adicionar interceptor http (solicitação, resposta)

Sistema de blogs

• IU da página inicial do blog
• Implementação da interface da página inicial do blog
• IU da página de arquivo do blog
• Implementação da interface da página de arquivo do blog
• IU da página de tags do blog
• Implementação da interface da página de tag do blog
• IU da página de postagem do blog
• Implementação da interface da página do artigo do blog
• IU da página do link do amigo do blog
• Implementação da interface da página de link de amigo do blog
• IU da página de mensagens do blog
• Implementação da interface da página de mensagens do blog

Notas de configuração

1. Para responder aos comentários de outras pessoas na página de comentários, sua caixa de correio QQ é usada para notificação sincronizada. Você precisa configurar a caixa de correio em server/plugins/sendEmail.js . Como obter o código de autorização da caixa de correio QQ é mostrado na figura abaixo. na página de configurações da conta de caixa de correio QQ).

2. Configuração da conta principal para comentários (a conta principal é usada para respostas por e-mail, portanto o e-mail da conta criada para comentários deve ser o mesmo que o e-mail do código de autorização da caixa de correio QQ na etapa anterior, ao mesmo tempo, o comentário). a conta precisa ser definida em web/src/commentConfig.js (Observe que topNickName precisa ser consistente com o apelido da conta principal criada pelo comentário. topParentId pode ser obtido na página de fundo). ele deve ser reconfigurado.
3. Em relação ao upload da imagem de fundo: o padrão é fazer upload para o local. Este método tem requisitos mais elevados para o servidor. Naturalmente, a velocidade de carregamento do front-end será afetada. Você precisa adicionar server/routes/admin/index.js , comentar o código para upload de imagem local e, finalmente, preencher sua configuração Alibaba Cloud oss.

Embalagem e implantação do projeto

• Empacotamento de projetos Web e administrativos (execute o comando pnpm build-all no diretório raiz)
• Compra de nome de domínio
• Resolução de nome de domínio
• compra de servidor em nuvem linux
• instalação do git, adição de chave ssh
• gerenciamento de processos pm2
• configuração do ngnix
• configuração do mongodb
• Migrar dados do mongodb do local para o servidor
• Aceleração gratuita Qiniuyun cdn para todo o site

Para implantação de servidor online, consulte este guia.

Sistema de gerenciamento de back-end de blog

Sistema de blogs

Bem-vindoStar, problemas

• Sua Estrela é minha motivação para atualizações e manutenções contínuas! ! !
• Se houver algum problema durante o uso, sinta-se à vontade para relatar problemas

Lista de tarefas

• Otimização de desempenho, as imagens precisam ser compactadas e pré-carregadas
• Adicionar função de pesquisa à página de postagem do blog
• Problemas de compatibilidade do navegador, adaptação móvel. Usei apenas o desenvolvimento do navegador Google Chrome do meu próprio computador e os efeitos de adaptação do telefone móvel. Não tentei nenhum outro método. No entanto, não é recomendado usar o terminal móvel.
• Resolva o problema de SEO do Vue e o problema de jitter ao atualizar a página de renderização. Faremos a pré-renderização do Vue por enquanto. Não descartamos a possibilidade de fazer a renderização do lado do servidor Vue ou do lado do servidor nuxt.js no futuro.
• Organize o código e divida-o em componentes. Torne a estrutura mais clara e reduza a quantidade de código
• Refatore todo o projeto usando TypeScript
• Funções interessantes serão adicionadas gradualmente à medida que penso nelas, e estão em contínuo desenvolvimento...