alibaixiu

Introdução do projeto

Alibaba Baixiu, um sistema de gerenciamento de conteúdo, é dividido em duas funções principais: gerenciamento de conteúdo e exibição de conteúdo.

1. Módulo de função

1.1 Gerenciamento de Conteúdo

módulo	Função
usuário	Login, logout, adição de usuário, exclusão, modificação e consulta
artigo	Gerenciamento de artigos
Classificação	Gerenciamento de classificação
Comentário	Gerenciamento de comentários
Configurações do site	Palavras-chave, descrição, logotipo do site, imagem do carrossel

1.2 Exibição de conteúdo

módulo	Função
primeira página	Navegação, exibição de dados do artigo
Página da lista	Exibir uma lista de artigos por categoria
Página de detalhes	Exibir detalhes do artigo e implementar a função de comentários

2. Modo de desenvolvimento

2.1 Modelo de desenvolvimento misto de front-end e back-end

Todo o código HTML e dados são unidos no lado do servidor e todo o conteúdo é enviado ao cliente de uma só vez. O navegador executa o código e apresenta o conteúdo ao usuário.

pergunta:

1. Os desenvolvedores front-end e back-end não estão familiarizados com o código um do outro. É muito difícil para o desenvolvimento misto lidar com o código um do outro.
2. Durante o processo de desenvolvimento, os códigos inevitavelmente se sobreporão, duplicando a carga de trabalho.

2.2 Modelo de desenvolvimento de separação front-end e back-end

Vantagens: responsabilidades claras e divisão de trabalho, desenvolvimento independente, sem influência mútua.

3. Estrutura do projeto

Camadas do sistema	Use tecnologia
camada de dados	mongoDB
camada de serviço	node.js (expresso)
cliente	modelo de arte, jQuery, fonte incrível, deslizar

4. Configurando o ambiente operacional do projeto (coisas que você deve saber para executar o projeto)

1. Instale o software node.js e teste se ele foi instalado com sucesso
   1. Win + R abre o programa em execução no sistema Windows, digite powershell no programa em execução e pressione Enter para abrir o programa de linha de comando
   2. Insira o comando node -v para verificar a versão do node.js. Se o número da versão for exibido no programa de linha de comando e nenhum erro for relatado, a instalação foi bem-sucedida.
2. Instale o software mongodb e mongodb-compass
3. Copie a pasta do projeto Alibaba Baixiu para o disco rígido (programa do lado do servidor)
4. Vá para o diretório raiz do projeto na ferramenta de linha de comando
   1. Mantenha pressionada a tecla Shift, clique com o botão direito e selecione Abrir janela do PowerShell aqui
5. Use o comando npm install para instalar os arquivos de dependência necessários para o projeto
6. Abra o arquivo app.js e modifique a seção de conexão do banco de dados na linha 47: 'mongodb://itcast:itcast@localhost:27017/alibaixiu'

para 'mongodb://localhost:27017/alibaixiu'

(1) Motivo: você não criou a conta de conexão do banco de dados mongodb e as informações de senha. Optamos por usar o método padrão para fazer login no banco de dados mongodb.

(2) Se você deseja fazer login no banco de dados com sua conta e senha. Consulte: https://www.cnblogs.com/b02330224/p/10049395.html

Digite os comandos em sequência na linha de comando: use alibaixiu #Enter alibaixiu database

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #Criar usuário do banco de dados

​ Se você for avisado de que as permissões são insuficientes, consulte o link acima e primeiro faça login no banco de dados com a conta de administrador do mongodb.

7. (Nova etapa) Recentemente, os dados do banco de dados db_data foram carregados e o banco de dados alibaixiu pode ser inserido por meio do software mongodb-compass.

Crie coleções users , comment , slides , categories , posts e settings com o mesmo nome dos dados json na pasta db_data

​ (Coleção) e, finalmente, importe os dados json correspondentes em cada coleção por vez.

