Se você está procurando um modelo de administração do SPA para o seu próximo projeto, provavelmente veio ao lugar certo. AdminVUE é um modelo de administração de página única desenvolvido por Vue.js com .Net core 6 API. É coberto recursos mais comuns que você precisa para iniciar um projeto.
Em vez de desenvolver um projeto do zero, é sempre aconselhável começar com um produto já instalado e funcionando com o mínimo de esforço. A parte mais incrível deste modelo é que você tem cinco opções populares de conectividade de banco de dados Relacional aqui. Você tem flexibilidade para escolher o servidor Sql, Mysql, Sqlite, PostgreSql e Oracle 12c+.
Você está preso com a configuração de um painel de administração do SPA? O modelo de administração inicial do AdminVUE será a escolha certa para você.
Demonstração ao vivo
Documentação
Vários idiomas
Inicialmente, você terá cinco idiomas (inglês, espanhol, italiano, hindi e bangla) e, é claro, também poderá adicionar o idioma necessário.
Configurações robustas
Nas configurações do aplicativo, você tem configurações gerais, configurações de e-mail, configurações de cores, configurações de página de destino e configurações de texto de e-mail.
Documentação Detalhada
Uma documentação bem descrita para guiá-lo na configuração da plataforma Windows e Linux com todas as opções possíveis e links para download dos recursos necessários.
Fácil personalização
Tanto o projeto Client quanto o Api são modulares, em camadas e bem mantidos. O padrão de convenção de nomenclatura também é usado para tornar os códigos mais compreensíveis.
Gerenciar usuários
Inicialmente, você terá duas funções (Administrador e Usuário), mas fique à vontade para criar mais funções e menus atribuídos para gerenciar seus usuários.
Flexibilidade do banco de dados
Como este modelo usou injeção de dependência, você tem flexibilidade para escolher entre todos os bancos de dados relacionais populares, como sql server, mysql, oracle, progresql, sqlite etc.
Concentre-se na segurança
Você pode se sentir protegido contra todos os problemas indesejados, como injeção de SQL, ataque CSRF, ataque XSS, CORS etc. Este aplicativo usou autorização baseada em função e autenticação baseada em token fornecida pelo JWT.
Histórico
Tanto os logs de erro quanto os logs de navegação estão disponíveis para ajudá-lo a visualizar o que está acontecendo em seu sistema.
Aqui estão alguns pontos-chave que tornam o AdminVUE uma solução perfeita como kit inicial para o seu próximo projeto.
- Modelo de administração de página única.
- API separada e projeto CLIENT.
- Cinco opções de conectividade de banco de dados (Sql Server/Mysql/Oracle/SqLite/PostgreSql)
- Documentação da API do Swagger.
- Construa com o mais recente .Net core 6 para api.
- Construa com VueJs for client, o framework javascript progressivo mais rápido e melhor.
- Modelo de interface do usuário de design de material.
- Vuetify para interface do usuário.
- Nenhuma dependência de Jquery.
- Nenhuma dependência de arquivo sql
- Vuex para gerenciamento de estado.
- Vue Router para navegação.
- Axios para chamar Api.
- Núcleo EF como ORM.
- Barra de progresso em cada solicitação de API.
- Exporte dados em PDF, CSV e Excel.
- Gráfico exibido no painel usando chart.js
- Semeadura e Migração de Banco de Dados.
- Injeção de dependência.
- Lidar com páginas de erro HTTP (como 404.401.403 etc).
- Técnica de gerenciamento de CORS.
- Autenticação e autorização de API usando JWT.
- Estrutura de banco de dados eficiente.
- Guia rápido.
- Fácil documentação.
Características
- Autenticação de usuário
- Autorização do usuário
- Modo tela cheia
- Bloqueio de tela
- Notificação
- Perfil de usuário
- Redefinir senha
- verificação de e-mail
- Bochecha de tamanho de senha
- Carregamento de imagem de perfil
- Gráficos de painel (gráfico de linhas, gráfico de barras, gráfico de pizza)
- condição do usuário no painel
- Menu CRUD
- Grupo de menus CRUD
- CRUD do usuário
- CRUD da função do usuário
- histórico de navegação
- Atribuir menu ao grupo de menus
- Atribuir grupo de menus à função do usuário
- Configurações gerais (título do site, descrição, texto do rodapé)
- Configurações de cores (barra de aplicativos, rodapé, corpo)
- Manter históricos de login
- Exportar dados da tabela em PDF e Excel
- Painel de navegação dinâmico com base na função do usuário
Tecnologias usadas
- núcleo .NET 6
- EF Núcleo 6.0.0
- Sql Server/Mysql/Oracle/SqLite/PostgreSql
- Vue 2.6
- Vuetify 2.2
- Vuex 3.5
- Vue roteador 3.2
Guia rápido
O modelo AdminVUE tem dois projetos separados, ou seja, AdminClient e AdminApi.
- Abra o projeto AdminApi no código do Visual Studio. Em seguida, abra o arquivo appsettings.json e substitua a string de conexão pela sua.
- Abra o terminal no VS Code e escreva os comandos abaixo
- dotnet ef migrations adicionar inicial
- atualização do banco de dados dotnet ef
- corrida dotnet
Você deve ver sua API escutando em localhost:5001.
- Agora abra o AdminClient no VS Code. Abra o terminal e escreva
- npm instalar
- serviço de execução npm
Seu projeto será executado em localhost:8080.
Consulte a documentação on-line para obter ilustrações detalhadas.
Registros de alterações
11 March 2021 -- Version 1.0
- Initial Release
-----------------------------
20 May 2021 -- Version 1.1
- Save login history to DB
- Various chart (line chart, bar chart etc.) shown in dashboard using chart.js
- New options add on App Settings menu
27 Sep 2021 -- Version 1.2
-----------------------------
- Add progress bar to api request
- Export data to pdf & excel
- Add full screen mode
- Add screen lock
- Add notification
- Add browsing history
- Add pie chart
- Add footer text change option in app settings
29 Aug 2022 -- Version 1.3
-----------------------------
- Update to .Net core 6 from .Net core 5
- Add notification scroll bar
- Manage App versions
04 Mar 2023 -- Version 1.4
-----------------------------
- Add Language Option
- Add Landing Page
- Add different options on settings
Artigos Relacionados
