RazorSvelte
1.0.0
Observação:
Existem várias outras estruturas de componentes da interface do usuário avaliadas e, finalmente, esse modelo é resolvido com o Bootstrap.
Para usar outros modelos, por exemplo, UI de carbono ou material, consulte as instruções de instalação abaixo neste arquivo.
Este é um modelo de projeto e, como tal, está sendo atualizado constantemente com melhorias e novos componentes precisavam de um aplicativo web mais moderno e versátil.
Repositório de modelo de projeto que contém um projeto de modelo com a seguinte configuração:
chart - Wrapper for Chart.js.chart-box gráfico com botões de título e zoom de tela cheia.data-grid - grade de dados com a fonte de dados remota que usa tabelas de bootstrap.modal - invólucro para o modal de bootstrap.multiselect - Múltiplos suspensos Selecionar com pesquisa e rolagem virtual.offcanvas - invólucro para o bootstrap offcanvas.pager - bootstrap pager que funciona com dados de dados.placeholder - Carregando espaço reservado com base no espaço reservado de bootstrap, usado principalmente por outros componentes para gerenciar um estado não inicializado.search-input - entrada simples de pesquisa com um ícone de pesquisa que lida com o tempo limite de pesquisa e evita várias solicitações de pesquisa.Para ver exemplos de uso para esses componentes, consulte este projeto.
Siga estas etapas para construir e executar o RazorSvelte Demo Application:
Faça o download do Dockerfile em https://raw.githubusercontent.com/vb-consulting/razorvevelte/master/dockerfile (ou apenas execute wget https: // raw.githubuserContent.com/vb-consulting/razorte/master/dockerfile`
Abra um prompt de comando e navegue até a pasta onde você salvou o Dockerfile
Execute os seguintes comandos:
docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest
Observação:
Se você tentar fazer login com um provedor externo, será redirecionado para a página de erro. Por favor, edite
appsettings.jsoncom o seu próprio ID do fornecedor de clientes e segredos do cliente e verifique se o aplicativo OAuth redireciona para `localhost: 5000`` - para ativar esse recurso.
/ : Página de índice - mostre valor de adereços externos Hello world from svelte e exibir links úteis/privacy - Página de amostra de privacidade, mostra o título H1 em uma página esbelta passada do Razor Page ViewData./login - Mostre botões de login externos/authorized - amostra de página autorizada protegida com o atributo Authorize . Exibe dados simples do usuário autorizados passados da página de barbear./401 - Exemplo de página não autorizada que redireciona quando um usuário não autorizado tenta acessar a página com o atributo Authorize ./404 - Página não encontrada para rotas de servidor desconhecido./spa Exemplo do aplicativo de página única (SPA) com o componente do roteador de clientes de hashtag que exibe várias rotas de maneira spa.Notas importantes:
wwwroot e você normalmente pode importá -los para as páginas de barbear (ou em qualquer outra página).Sitete é uma nova abordagem radical para criar interfaces de usuário.
Enquanto as estruturas tradicionais como React e Vue fazem a maior parte de seu trabalho no navegador - mudanças esbeltas que funcionam em uma etapa compilada que acontece quando você constrói seu aplicativo. Em vez de usar técnicas como o Virtual Diffing, o SVELTE escreve código que atualiza cirurgicamente o DOM quando o estado do seu aplicativo mudar.
Sitete é um compilador que produz saída JavaScript pequena e muito otimizada.
O esbelto também agrupa sua marcação na saída do compilador, o que é ainda menor do que o que seria a marcação normal.
A saída SVELTE COMPILADOR é então armazenada em cache no navegador, o que torna cada solicitação subsequente ainda mais rápida, pois o navegador nem precisa baixar essa marcação novamente.
Como Sovete produz JavaScript de baunilha pura, não há sobrecarga de tempo de execução. Isso também significa que você pode importar e pacote (com rollup) e estrutura de tempo de execução necessária, talvez para reutilizar os componentes antigos da interface do usuário que você pode ter. Por exemplo, código legado com jQuery.
A Svelte se tornou a estrutura da web mais amada para os desenvolvedores em um ano de 2021, de acordo com a Pesquisa Stackoverflow.
O Rollup já está pré-configurado para executar com o projeto ASP.NET, compilar, agrupar e remover módulos não utilizados e, em seguida, emitir seu wwwroot do seu projeto ASP.NET.
Você também pode continuar usando as páginas normais do ASP.NET RAZOR (ou MVC) como normalmente.
O resultado é um aplicativo ***** **** *** com:
E você pode combinar a renderização do lado do servidor com a renderização de front-end esbelta otimizada.
O melhor de tudo - você pode evitar configurações tediosas usando este modelo.
$ npx degit vb-consulting/RazorSvelte
> cloned vb-consulting/RazorSvelte#HEAD
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#carbon
> cloned vb-consulting/RazorSvelte#carbon
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#svelte-material-ui
> cloned vb-consulting/RazorSvelte#svelte-material-ui
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#net5
> cloned vb-consulting/RazorSvelte#net5
$ cd RazorSvelte
$ npm install
...
$ dotnet run
O exemplo jQuery possui apenas uma página que demonstra como pacote, use jQuery com esbelto e rollup.
$ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run
Observação:
degit simplesmente baixar e descompactar a versão mais recente do conteúdo de um repo Git sem inicialização do repositório (ao contrário git clone , por exemplo).Basta clicar no grande botão verde, use este modelo .
Se você deseja algum outro modelo em vez do modelo principal (como JQuery ou Net5 Exemplo) - altere a filial primeiro.
Cada página de barbear possui dois novos arquivos aninhados:
MyPage.rollup.config.js - arquivo de configuração de rollup para esta página.MyPage.entry.ts - Arquivo do módulo de ponto de entrada do ponto de entrada para esta página.Observação:
MyPage.cshtml (via configurações de arquivo de projeto) para que o IDES como o VisualStudio e o JetBrains Rider os aninhasse visualmente.*.cshtml e um valor de ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js . O arquivo de configuração importa a configuração global de Scripts/rollup. Config` e define os seguintes valores:
wwwroot /build plus entry module name with the extensão JS`).wwwroot /build plus entry module name with a extensão CSS.Veja as páginas de amostra neste repositório.
O módulo digital de entrada importa um arquivo esbelto para esta página e retorna o aplicativo esbelto.
Neste modelo, todos os exemplos usam document.body como destino do aplicativo. Isso significa que as Pages/Shared/_Layout.cshtml contém apenas um corpo.
O conteúdo corporal é renderizado pela própria página de barbear e pelo componente svelte .
Cada página de barbear esbelta também deve incluir um JavaScript de saída e CSS (se houver), por exemplo, para a página de índice:
@section HeadSection {
< link href = " ~/build/index.css " asp-append-version = " true " rel = " stylesheet " />
< script defer src = " ~/build/index.js " asp-append-version = " true " ></ script >
} Todos os componentes esbeltos e módulos adicionais estão no diretor App separado.
Cada componente de arquivo svelte em uma raiz é usado pela página de barbear associada, conforme descrito acima. Cada um deles renderá o cabeçalho, a seção principal e o rodapé neste exemplo.
Isso significa que a maioria da marcação é produzida pelo compilador esbelto em um único arquivo JavaScript, para cada página, com um tamanho médio de cerca de 18kb.
A renderização é instantânea e a saída JS é armazenada em cache no cliente para reduzir o tamanho do download.
Comandos DOTNET para uso com extensões de interface do usuário do NPM Scripts (execute a partir do seu IDE):
dotnet-run PARA dotnet run .dotnet-clean : Para dotnet clean .dotnet-build : Para dotnet build .Suporte ao estilo SCSS
fe-scss-build : construir arquivos CSS globais wwwroot/style.css em formato compactado a partir de arquivos scss App/scss/style.scss que importa.fe-scss-watch : construir arquivos CSS globais wwwroot/style.css em formato não compactado a partir de arquivos SCSS App/scss/style.scss que importa e permanece em um modo recursivo de relógio. Crie suporte para a página de Index
fe-build : construa JavaScript para a página de Index . A saída é wwwroot/build/index.js em um formato compactado sem mapas de origem. O arquivo JavaScript não pode ser depurado. Isto é para produçãofe-watch : construa JavaScript para a página de Index . A saída é wwwroot/build/index.js em um formato não compactado com os mapas de origem. O arquivo JavaScript pode ser depurado. Isto não é para produção. O processo continuará monitorando as alterações de arquivo e reconstruirá de acordo. Isso é útil para o processo de desenvolvimento. NOTA: Para criar ou assistir a outras páginas, você pode usar esta linha de comando npm run fe-build <page> ou npm run fe-build <page> , onde o nome da página é um arquivo de configuração em minúsculas sem extensões. Por exemplo, index para ./Pages/Index.rollup.config.js , login para ./Pages/Login.rollup.config.js , etc.
Todas as páginas
fe-build-all : Build-All Frontend. Scripts Scripts/build-all.js para criar e compilar todas as páginas e todas as folhas de estilo.fe-watch-all: Frontend watch-all. Calls Scripts/Watch-all.js` Script para criar, compilar e assistir a todas as páginas e todas as folhas de estilo.Outro:
npm-upgrade : Atualize todas as dependências do NPM para a versão mais recente. Use isso com cautela. Para poder executar esse comando, a dependência global npm-check-updates é necessária. Use npm install -g npm-check-updates para instalar.code : abre uma instância do código do Visual Studiobuild-urls - Invokes .NET C# Script que cria automaticamente o arquivo shared/urls.ts contendo todos os URLs de aplicativo. Construa back -end, executa o comando de script e existe. Este comando usará a tecla de configuração UrlBuilderPath .build-models - Invokes .NET C# Script que cria automaticamente o arquivo shared/models.d.ts contendo todas as interfaces do modelo do espaço para nome do modelo. Construa back -end, executa o comando de script e existe. Este comando criará um arquivo de texto tipyscript definido na chave de configuração TsModelsFilePath ( shared/models.d.ts ) que conterá todas as classes públicas C# traduzidas para as interfaces tipadas, que estão presentes no espaço de nome na tecla de configuração ModelNamespace ( RazorSvelte.SampleData ). Sim.
Você pode usar seu console de depuração do navegador para depuração como faria normalmente. O JavaScript precisa ter um arquivo .map associado.
Para criar um arquivo .map rollup e arquivo de configuração como comandos de argumento com o switch -w . Por exemplo:
rollup -c ./Pages/Index.cshtml.js -w
Este comando cria um arquivo wwwroot/build/index.js não compactado com um mapa associado que permite a depuração no seu navegador.
Na guia Fontes do navegador, você verá o seu arquivo App/index.svetle TypeScript que você pode depurar normalmente.
Além disso, esse comando continuará assistindo seus arquivos de origem e aumentará de forma incremental à medida que você continuar a alterá -lo.
Sim.
Não use o comando "Build All". Em vez disso, use a construção incremental, conforme descrito acima na pergunta anterior.
Não, você não precisa de um servidor externo.
Este projeto usa um servidor Web .NET interno.
No entanto, você precisará ter o NodeJS e o NPM instalados para executar comandos de rollup.
Você precisará criar um aplicativo de login nesses serviços para recuperar o ID do cliente e os valores secretos do cliente e colá -los nos arquivos de configuração.
Consulte AppSsettings.json para mais detalhes.
Depois que a autorização de fornecedores externos for aprovada, o aplicativo usará a autenticação JWT para identidades já confirmadas pelos fornecedores externos. Então, você terá que configurar um JwtConfigSection com os valores:
Secret - Secret Secret Random StringIssuer - emissor de token jwtAudience - Audiência JWTExpirationMin - Tempo de validade do token JWT em minutosClockSkewMin - adiciona ao tempo de validade do token JWT, definido como NULL para evitar.RefreshTokenExpirationMin - Atualizar minutos de expiração do token. Defina como nulo para evitar o uso de tokens de atualização. Se for usado, deve ser mais longo que a expiração do token para entrar em vigor.CookieExpirationMin - Expiração de biscoitos em minutos. Deve ser mais longo que a expiração do token ou a expiração do token, se usada.CookieName - nome do cookie de segurança. NOTA: Se estiver usando a opção de atualização do token, convém reimplementar a classe RefreshTokenRepository para usar o banco de dados ou algum tipo de cache permanente, em vez de um dicionário de memória.
O roteamento da página ainda é tratado no servidor pelo servidor Web ASP.NET. Isso significa que este projeto não é um aplicativo de página única (SPA), embora toda a marcação esteja contida na saída esbelta, o que significa que está em cache no cliente de maneira spa.
No entanto, uma das rotas do servidor /spa é um exemplo do aplicativo SPA. Esta página usa svelte-spa-router e mostra várias visualizações de spa com as rotas de hashtag.
Sim, por exemplo, usando entradas ocultas.
<input id="title" type="hidden" value="@ViewData["Title"]" /> na sua página. import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;Além de ser muito mais fácil e rápido de desenvolver e manter, sim, é mais rápido. Toda a marcação está contida e minificada dentro de arquivos JavaScript compilados de componentes esbeltos que são baixados na primeira vez e depois armazenados em cache para cada nova solicitação.
Isso reduz significativamente o tráfego de rede para o seu aplicativo.
A marcação é renderizada instantaneamente quando a página carrega.
Copyright (C) Vedran Bilopavlović - Software VB Consulting e VB 2022 Este código -fonte é licenciado sob a licença do MIT.