8. Digite node app.js na ferramenta de linha de comando para iniciar o projeto

5. Coisas a serem observadas após executar o projeto (coisas que você deve saber para executar好看的项目)

1. Abra o navegador e digite localhost:3000/admin/login.html na barra de endereço do navegador para entrar na página de login.

Digite o nome de usuário padrão do sistema: (original) [email protected] (agora) [email protected] Senha: 123456 Entre na página do administrador

2. Como o arquivo de banco de dados não é carregado, todos os dados precisam ser adicionados manualmente (se os dados JSON em db_data forem introduzidos, pule as etapas 2 a 10)

3. Entre na página do administrador e primeiro altere as informações da sua conta (altere a senha, etc.) e carregue o avatar do usuário.

4. Em seguida, adicione informações do artigo, informações de configuração do sistema e informações da imagem do carrossel (o pedido não é obrigatório, adicionar significa preencher as informações do formulário, selecionar arquivos de imagem, etc.)

5. Observe que ao alterar as informações de classificação, o ícone das informações de classificação precisa ser pesquisado em fontes incríveis, como: fa-phone, fa-gift, etc.

O formato do nome da classe de imagem pesquisado em font-awesome é: fa fa-xxx-xxx, você só precisa adicionar a parte fa-xxx-xxx no final.

6. Depois de adicionar as informações básicas do banco de dados, você pode optar por sair e registrar um novo usuário (o padrão do usuário registrado é um usuário comum)

Ou use os direitos de adição de usuário do administrador para adicionar usuários comuns.

7. Depois que os dados de segundo plano forem adicionados, use uma conta de usuário normal para entrar na página de exibição do artigo front-end (se desejar que o conteúdo da página seja mais rico

Recomenda-se adicionar cerca de 15 informações do artigo e cerca de 4 informações da categoria)

8. Se você quiser usar a conta de administrador para entrar no site, não saia da conta de administrador. Abra uma nova aba no navegador

Digite localhost:3000 na barra de endereço para entrar na página de exibição do artigo inicial

9. Se o administrador ativar a função de comentários, a função de comentários será exibida na página de detalhes do artigo inicial. Se o administrador desativar a função de comentários, a função de comentários será exibida na página de detalhes do artigo inicial.

A página não exibe a função de comentários

10. Se o administrador ativar a função de revisão de comentários, os comentários do usuário não serão exibidos na página imediatamente e o administrador precisará estar em segundo plano

Os comentários são revisados ​​na página de gerenciamento e serão exibidos na página do artigo somente após serem aprovados. Se o administrador desativar a função de comentários, o

Ele será exibido na página de detalhes do artigo.

11. Se o projeto ainda não puder ser executado, entre em contato comigo pelo telefone 1565066165

6.Endereço do projeto

Página inicial: http://luoxu.ltd:3000/ (alterada temporariamente para http://luoxuder.icu durante o registro do nome de domínio)

Página de login: http://luoxu.ltd:3000/admin/login.html (da mesma forma)

Exibição do efeito do projeto

1. Página inicial de exibição do artigo

2. Página de classificação de artigos front-end

3. Página de detalhes do artigo inicial

4. Página de login

5. Página de registro

6.Página de gerenciamento de back-end

Função do projeto

1. Funções do usuário

1.1 Login

1. Adicionar evento de clique para botão de login
2. Obtenha o nome de usuário e a senha inseridos pelo usuário na caixa de texto
3. Verifique se o usuário inseriu o nome de usuário e a senha. Caso contrário, evite que o programa seja executado para baixo e solicite ao usuário que insira o nome de usuário e a senha.
4. Chame a interface que implementa a função de login. Se o login for bem-sucedido, ele irá para a página inicial do gerenciamento de dados. Se o login falhar, ele informará que o nome de usuário ou a senha estão incorretos.

1.2 Interceptação de login

