YoYoCms.AbpProjectTemplate

Site de demonstração

Vamos falar sobre este projeto primeiro. Assim como o título, é um framework desenvolvido com base em VUE+.NET. É também o framework ABP que os membros do grupo têm clamado por uma versão vue. Vamos dar uma olhada na página inicial primeiro:

É muito legal. Vou fornecer a você uma conta de demonstração.

Endereço de demonstração: http://vue.yoyocms.com/ Conta: demo Senha: bb123456 Claro, você também pode registrar uma conta para verificação.

introduzir

Primeiro, para os alunos que não conhecem o framework ABP, vamos explicar o que é o framework ABP:

ABP é a abreviatura de "Projeto Boilerplate ASP.NET (Projeto Boilerplate ASP.NET)". ASP.NET Boilerplate é um novo ponto de partida para o desenvolvimento de aplicativos WEB modernos usando as melhores práticas e tecnologias populares. Seu objetivo é se tornar uma estrutura de aplicativo WEB universal e um modelo de projeto. Framework ABP é uma estrutura de aplicativo baseada nas mais recentes tecnologias ASP.NET CORE, ASP.NET MVC e Web API. E usando estruturas e bibliotecas populares, fornece funções comuns fáceis de usar, como autorização, injeção de dependência, validação, tratamento de exceções, localização, registro, cache, etc. Arquitetura ABP implementa arquitetura multicamadas (camada de domínio, camada de aplicação, camada de infraestrutura e camada de apresentação), bem como design orientado a domínio (entidades, repositórios, serviços de domínio, serviços de aplicação, DTO, etc.). Boa infraestrutura também é implementada e fornecida para implementar melhores práticas, como injeção de dependência. O Template ABP cria facilmente modelos de inicialização para seus projetos. Inclui as estruturas e bibliotecas mais comumente usadas por padrão. Também permite escolher arquitetura de página única (Angularjs) ou multipágina, EntityFramework ou NHibernate como ORM. Visite o site oficial para saber mais.

estrutura

A estrutura do projeto selecionado desta vez é:

• Estrutura .net 4.6
• VUE + VUEX + VUE-ROUTER é uma tecnologia de separação de front-end e back-end, mas a separação não é muito pura devido ao design do ABP, se você deseja separar puramente o front-end e o front-end, é necessário. será um pouco problemático ao fazer a autorização, portanto o método token não é usado.

No artigo anterior [ABP Framework] Interception Usage of Dynamic Web Api, foi explicado como usar token para verificação de autorização. Atualmente, o método cookie ainda é usado para verificação. Mas isso não afeta os métodos de desenvolvimento front-end e back-end. Dê uma olhada na página de login:

Realização de função

• Entrar Registrar
• Comutação multilíngue
• Gerenciamento de mensagens
• Gerenciamento de locatários (multilocatário)
• gerenciamento de funções
• Sessão
• Autorização (gerenciamento de direitos)
• Gerenciamento de configurações
• Gerenciamento multilíngue
• Registro de auditoria
• WebApi dinâmico e outras funções, espero que você mesmo possa experimentar.

Se suas habilidades em .NET não são sólidas ou você deseja melhorá-las, ABP é a melhor estrutura de aprendizagem.

Descrição da pilha de tecnologia front-end:

####Framework usado pelo front end 1.vue
2.vuex
3.vue-roteador
4.jquery

Biblioteca de IU

1.elemento-ui
2. ondas
3.inicialização
4.BSBADMIN

Estrutura do projeto

• construir script construído por webpack
• configuração configuração de compilação do webpack
• Arquivos após compilação dist
• diretório de código-fonte src
  • arquivos de recursos globais de ativos
  • método público de estilo público comum
    • pacote de idiomas (temporariamente não utilizado)
    • classe de ferramenta utils
  • componentes componentes globais
  • filtros filtros
  • mixins armazenam vários estilos de atrevimento
  • configuração de roteamento do roteador
  • camada de solicitação de interface de serviço
  • storevuex
  • fornecedor armazena bibliotecas de terceiros
  • visualizações visualizar arquivo
  • Plug-in vue personalizado vuePlugin
• arquivos estáticos estáticos, o diretório compilado permanece inalterado

A seguir estão as palavras originais da equipe de front-end. Obrigado Huixin666 por dedicar seu tempo para melhorar a interface do vue.

Etapas de desenvolvimento

Antes do desenvolvimento, presumimos que você tenha uma base de habilidades básicas em es6 , sass , vue , vue-router e vuex .
Recomenda-se ler os conselhos de You Yuxi

Instale dependências de front-end

Insira o diretório Assets no Web项目

 $ npm i

Execute o projeto

Lembre-se de iniciar o plano de fundo primeiro

 $ npm run dev

webpack usará express para iniciar um servidor web com porta 8986

implantar

 $ npm run build

Este comando irá compilar todos os arquivos no diretório dist , consulte o diagrama de estrutura do projeto acima

1.Adicionar página

• Primeiro vá para src/views para criar um diretório de módulo.
  Por exemplo, atualmente adicionei um diretório chamado administration , que contém todas as páginas de gerenciamento do sistema. Cada módulo também pode conter diretórios components e assets , o que significa que os componentes e recursos nele contidos pertencem apenas ao módulo atual.
• Em seguida, adicione um Index.vue como página de roteamento pai para controlar todas as páginas deste módulo.
  Precisa prestar atenção ao papel de keep-alive
• Em seguida, adicione a página necessária, como User.vue
  Se você precisar obter dados, adicione um método chamado fetchData em methods . Neste método, você precisa chamar abp.view.setContentLoading(false) após obter os dados para fechar a camada de máscara de carregamento da área de conteúdo. (Você pode consultar User.vue)

2.Adicionar rota

• Entre no diretório src/router , adicione a pasta do módulo de roteamento e adicione um arquivo chamado index.js na pasta.
• Em seguida, registre as informações de roteamento adicionadas atualmente em src/router/index.js

3.Adicionar serviço

• Insira o diretório src/services e adicione o módulo correspondente à solicitação de interface. Por exemplo, os objetos relacionados à função são colocados em roleService.js Os objetos exportados pelo arquivo roleService.js correspondem a abp.services.yoyocms.role . A vantagem de utilizá-lo desta forma é que ele pode ser gerenciado e expandido uniformemente

A descrição acima é a situação básica da versão vue do ABP.

Endereço para baixar:

O endereço de código aberto da versão vue: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate O endereço de demonstração da versão vue: http://vue.yoyocms.com/ O endereço de código aberto da versão angularJS: https ://github.com/ltm0203/YoYoCms Endereço de demonstração da versão angularJS: http://www.yoyocms.com

Se você tiver boas sugestões ou comentários sobre bugs, registre um problema no github.

Ao mesmo tempo, também fizemos um gerador de projetos com funções semelhantes ao template oficial do ABP. A função será lançada no meio do ano, fique atento.