vue nodejs elementUI mysql express demo Download - vue nodejs elementUI mysql express demo Download do código-fonte

vue nodejs elementUI mysql express demo

Outras categorias

1.0.2

Baixar

vue-nodejs-elementUI-mysql-express-demo

Projetos de separação front-end e back-end Vue + nodejs, aprenda a usar, incluindo operações básicas de entrada. Incluindo o processo de implementação desde a criação do projeto até a implantação final e um resumo de alguns problemas encontrados durante o processo.

Endereço de visualização do projeto: Endereço de visualização--aixiaodou.cn

Endereço para comentários e discussão: Blog pessoal - https://blog.csdn.net/qq_32442967/article/details/103459148

Endereço do banco de dados: express-demo/doc/demo2.sql

Banco de dados MySQL

O banco de dados é demo2

Crie o banco de dados demo2> execute a instrução sql

Modifique a configuração de conexão do banco de dados model/connDb.js no projeto express-demo

express-demo-web: projeto web front-end

 # 安装依赖
npm install

# 运行项目
npm run dev

express-demo: projeto backend nodejs

 # 安装依赖
npm install

# 运行项目
npm start

Este projeto é um projeto básico, usando o modo de separação frontal (vue) e posterior (nodejs).

Tecnologias usadas principalmente:

Front-end: vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
Back-end: nodejs + express + jsonwebtoken
Banco de dados: mysql
Ambiente de implantação: nginx
Servidor de implantação: linux centos7

Introdução às funções existentes:

Módulo de download da ferramenta ToolsDown: consulte a lista do banco de dados e exiba-a por categoria
login, registro de login, registro, módulo de logout: A página inicial e a página de download da ferramenta podem ser visualizadas sem login, e a página da lista de usuários ficará visível após o login. Salve o sessionToken no cookie e o userId após o login no localstorage. Dependendo se você está logado ou não, exiba o login ou avatar no canto superior direito.
Módulo de lista de usuários userManage: funções de paginação, pesquisa difusa, edição e exclusão de usuários
interface de link de amigo friend_link: coloque links de amigos e arquive informações no banco de dados
Estatísticas de contagem de downloads de software
Funções de modificação e exclusão de usuário

V 1.0.2 Estatísticas de download/verificação de registro de login (itens 5-6)

Otimize a verificação do token
Estatísticas de contagem de downloads de software
Funções de modificação e exclusão de usuário

V 1.0.1 Implementar funções básicas (itens 1-4) - registrar principalmente alguns problemas encontrados

front-end

Controle se a página pode ser acessada somente após o login: julgue se há login com base no token, configure o link de referência do roteador
Salve o userId obtido após fazer login no armazenamento local. Ao obter as informações do usuário, traga o userId para obter as informações do usuário logado e exibir o avatar no canto superior direito.

extremidade traseira

Nodejs se conecta ao banco de dados MySQL Se um pool de conexões for usado, a conexão deverá ser liberada após o uso, caso contrário o número máximo de conexões será excedido.

implantar

Depois que o nginx implanta o projeto vue, não há problemas com o acesso normal, mas um problema 404 aparecerá durante a atualização.
nodejs é executado permanentemente no Linux usando o link de referência para sempre

V 1.0.0 Crie projetos front-end e back-end

front-end

Use vue-cli+ webpack para gerar projetos vue
Configurar roteador, armazenamento, utilitários, axios, elementUI, número da porta...

extremidade traseira

Use express para gerar links de referência de projeto nodejs
Instale o pacote de dependência jsonwebtoken, gere o token e retorne o link de referência do front-end após o login bem-sucedido.
Instale o pacote de dependência do banco de dados mysql

Resolva o problema de domínio cruzado de projetos de separação de front-end e back-end (definindo cabeçalhos de solicitação) Link de referência

Front-end: interceptador de solicitação em axios, set sessionToken, usado como verificação de back-end para determinar se é um servidor permitido
Backend: Defina cabeçalhos de solicitação em app.js - adicione app.all()
Back-end: devido ao cabeçalho de solicitação personalizado sessionToken, para solicitações complexas entre domínios, haverá uma pré-solicitação de opções e as solicitações com opções de método serão processadas rapidamente e retornarão 200