1. Use a tag script para carregar o endereço da interface fornecido pelo servidor
2. Determine o valor da variável isLogin. Se o valor for falso, vá para a página de login.

1.3 Adicionar usuário

1. Adicione um atributo de nome a cada item de formulário que adicione funções de usuário, e o valor do atributo de nome precisará ser consistente com o nome do parâmetro exigido no documento de interface.
2. Vincule o evento submit ao formulário e evite que o formulário seja enviado por padrão na função de manipulador de eventos.
3. Obtenha o conteúdo inserido pelo usuário no formulário na função manipuladora de eventos
4. Chame a interface de usuário add e envie o conteúdo obtido ao servidor por meio da interface. Se a operação for bem-sucedida, a página será atualizada. Se a operação falhar, um prompt do usuário será fornecido.

1.4 Exibir lista de usuários

1. Envie uma solicitação Ajax ao servidor para solicitar dados da lista de usuários
2. A segunda etapa é usar o mecanismo de modelo para unir os dados e o modelo HTML.
3. A terceira etapa é exibir o conteúdo emendado na página

1.5 Carregamento do avatar do usuário

1. Adicione um evento onchange ao controle de seleção de arquivos e obtenha o arquivo selecionado pelo usuário na função de manipulação de eventos.
2. Crie um objeto formData para fazer upload de arquivos de imagem
3. Chame a interface de upload de arquivo de imagem para implementar o upload de imagem
4. Adicione um novo campo oculto no formulário de adição de novo usuário e armazene o endereço da imagem no campo oculto

1.6 Exibição da lista de usuários

1. Envie uma solicitação Ajax ao servidor quando a página for carregada para solicitar dados da lista de usuários
2. Use um mecanismo de modelo para unir dados e modelos HTML
3. Exibir o conteúdo emendado na página

1.7 Modificação das informações do usuário

1. Adicione eventos para cliques no botão de edição por meio da delegação de eventos
2. Obtenha o valor do ID do usuário clicado no momento na função de manipulação de eventos
3. Obtenha informações detalhadas do usuário com base no ID do usuário e renderize as informações detalhadas do usuário no formulário à esquerda por meio do mecanismo de modelo
4. Adicione um evento de clique para o botão de modificação, obtenha o conteúdo inserido pelo usuário no formulário na função de processamento de eventos e chame a interface de modificação de informações do usuário para implementar a função de modificação de informações do usuário.

1.8 Excluir usuário

1. Adicionar evento de clique para botão excluir
2. Confirme se o usuário deseja excluir a operação
3. Obtenha o ID do usuário clicado no momento
4. Chame a interface do usuário de exclusão para excluir o usuário com base no ID. Se a exclusão for bem-sucedida, atualize a página atual para que ela exiba o conteúdo mais recente.

1.9 Excluir usuários em lotes

1. Gerenciar o status verificado das caixas de seleção
   1. Quando o botão Selecionar tudo é selecionado, todos os usuários são selecionados; quando o botão Selecionar tudo é desmarcado, todos os usuários são desmarcados.
   2. Quando o estado do botão da caixa de seleção na frente do usuário for alterado, verifique se algum usuário está desmarcado. Em caso afirmativo, desmarque o botão Selecionar todos. botão definido para o estado selecionado
2. Gerencie o status dos botões de exclusão em massa
   1. Quando o botão Selecionar tudo é selecionado, o botão Excluir lote é exibido. Quando o botão Selecionar tudo é desmarcado, o botão Excluir lote fica oculto.
   2. Quando o estado do botão da caixa de seleção na frente do usuário for alterado, verifique o status selecionado de todos os usuários. Se algum usuário for selecionado, exiba o botão de exclusão em lote. Se todos os usuários não estiverem selecionados, oculte o botão de exclusão em lote.
3. Implementar função de exclusão em lote de usuários
   1. Adicione um evento de clique ao botão de exclusão em lote Na função de processamento de eventos de clique, armazene todos os IDs de usuário selecionados em uma matriz.
   2. Chame a interface do usuário de exclusão para implementar a função de exclusão do usuário

