RazorSvelte
1.0.0
Note:
Il y a plusieurs autres cadres de composants d'interface utilisateur évalués, et enfin ce modèle est réglé avec Bootstrap.
Pour utiliser d'autres modèles, par exemple, le carbone ou l'interface utilisateur de matériau, voir les instructions d'installation ci-dessous dans ce fichier.
Il s'agit d'un modèle de projet et, en tant que tel, est constamment mis à jour avec des améliorations et de nouveaux composants ont besoin d'une application Web plus moderne et polyvalente.
Référentiel de modèles de projet contenant un modèle de modèle avec la configuration suivante:
chart - Wrapper pour chart.js.chart-box - Tableau avec titre et boutons de zoom complet et plein écran.data-grid - Grille de données avec la source de données distante qui utilise des tables bootstrap.modal - Wrapper pour le bootstrap modal.multiselect - Sélectionnez plusieurs SELECT avec la recherche et le parchemin virtuel.offcanvas - Emballage pour les Offcanvas Bootstrap.pager - Bootstrap Pager qui fonctionne avec le réseau de données.placeholder espace pour chargement d'espace réservé basé sur l'espace réservé bootstrap, principalement utilisé par d'autres composants pour gérer un état non initialisé.search-input - entrée de recherche simple avec une icône de recherche qui gère les délais de recherche et empêche plusieurs demandes de recherche.Pour voir des exemples d'utilisation pour ces composants, consultez ce projet.
Suivez ces étapes pour construire et exécuter l'application de démonstration Razorsvelte:
Téléchargez le dockerfile à partir de https://raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile (ou simplement exécuter wget https: // raw.githubusercontent.com / vb-consulting / razorsvelte / maître / dockerfile` à partir de l'invite de commande)
Ouvrez une invite de commande et accédez au dossier où vous avez enregistré le dockerfile
Exécutez les commandes suivantes:
docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest
Note:
Si vous essayez de vous connecter avec un fournisseur externe, vous serez redirigé vers la page d'erreur. Veuillez modifier
appsettings.jsonavec votre propre ID de fournisseur de clients et les secrets des clients et assurez-vous que l'application OAuth redirige vers `LocalHost: 5000`` - pour activer cette fonctionnalité.
/ : Page d'index - Afficher la valeur des accessoires externes Hello world from svelte et afficher les liens utiles/privacy - Exemple de page de confidentialité, affiche le titre H1 dans une page svelte passée de la page Razor ViewData./login - Afficher les boutons de connexion externes/authorized - Exemple de page autorisée protégée par l'attribut Authorize . Affiche les données utilisateur autorisées simples passées à partir de la page de rasoir./401 - Exemple de page non autorisée qui redirige lorsqu'un utilisateur non autorisé essaie d'accéder à la page avec l'attribut Authorize ./404 - Page introuvable pour les routes de serveur inconnues./spa Exemple de l'application de page unique (SPA) avec le composant de routeur client de hashtag qui affiche diverses itinéraires de manière SPA.Remarques importantes:
wwwroot et vous pouvez normalement les importer dans des pages de rasoir (ou toute autre pages).Svelte est une nouvelle approche radicale pour construire des interfaces utilisateur.
Alors que les cadres traditionnels comme React et Vue font la majeure partie de leur travail dans le navigateur - Svelte change qui fonctionne en une étape de compilation qui se produit lorsque vous créez votre application. Au lieu d'utiliser des techniques telles que le DOM virtuel diffingant, Svelte écrit du code qui met à jour chirurgicalement le DOM lorsque l'état de votre application change.
Svelte est un compilateur qui produit une sortie JavaScript petite et très optimisée.
Svelte regroupe également votre balisage dans la sortie du compilateur, ce qui est encore plus petit que ce serait le balisage normal.
La sortie du compilateur Svelte est ensuite mise en cache dans le navigateur, ce qui rend chaque demande ultérieure encore plus rapidement car le navigateur n'a même pas à télécharger ce balisage à nouveau.
Étant donné que Svelte produit du JavaScript à la vanille pure, il n'y a pas de frais généraux d'exécution. Cela signifie également que vous pouvez importer et regrouper (avec Rollup) et un framework d'exécution dont vous pourriez avoir besoin, peut-être pour réutiliser les anciens composants de l'interface utilisateur que vous pourriez avoir. Par exemple, code hérité avec jQuery.
Svelte est devenu le cadre Web le plus aimé des développeurs au cours d'une année de 2021, selon le Stackoverflow Survey.
Rollup est déjà préconfiguré pour s'exécuter avec le projet ASP.NET, compiler, bosser et supprimer les modules inutilisés, puis sortir dans votre wwwroot de votre projet ASP.NET.
Vous pouvez également continuer à utiliser les pages de rasoir ASP.NET normales (ou MVC) comme vous le feriez normalement.
Le résultat est une application web **** très ** optimisée *** avec:
Et, vous pouvez combiner le rendu côté serveur avec un rendu frontal optimisé.
Mieux encore - vous pouvez éviter la configuration fastidieuse en utilisant ce modèle.
$ 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
L'exemple de jQuery n'a qu'une seule page qui montre comment regrouper jQuery avec svelte et rollup.
$ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run
Note:
degit télécharge et décompressez la dernière version du contenu d'un repo git sans initialisation du référentiel (contrairement à git clone par exemple).Cliquez simplement sur le bouton Big Green Utilisez ce modèle .
Si vous voulez un autre modèle plutôt que le modèle principal (comme jQuery ou Net5 Exemple) - modifiez d'abord la branche.
Chaque page de rasoir a deux nouveaux fichiers imbriqués:
MyPage.rollup.config.js - Fichier de configuration ROLUP pour cette page.MyPage.entry.ts - Fichier de module TypeScript Point TypeScript pour cette page.Note:
MyPage.cshtml (via les paramètres de fichiers de projet) afin que des IDE comme VisualStudio et JetBrains Rider les nichent visuellement.*.cshtml et une valeur de ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js . Le fichier de configuration importe une configuration globale à partir de Scripts/rollup. config` et définit les valeurs suivantes:
wwwroot / build plus entry module name with the extension JS`).wwwroot / build plus entry module name with l'extension CSS.Voir les exemples de pages de ce dépôt.
Le module TypeScript d'entrée importe un fichier svelte pour cette page et renvoie l'application Svelte.
Dans ce modèle, tous les exemples utilisent document.body comme cible d'application. Cela signifie que les Pages/Shared/_Layout.cshtml ne contient qu'un corps.
Le contenu corporel est rendu par la page de rasoir elle-même et le composant svelte .
Chaque page de rasoir compatible Svelte doit également inclure un JavaScript et CSS de sortie (le cas échéant), par exemple, pour la page d'index:
@section HeadSection {
< link href = " ~/build/index.css " asp-append-version = " true " rel = " stylesheet " />
< script defer src = " ~/build/index.js " asp-append-version = " true " ></ script >
} Tous les composants Svelte et modules supplémentaires sont dans DIR séparé App .
Chaque composant de fichier svelte dans une racine est utilisé par la page de rasoir associée comme décrit ci-dessus. Chacun d'eux rendra l'en-tête, la section principale et le pied de page dans cet exemple.
Cela signifie que la majorité du balisage est produite par le compilateur Svelte dans un seul fichier JavaScript, pour chaque page, avec une taille moyenne d'environ 18 Ko.
Le rendu est instantané et la sortie JS est mise en cache sur le client pour réduire la taille du téléchargement.
Commandes dotnet à utiliser avec les extensions de l'interface utilisateur des scripts NPM (exécutez à partir de votre IDE):
dotnet-run pour dotnet run .dotnet-clean : pour dotnet clean .dotnet-build : pour dotnet build .Support de style SCSS
fe-scss-build : Créer des fichiers CSS globaux wwwroot/style.css au format compressé à partir des fichiers SCSS App/scss/style.scss qui importent.fe-scss-watch : Créez des fichiers CSS globaux wwwroot/style.css au format non compressé à partir de fichiers SCSS App/scss/style.scss qui importe et reste en mode récursif de montre. Créer une prise en charge de la page Index
fe-build : Créer JavaScript pour la page Index . La sortie est wwwroot/build/index.js dans un format compressé sans aucune cartes source. Le fichier JavaScript ne peut pas être débogué. C'est pour la productionfe-watch : construire JavaScript pour la page Index . La sortie est wwwroot/build/index.js dans un format non compressé avec les cartes source. Le fichier JavaScript peut être débogué. Ce n'est pas pour la production. Le processus continuera de surveiller les modifications de fichiers et de reconstruire en conséquence. Ceci est utile pour le processus de développement. Remarque: Pour créer ou regarder d'autres pages, vous pouvez utiliser cette ligne de commande npm run fe-build <page> ou npm run fe-build <page> , où le nom de la page est un fichier de configuration minuscule sans extensions. Par exemple, index pour ./Pages/Index.rollup.config.js , login pour ./Pages/Login.rollup.config.js , etc.
Toutes les pages
fe-build-all : frontend build-all. Appelle Scripts/build-all.js Script pour créer et compiler toutes les pages et tous les feuilles de style.fe-watch-all: Frontend watch-all. Calls Scripts / Watch-all.js` Script pour construire, compiler et regarder toutes les pages et toutes les feuilles de style.Autre:
npm-upgrade : améliore toutes les dépendances NPM à la dernière version. Utilisez-le avec prudence. Pour pouvoir exécuter cette commande, la dépendance globale npm-check-updates est requise. Utilisez npm install -g npm-check-updates pour installer.code : ouvre une instance de code Visual Studiobuild-urls - invoque le script .net c # qui crée automatiquement le fichier shared/urls.ts contenant toutes les URL d'application. Créez le backend, exécute la commande de script et existe. Cette commande utilisera la touche de configuration UrlBuilderPath .build-models - Invoque le script .net C # qui crée automatiquement le fichier shared/models.d.ts contenant toutes les interfaces de modèle à partir de l'espace de noms du modèle. Créez le backend, exécute la commande de script et existe. Cette commande créera un fichier de type TypeScript dans la touche de configuration TsModelsFilePath ( shared/models.d.ts ) qui contiendra toutes les classes publiques C # traduites en interfaces TypeScript, qui sont présentes dans l'espace de noms sous la touche de configuration de l'espace ModelNamespace ( RazorSvelte.SampleData ). Oui.
Vous pouvez utiliser votre console de débogage de navigateur pour le débogage comme vous le feriez normalement. Le JavaScript doit avoir un fichier .map associé.
Pour créer un fichier .map Exécuter le fichier rollup et Configuration comme commandes d'argument avec le commutateur -w . Par exemple:
rollup -c ./Pages/Index.cshtml.js -w
Cette commande crée un fichier wwwroot/build/index.js non compressé avec une carte associée qui permet le débogage de votre navigateur.
Dans l'onglet Sources de navigateur, vous verrez votre fichier TypeScript App/index.svetle que vous pouvez déboguer normalement.
De plus, cette commande continuera de regarder vos fichiers source et se développera progressivement au fur et à mesure que vous continuez à le modifier.
Oui.
N'utilisez pas la commande "Build All". Au lieu de cela, utilisez une construction incrémentielle comme décrit ci-dessus dans la question précédente.
Non, vous n'avez pas besoin d'un serveur externe.
Ce projet utilise un serveur Web .NET intégré.
Cependant, vous devrez installer NodeJS et NPM pour exécuter les commandes Rollup.
Vous devrez créer une application de connexion sur ces services pour récupérer l'ID client et les valeurs secrètes du client et les coller dans les fichiers de configuration.
Voir AppSettings.json pour plus de détails.
Une fois l'autorisation des fournisseurs externes passés, l'application utilisera JWT Auth pour les identités déjà confirmées par les fournisseurs externes. Ainsi, vous devrez configurer un JwtConfigSection avec les valeurs:
Secret - longue chaîne aléatoire secrèteIssuer - émetteur de jeton JWTAudience - public token JWTExpirationMin - Temps d'expiration du jeton JWT en quelques minutesClockSkewMin - Ajoute au temps d'expiration du jeton JWT, réglé sur null pour éviter.RefreshTokenExpirationMin - Rafraîchir les minutes d'expiration du jeton. Réglé sur NULL pour éviter d'utiliser des jetons de rafraîchissement. S'il est utilisé, il doit être plus long que l'expiration du jeton pour prendre effet.CookieExpirationMin - Expiration des biscuits en quelques minutes. Il doit être le plus long que l'expiration du jeton ou l'expiration de jeton de rafraîchissement si elle est utilisée.CookieName - Nom du cookie de sécurité. Remarque: Si vous utilisez l'option de rafraîchissement de jetons, vous souhaiterez peut-être réimplémenter la classe RefreshTokenRepository pour utiliser la base de données ou une sorte de cache permanent, au lieu d'un dictionnaire en mémoire.
Le routage des pages est toujours géré sur le serveur par le serveur Web ASP.NET. Cela signifie que ce projet n'est pas une application à une seule page (SPA), bien que l'ensemble du balisage soit contenu dans la sortie Svelte, ce qui signifie qu'il est mis en cache sur le client d'une manière SPA.
Cependant, l'un des routes du serveur /spa est un exemple de l'application SPA. Cette page utilise svelte-spa-router et affiche diverses vues de spa avec les itinéraires de hashtag.
Oui, par exemple, en utilisant des entrées cachées.
<input id="title" type="hidden" value="@ViewData["Title"]" /> dans votre page. import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;En plus d'être beaucoup plus facile et plus rapide à développer et à maintenir, oui, c'est plus rapide. L'ensemble du balisage est contenu et minifié dans des fichiers JavaScript compilés à partir de composants Svelte qui sont ensuite téléchargés la première fois puis mis en cache pour chaque nouvelle demande.
Cela réduit considérablement le trafic réseau pour votre application.
Le balisage est ensuite rendu instantanément lorsque la page se charge.
Copyright (C) Vedran Bilopavlović - VB Consulting et VB Software 2022 Ce code source est sous licence MIT.
