RazorSvelte
1.0.0
ملحوظة:
هناك العديد من أطر عمل مكونات واجهة المستخدم الأخرى التي تم تقييمها ، وأخيراً يتم تسوية هذا القالب باستخدام bootstrap.
لاستخدام قوالب أخرى ، على سبيل المثال ، واجهة مستخدم الكربون أو المواد ، راجع تعليمات التثبيت أدناه في هذا الملف.
هذا قالب للمشروع ، وبالتالي يتم تحديثه باستمرار مع التحسينات والمكونات الجديدة التي تحتاج إلى تطبيق ويب أكثر حداثة وتنوعا.
مستودع قوالب المشروع يحتوي على مشروع قالب مع الإعداد التالي:
chart - غلاف للمخطط.chart-box -الرسم البياني مع العنوان وأزرار التكبير على الشاشة كاملة.data-grid - شبكة البيانات مع مصدر البيانات عن بُعد الذي يستخدم جداول bootstrap.modal - غلاف ل bootstrap مشروط.multiselect - منسدلة متعددة حدد مع البحث والتمرير الظاهري.offcanvas - غلاف ل Bootstrap Offcanvas.pager - Bootstrap Pager التي تعمل مع شبكة البيانات.placeholder - صاحب نائب تحميل استنادًا إلى العنصر النائب في Bootstrap ، ويستخدمه معظمها من قبل مكونات أخرى لإدارة حالة غير معروفة.search-input - إدخال بحث بسيط مع أيقونة البحث التي تتولى مهلة البحث وتمنع طلبات البحث المتعددة.لرؤية أمثلة الاستخدام لهذه المكونات انظر هذا المشروع.
اتبع الخطوات هذه لبناء وتشغيل تطبيق Razorsvelte التجريبي:
قم بتنزيل Dockerfile من https://raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile (أو فقط تشغيل wget https: // raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile من الأولية
افتح موجه الأوامر وانتقل إلى المجلد حيث قمت بحفظ Dockerfile
قم بتشغيل الأوامر التالية:
docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest
ملحوظة:
إذا حاولت تسجيل الدخول باستخدام مزود خارجي ، فسيتم إعادة توجيهك إلى صفحة الخطأ. يرجى تحرير
appsettings.jsonمع معرف مزود العميل الخاص بك وأسرار العميل والتأكد من إعادة توجيه تطبيق OAuth إلى "LocalHost: 5000`` - لتمكين هذه الميزة.
/ : صفحة الفهرس - إظهار القيمة من الدعائم الخارجية Hello world from svelte وعرض روابط مفيدة/privacy - صفحة عينة الخصوصية ، تعرض عنوان H1 في صفحة سفيلتي تم تمريرها من Razor Page ViewData./login - إظهار أزرار تسجيل الدخول الخارجية/authorized - نموذج صفحة معتمدة محمية مع سمة Authorize . يعرض بيانات المستخدم المعتمدة البسيطة التي تم تمريرها من صفحة الحلاقة./401 - عينة من صفحة غير مصرح بها تعيد التوجيه عندما يحاول مستخدم غير مصرح به الوصول إلى الصفحة مع سمة Authorize ./404 - لم يتم العثور على صفحة لطرق الخادم غير المعروفة./spa على تطبيق الصفحة الواحدة (SPA) مع مكون جهاز توجيه عميل علامة التجزئة التي تعرض طرقًا مختلفة بطريقة سبا.ملاحظات مهمة:
wwwroot ويمكنك عادة استيرادها إلى صفحات الحلاقة (أو أي صفحات أخرى).Svelte هو نهج جديد جذري لبناء واجهات المستخدم.
في حين أن الأطر التقليدية مثل React و Vue تقوم بكميات كبيرة من عملهما في المتصفح - يتحول Svelte الذي يعمل إلى خطوة ترجمة تحدث عند إنشاء تطبيقك. بدلاً من استخدام تقنيات مثل DOM DIFFING ، يكتب Svelte الكود الذي يقوم بتحديث DOM جراحياً عند تغيير حالة التطبيق الخاص بك.
Svelte هو برنامج التحويل البرمجي الذي ينتج إخراج JavaScript صغير ومحسّن للغاية.
يقوم Svelte بتجميع العلامات الخاصة بك في إخراج البرمجيات أيضًا ، وهو أصغر مما سيكون عليه العلامات العادية.
ثم يتم تخزين ناتج برنامج التحويل البرمجي Svelte في المتصفح مما يجعل كل طلب لاحق أسرع نظرًا لأن المتصفح لا يتعين عليه حتى تنزيل هذا الترميز مرة أخرى.
نظرًا لأن Svelte ينتج فانيليا جافا سكريبت النقي ، فلا يوجد في وقت التشغيل. هذا يعني أيضًا أنه يمكنك استيراد وحزمة (مع Rollup) وإطار وقت التشغيل الذي قد تحتاجه ، ربما لإعادة استخدام مكونات واجهة المستخدم القديمة التي قد تكون لديك. على سبيل المثال ، رمز Legacy مع jQuery.
أصبح Svelte إطار عمل الويب الأكثر محبوبًا للمطورين في عام 2021 ، وفقًا لمسح Stackoverflow.
تم تكوين Rollup بالفعل لتشغيله مع مشروع ASP.NET ، وتجميع ، وتجمع ، وإزالة الوحدات غير المستخدمة ، ثم الإخراج في wwwroot الخاص بك من مشروع ASP.NET الخاص بك.
يمكنك أيضًا الاستمرار في استخدام صفحات Razor ASP.NET العادية (أو MVC) كما تفعل عادة.
والنتيجة هي تطبيق ويب محسّن ** *** مع:
ويمكنك الجمع بين تقديم جانب الخادم مع تقديم الأمامي المحسّن.
أفضل ما في الأمر - يمكنك تجنب التكوين الشاق باستخدام هذا القالب.
$ 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
يحتوي مثال jQuery على صفحة واحدة فقط توضح كيفية استخدام jQuery مع Svelte و Rollup.
$ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run
ملحوظة:
degit فقط تنزيل ببساطة وإلغاء أحدث إصدار من محتويات Git Repo دون تهيئة مستودع (على عكس git clone على سبيل المثال).فقط انقر على الزر الأخضر الكبير استخدم هذا القالب .
إذا كنت تريد بعض النماذج الأخرى بدلاً من القالب الرئيسي (مثل jQuery أو Net5 مثال) - قم بتغيير الفرع أولاً.
تحتوي كل صفحة حلاقة على ملفان متداخلان جديدان:
MyPage.rollup.config.js - ملف تكوين Rollup لهذه الصفحة.MyPage.entry.ts - ملف وحدة الإدخال TypeScript لهذه الصفحة.ملحوظة:
MyPage.cshtml (عبر إعدادات ملف المشروع) بحيث تعشق IDEs مثل VisualStudio و JetBrains Rider بصريًا.*.cshtml وقيمة ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js . يستورد ملف التكوين التكوين العالمي من Scripts/rollup. config` وتعيين القيم التالية:
wwwroot /build plus entry module name with the امتداد JS`).wwwroot /build plus entry module name with امتداد CSS`.انظر عينة صفحات في هذا الريبو.
تستورد وحدة TypeScript Entry TypeScript ملف Svelte لهذه الصفحة وإرجاع تطبيق Svelte.
في هذا القالب ، تستخدم جميع الأمثلة document.body كهدف للتطبيق. هذا يعني أن Pages/Shared/_Layout.cshtml تحتوي فقط على جسم.
يتم تقديم محتوى الجسم بواسطة صفحة الحلاقة نفسها ومكون svelte .
يجب على كل صفحة حلاقة ممكّنة أيضًا بتضمين إخراج JavaScript و CSS (إن وجدت) ، على سبيل المثال ، لصفحة الفهرس:
@section HeadSection {
< link href = " ~/build/index.css " asp-append-version = " true " rel = " stylesheet " />
< script defer src = " ~/build/index.js " asp-append-version = " true " ></ script >
} جميع مكونات Svelte والوحدات الإضافية موجودة في تطبيق App منفصل.
يتم استخدام كل مكون ملف svelte في جذر بواسطة صفحة الحلاقة المرتبطة كما هو موضح أعلاه. كل واحد منهم سيجعل الرأس ، القسم الرئيسي ، وتذييل في هذا المثال.
هذا يعني أن غالبية الترميز يتم إنتاجها بواسطة برنامج التحويل البرمجي Svelte في ملف JavaScript واحد ، لكل صفحة ، بحجم متوسط حوالي 18 كيلو بايت.
التقديم فوري ويتم تخزين ناتج JS على العميل لتقليل حجم التنزيل.
أوامر dotnet للاستخدام مع ملحقات واجهة مستخدم NPM Scripts (تشغيل من IDE):
dotnet-run لـ dotnet run .dotnet-clean : dotnet clean .dotnet-build : لبناء dotnet build .دعم التصميم SCSS
fe-scss-build : قم ببناء ملفات CSS العالمية wwwroot/style.css بتنسيق مضغوط من ملفات SCSS App/scss/style.scss التي تستورد.fe-scss-watch : قم بإنشاء ملفات CSS العالمية wwwroot/style.css بتنسيق غير مضغوط من App/scss/style.scss التي تستورد وتبقى في وضع العودية المراقبة. بناء دعم صفحة Index
fe-build : بناء JavaScript لصفحة Index . الإخراج هو wwwroot/build/index.js بتنسيق مضغوط دون أي خرائط مصدر. لا يمكن تصحيح ملف JavaScript. هذا للإنتاجfe-watch : بناء JavaScript لصفحة Index . الإخراج هو wwwroot/build/index.js بتنسيق غير مضغوط مع خرائط المصدر. يمكن تصحيح ملف JavaScript. هذا ليس للإنتاج. ستستمر العملية في مراقبة تغييرات الملف وإعادة البناء وفقًا لذلك. هذا مفيد لعملية التطوير. ملاحظة: لإنشاء أو مشاهدة صفحات أخرى ، يمكنك استخدام سطر الأوامر هذا npm run fe-build <page> أو npm run fe-build <page> ، حيث يكون اسم الصفحة عبارة عن ملف تكوين صغير بدون امتدادات. على سبيل المثال index ./Pages/Index.rollup.config.js ، login لـ ./Pages/Login.rollup.config.js ، إلخ.
جميع الصفحات
fe-build-all : Frontend Build-All. Scripts/build-all.js Script لإنشاء وتجميع جميع الصفحات وجميع أوراق الأنماط.fe-watch-all: Frontend watch-all. Calls Scripts/Watch-All.js` fe-watch-all: Frontend watch-all. Calls لبناء وتجميع ومشاهدة جميع الصفحات وجميع أوراق الأنماط.آخر:
npm-upgrade : ترقية جميع تبعيات NPM إلى أحدث إصدار. استخدم هذا بحذر. لتكون قادرًا على تشغيل هذا الأمر ، يلزم تبعية التبعية العالمية npm-check-updates . استخدم npm install -g npm-check-updates للتثبيت.code : يفتح مثيلًا واحدًا من رمز Visual Studiobuild-urls - يستدعي .NET C# البرنامج النصي الذي يقوم تلقائيًا بإنشاء ملف shared/urls.ts يحتوي على جميع عناوين URL للتطبيق. يبني الواجهة الخلفية ، ينفذ أمر البرنامج النصي ويوجد. سيستخدم هذا الأمر مفتاح تكوين UrlBuilderPath .build-models - استدعاء البرنامج النصي .NET C# الذي يقوم تلقائيًا بإنشاء ملف shared/models.d.ts يحتوي على جميع واجهات النموذج من مساحة اسم النموذج. يبني الواجهة الخلفية ، ينفذ أمر البرنامج النصي ويوجد. سيقوم هذا الأمر بإنشاء ملف TypeScript الذي تم تعيينه في مفتاح التكوين TsModelsFilePath ( shared/models.d.ts ) الذي سيحتوي على جميع الفئات العامة المترجمة إلى واجهات TypeScript ، الموجودة في مساحة الاسم تحت مفتاح تكوين ModelNamespace ( RazorSvelte.SampleData ). نعم.
يمكنك استخدام وحدة تصحيح تصحيح التصحيح للمستعرض الخاص بك لتصحيح الأخطاء كما تفعل عادة. يحتاج JavaScript إلى ملف .map المرتبط.
لإنشاء ملف .map تشغيل ملف rollup و Configuration كأوامر وسيطة مع مفتاح -w . على سبيل المثال:
rollup -c ./Pages/Index.cshtml.js -w
ينشئ هذا الأمر ملف wwwroot/build/index.js غير مضغوط مع خريطة مرتبطة تتيح تصحيح الأخطاء في متصفحك.
في علامة تبويب مصادر المتصفح الخاصة بك ، سترى ملف App/index.svetle typescript الذي يمكنك تصحيحه بشكل طبيعي.
أيضًا ، سيستمر هذا الأمر في مشاهدة ملفات (ملفات) المصدر وسيقوم ببناءها بشكل تدريجي مع استمرار تغييره.
نعم.
لا تستخدم الأمر "بناء الكل". بدلاً من ذلك ، استخدم البناء الإضافي كما هو موضح أعلاه في السؤال السابق.
لا ، لا تحتاج إلى خادم خارجي.
يستخدم هذا المشروع خادم ويب .NET مدمج.
ومع ذلك ، ستحتاج إلى تثبيت NodeJs و NPM لتشغيل أوامر Rollup.
سيتعين عليك إنشاء تطبيق تسجيل الدخول على هذه الخدمات لاسترداد معرف العميل وقيم العميل السرية ولصقها في ملفات التكوين.
انظر AppSettings.Json لمزيد من التفاصيل.
بمجرد تمرير إذن مقدمي الخدمات الخارجية ، سيستخدم التطبيق Auth JWT للهويات التي أكدها مقدمو الخدمات الخارجية بالفعل. لذلك ، سيكون عليك تكوين JwtConfigSection مع القيم:
Secret - سلسلة عشوائية سرية طويلةIssuer - مميز JWTAudience - جمهور الرمز المميز JWTExpirationMin - وقت انتهاء صلاحية الرمز المميز JWT في دقائقClockSkewMin - يضيف إلى وقت انتهاء صلاحية الرمز المميز JWT ، ويتم تعيينه على NULL لتجنب.RefreshTokenExpirationMin - تحديث دقائق انتهاء صلاحية الرمز المميز. ضبط على NULL لتجنب استخدام الرموز التحديث. إذا تم استخدامه ، فيجب أن يكون أطول من انتهاء الصلاحية المميزة.CookieExpirationMin - انتهاء صلاحية ملفات تعريف الارتباط في دقائق. يجب أن يكون أطول من انتهاء صلاحية الرمز المميز أو تحديث انتهاء صلاحية الرمز المميز إذا تم استخدامه.CookieName - اسم ملف تعريف الارتباط الأمني. ملاحظة: إذا كنت تستخدم خيار تحديث الرمز المميز ، فقد ترغب في إعادة تنفيذ فئة RefreshTokenRepository لاستخدام قاعدة البيانات أو نوع من ذاكرة التخزين المؤقت الدائمة ، بدلاً من قاموس الذاكرة.
لا يزال يتم التعامل مع توجيه الصفحة على الخادم بواسطة خادم الويب ASP.NET. هذا يعني أن هذا المشروع ليس تطبيقًا من صفحة واحدة (SPA) ، على الرغم من أن الترميز بالكامل موجود في إخراج Svelte مما يعني أنه تم تخزينه مؤقتًا على العميل بطريقة سبا.
ومع ذلك ، فإن أحد طرق /spa هو مثال على تطبيق SPA. تستخدم هذه الصفحة svelte-spa-router وتظهر طرق عرض Spa المختلفة مع طرق الهاشتاج.
نعم ، على سبيل المثال ، باستخدام المدخلات المخفية.
<input id="title" type="hidden" value="@ViewData["Title"]" /> في صفحتك. import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;إلى جانب كونه أسهل وأسرع بكثير للتطوير والصيانة ، نعم إنه أسرع. يتم احتواء الترميز بالكامل ومُصنعه داخل ملفات JavaScript المترجمة من مكونات Svelte التي يتم تنزيلها بعد ذلك في المرة الأولى ثم تم تخزينها مؤقتًا مقابل كل طلب جديد.
هذا يقلل بشكل كبير من حركة الشبكة لتطبيقك.
ثم يتم تقديم الترميز على الفور عند تحميل الصفحة.
حقوق الطبع والنشر (C) Vedran Bilopavlović - VB Consulting و VB Software 2022 تم ترخيص رمز المصدر هذا بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.