1.10 Alterar senha

1. Adicione um atributo name a cada item do formulário de alteração de senha. O valor do atributo name deve ser consistente com o nome do parâmetro na interface.
2. Adicione um evento de envio de formulário ao formulário de alteração de senha e, na função do manipulador de eventos, evite o comportamento de envio padrão do formulário
3. Obtenha o conteúdo inserido pelo usuário no formulário
4. Chame a interface de modificação de senha para implementar a função de modificação de senha. Se a senha for modificada com sucesso, vá para a página de login e permita que o usuário faça login novamente.

1.11 Exibir informações do usuário logado

1. De acordo com o valor da variável userId, obtenha do servidor as informações do usuário atualmente logado.
2. Exibir informações do usuário no lado esquerdo da página

2. Função de classificação

2.1 Adicionar categoria

1. Adicione um atributo name a cada item de formulário no formulário. O valor do atributo name deve ser consistente com o nome do parâmetro requerido no documento de interface.
2. Adicione um evento de envio de formulário ao formulário e, na função do manipulador de eventos, evite o comportamento padrão de envio de formulário
3. Obtenha o conteúdo inserido pelo usuário no formulário
4. Chame a interface de adição de categoria para implementar a função de adição de categoria

2.2 Exibição de dados classificados

1. Envie uma solicitação Ajax ao servidor para solicitar dados da página de categoria
2. Use um mecanismo de modelo para unir os dados retornados pelo servidor com o modelo HTML
3. Exibir o conteúdo emendado na página

2.3 Modificação de dados classificados

1. Adicione um evento de clique ao botão de edição por meio da delegação de eventos e obtenha o ID dos dados de classificação a serem modificados na função de processamento de eventos.
2. Chame a interface de acordo com o id para obter informações detalhadas dos dados classificados
3. Use o mecanismo de modelo para unir dados classificados e caracteres HTML. Depois que a emenda for concluída, o conteúdo será renderizado na página.
4. Adicione um evento de clique ao botão de modificação e obtenha o conteúdo inserido pelo administrador no formulário na função de manipulador de eventos
5. Chame a interface de dados de classificação modificada para implementar a função de modificação de dados de classificação.

2.4 Exclusão de dados classificados

1. Adicione um evento de clique ao botão de exclusão por meio da delegação de eventos e a caixa de confirmação de exclusão aparecerá no manipulador de eventos de clique.
2. Após o usuário clicar para confirmar a exclusão, obtenha o ID dos dados classificados a serem excluídos.
3. Chame a interface de exclusão de dados de categoria para implementar a função de exclusão de dados de categoria. Se a categoria for excluída com sucesso, atualize a página.

3. Função do artigo

3.1 Adicionar artigo

1. Obtenha dados de classificação de artigos e exiba os dados na lista suspensa da categoria para o administrador selecionar
2. Faça upload da imagem da capa do artigo e salve o endereço da imagem enviada em um campo oculto
3. Adicione um atributo de nome a cada item do formulário no formulário de adição de artigo, e o valor do atributo de nome deve ser consistente com o nome do parâmetro exigido na interface
4. Vincule o evento de envio de formulário ao formulário de adição de artigo e evite que o formulário seja enviado por padrão na função de manipulador de eventos.
5. Obtenha o conteúdo inserido pelo administrador no formulário
6. Envie uma solicitação para adicionar um artigo ao servidor para implementar a função de adição de artigos. Depois que o artigo for adicionado com sucesso, ele irá para a página da lista de artigos.

3.2 Exibição de dados da lista de artigos

1. Quando a página aparecer, envie uma solicitação ao servidor para obter dados da lista de artigos.
2. Use o mecanismo de modelo para unir os dados da lista de artigos e o HTML. Depois que a emenda for concluída, o conteúdo será exibido na página.
3. Implementar função de paginação de dados de lista com base em dados de paginação

