3YAdmin

O código é muito feio, por isso não é recomendado copiá-lo. Você pode dar uma olhada na ideia de implementação do RBAC, que é universal.

3YAdmin

3YAdmin é um modelo de sistema de gerenciamento de segundo plano com foco no controle geral de permissões e formulários.

3YAdmin suporta dois modos de layout, modo Tab e modo normal. Os dois modos são determinados quando o webpack é empacotado e compilado. Ao empacotar um determinado modo, o código redundante no outro modo não será introduzido (é muito doloroso implementar o modo Tab no React).

3YAdmin implementa as principais páginas funcionais e operações do modelo de controle de permissão RBAC.

3YAdmin pode gerar formulários de consulta, formulários estáticos e formulários dinâmicos analisando os dados JSON definidos.

Emparelhado com o preguiçoso-mock, você pode gerar rapidamente funções de adição, exclusão, modificação e consulta de front-end e back-end com dados simulados (gerador de código simples).

demonstração on-line:

Modo de guia

Modo Comum

Conta de login:

admin 123

test 123456

website_admin 123456

Funções e recursos

• Suporte real de dados de back-end

• Login/Logout

• Encolher a barra de menu esquerda

• Layout responsivo

• Carregar sob demanda

• Navegação de tags

• migalhas de pão

• Tela inteira/sair da tela inteira

• Menu dinâmico vs menu estático

• Menus divididos por módulos

• Controle de permissão universal

• Controle de permissão em nível de menu

• Controle de permissão em nível de interface

• Controle de permissão em nível de elemento

• Efeitos de carregamento configuráveis ​​globalmente

• Tratamento de exceções de rede

• módulo

• Configurações do sistema

• Gerenciamento de permissões

• Estrutura organizacional

• Gerenciamento de usuários

• Gerenciamento de cardápio

• Gerenciamento de funções

• gerenciamento de funções

• Gerenciamento de permissões de função

• Gerenciamento de usuários de função

• Gerenciamento de funções de usuário

• Gestão de departamento

• Gestão de posição

• módulo do sistema

• Registro de auditoria

• Inicialização de dados

• exemplo

• Formulário de pesquisa

• Formulário comum (formulário estático, após análise pela primeira vez, o formulário não será alterado após as alterações dos dados JSON)

• Formulário Dinâmico (formulário dinâmico, o formulário é regenerado após as alterações dos dados JSON)

• Página de teste de permissão

• página de erro

• Formulário JSON (gerar dinamicamente um formulário analisando dados JSON)

Instalar e usar

Instalar

git clone https://github.com/wjkang/3YAdmin.git

npm install

Instalar serviço simulado em segundo plano

git clone -b 3YAdmin https://github.com/wjkang/quasar-admin-server.git

npm install

npm start

Correr

Desenvolvimento

npm start

Produção (Construir)

npm run build

Configuração

Copie e modifique diretamente a configuração gerada por react-react-app. Eles estão todos na pasta react-scripts. Atualmente, o antd está configurado para ser importado sob demanda, empacotado em pedaços e o AutoDllPlugin é usado. Você pode modificá-lo de acordo com suas próprias necessidades.

A configuração do modo de empacotamento requer a modificação de process.env.REACT_APP_LAYOUT_MODE nos arquivos builds.js e start.js.

Tutorial

Mais tarde, haverá tutoriais de uso detalhados e idéias de design de arquitetura de front-end para o sistema de gerenciamento de back-end com separação de front-end e back-end (incluindo vue e react. Se você gostar, poderá dar uma estrela).