3.3 Filtragem da lista de dados de artigos

1. Envie uma solicitação ao servidor para solicitar dados de classificação do artigo e exibir os dados na lista suspensa da categoria a que pertence.
2. Adicione um evento de clique ao botão de filtro e obtenha o conteúdo selecionado pelo usuário na função manipuladora de eventos
3. Envie uma solicitação ao servidor para solicitar os dados da lista de artigos solicitados pelo administrador e exibir os dados na página

3.4 Edição de artigos

1. Adicione um link ao botão de edição e passe o id do artigo como parâmetro de consulta do link para a página de edição do artigo
2. Obtenha o parâmetro id na barra de endereço da página de edição do artigo
3. Obtenha detalhes do artigo com base no ID e exiba as informações do artigo no formulário de edição do artigo
4. Vincule o evento de envio do formulário para modificar o formulário do artigo e evite que o formulário seja enviado por padrão na função de manipulador de eventos.
5. Obtenha o conteúdo inserido pelo usuário no formulário
6. Envie uma solicitação ao servidor para implementar a função de modificação das informações do artigo. Se as informações do artigo forem modificadas com sucesso, vá para a página da lista de artigos.

3.5 Exclusão de artigo

1. Adicione um evento de clique para o botão excluir por meio da delegação de eventos, abra uma caixa de confirmação de exclusão na função de processamento de eventos e confirme a operação de exclusão com o administrador
2. Obtenha o id do artigo a ser excluído na função de manipulador de eventos
3. Envie uma solicitação Ajax para executar a operação de exclusão. A operação de exclusão foi bem-sucedida e a página foi atualizada.

3.6 Recomendações de artigos populares

1. Envie uma solicitação ao servidor para obter dados de recomendações populares

2. Use um mecanismo de modelo para unir dados e modelos HTML e exibir o conteúdo emendado na página

    var str = '<div>{{name}}</div>' ;
   var obj = { name : '张三' }
   var html = template . render ( str , obj ) ;

3.7 Pesquisa de artigos

1. Vincule o evento de envio do formulário ao formulário de pesquisa
2. Impedir o comportamento de envio padrão do formulário no manipulador de eventos e obter as palavras-chave de pesquisa inseridas pelo usuário
3. Vá para a página de resultados da pesquisa e passe as palavras-chave inseridas pelo usuário para a página de resultados da pesquisa
4. Na página de resultados da pesquisa, as palavras-chave inseridas pelo usuário são obtidas a partir dos parâmetros de consulta na barra de endereço.
5. A interface de pesquisa é chamada de acordo com as palavras-chave de pesquisa inseridas pelo usuário. Quando o servidor retorna os dados, os dados do resultado da pesquisa e o modelo HTML são unidos e o conteúdo emendado é finalmente exibido na página.

4. Função de comentário

4.1 Exibição da lista de comentários

1. Envie uma solicitação ao servidor para obter os dados da lista de comentários
2. Use um mecanismo de modelo para unir os dados da lista de comentários e o modelo HTML e, em seguida, exibir o conteúdo na página após a conclusão da emenda.
3. Implementar função de paginação com base em dados de paginação

4.2 Moderação de comentários

1. Altere o texto no botão de moderação com base no status do comentário atual. Se o comentário atual não for revisado, o botão exibirá Aprovação; se o comentário atual for revisado, o botão exibirá Ignorar.
2. Adicione um evento de clique ao botão de revisão por meio da delegação de eventos e obtenha o status do comentário atual na função de manipulação de eventos
3. Envie uma solicitação ao servidor e informe ao servidor para qual estado o comentário deve ser alterado. Se a modificação for bem-sucedida, atualize a página para que os dados mais recentes sejam exibidos na página.

4.3 Exclusão de comentários

1. Adicione um evento de clique ao botão de exclusão por meio da delegação de eventos e abra a caixa de confirmação de exclusão na função de manipulação de eventos
2. Obtenha o valor do id do comentário que o administrador deseja excluir
3. Envie uma solicitação ao servidor para excluir o comentário. Se o comentário for excluído com sucesso, atualize a página.

5. Função de gráfico carrossel

5.1 Adicionar dados do carrossel de imagens

1. Implemente a função de upload de imagem e salve o endereço da imagem enviada em um campo oculto
2. Adicione um atributo name a cada item do formulário no carrossel de imagens. O valor do atributo name deve ser consistente com o nome do parâmetro exigido na interface.
3. Vincule o evento de envio do formulário ao formulário do carrossel de imagens e evite que o formulário seja enviado por padrão na função de manipulador de eventos.
4. Obtenha o conteúdo inserido pelo administrador no formulário
5. Envie uma solicitação ao servidor para implementar a função de adição de dados do carrossel de imagens. Se os dados forem adicionados com sucesso, atualize a página.

5.2 Exibição de dados do gráfico carrossel

1. Envie uma solicitação ao servidor para obter dados da lista do carrossel de imagens
2. Use um mecanismo de modelo para unir os dados da lista do carrossel de imagens e o modelo HTML. Depois que a emenda for concluída, o conteúdo será exibido na página.

5.3 Exclusão de dados do carrossel de imagens

1. Adicione um evento de clique ao botão excluir por meio da delegação de eventos
2. Abra a caixa de confirmação de exclusão na função do manipulador de eventos
3. Obtenha o ID dos dados da imagem do carrossel a serem excluídos
4. Envie uma solicitação ao servidor para executar a operação de exclusão. A operação de exclusão foi bem-sucedida e a página foi atualizada.

5.4 Exibição de dados do gráfico carrossel (atualizado)

1. Envie uma solicitação ao servidor para obter dados do carrossel
2. Use um mecanismo de modelo para unir dados e strings HTML e exibir o conteúdo emendado na página
3. Mova o código JavaScript original que implementa o efeito carrossel para o final da função de sucesso do método ajax

6. Função de configuração do site

6.1 Configurações do site

1. Implemente o upload de imagens do logotipo do site e salve o endereço da imagem enviada em um domínio oculto
2. Adicione um atributo name a cada item de formulário no formulário. O valor do atributo name deve ser consistente com o nome do parâmetro requerido no documento de interface.
3. Vincule o evento submit ao formulário e evite que o formulário seja enviado por padrão na função de manipulador de eventos.
4. Obtenha o conteúdo inserido pelo administrador no formulário
5. Envie uma solicitação ao servidor para implementar a função de adicionar dados de configuração do site

6.2 Exibir dados de configuração do site

1. Envie uma solicitação ao servidor para obter dados de configuração do site
2. Determine se os dados retornados pelo servidor são verdadeiros. Se for verdade, exiba os dados no formulário.

7. Função de atualização mais recente do site

7.1 A página exibe informações de comentários do artigo

1. Pesquise os comentários do artigo de acordo com o ID do artigo

2. Os comentários aprovados serão exibidos diretamente na página

3. Os comentários mais recentes foram otimizados

4. Comentários não aprovados na página de gerenciamento serão marcados em vermelho

7.2 Otimização de página

1. Todos os botões semelhantes implementam a função semelhante

2. O link de comentário implementa a função de pular para o artigo de comentário

3. Todos os botões de classificação implementam a função de pular para a página de classificação

7.3 Página de registro

1. Adicionado um botão de registro de usuário à página de login

2. js na página de registro implementa verificação básica das informações de registro de front-end

3. Funções de página desenvolvidas usando bootstrap

4. Todos os usuários cadastrados na página de registro são usuários comuns

5. Implementada a função de localização de usuários com base em seus endereços de e-mail

Para obter detalhes, consulte a documentação da interface