Unduh RazorSvelte - Unduh Kode Sumber RazorSvelte

RazorSvelte

Kategori lainnya

1.0.0

Unduh

Razorsvelte

Catatan:
Ada beberapa kerangka kerja komponen UI lainnya yang dievaluasi, dan akhirnya templat ini diselesaikan dengan bootstrap.
Untuk menggunakan templat lain, misalnya, karbon atau UI material, lihat instruksi pemasangan di bawah ini dalam file ini.
Ini adalah templat proyek dan karena itu terus diperbarui dengan perbaikan dan komponen baru yang dibutuhkan aplikasi web yang lebih modern dan serbaguna.

Repositori Template Proyek yang berisi proyek template dengan pengaturan berikut:

Asp.net pisau cukur halaman (C# dan .net8).
Kerangka kerja JavaScript Svelte yang dikonfigurasi untuk digunakan dengan TypeScript dan SCSS Preprocessor.
Rollup JavaScript Bundler Build System.
Bootstrap 5+ CSS Framework Dikonfigurasi untuk SCSS Preprocessor, lihat https://getboottrap.com/docs/.
Untuk ikon bootstrap, lihat https://icons.getbootstrap.com/.
Contoh mekanisme otentikasi menggunakan (JWT menggunakan cookie dengan token refresh opsional) dan dengan tiga penyedia login eksternal (Google, LinkedIn, dan Github).
Halaman sampel seperti indeks, privasi, login, logout, halaman sampel resmi, tidak sah (401), tidak ditemukan (404), dan halaman kesalahan.
Contoh Aplikasi Halaman Tunggal Contoh Menggunakan Komponen Router Tagar.
Dukungan tema gelap bawaan dengan mekanisme switching bawaan tema.
Contoh komponen bootstrap dengan demo. Komponen baru ditambahkan terus -menerus.
Komponen UI meliputi:
- chart - Pembungkus untuk Chart.js.
- chart-box -Bagan dengan judul dan tombol zoom layar penuh.
- data-grid - Data Grid dengan sumber data jarak jauh yang menggunakan tabel bootstrap.
- modal - Pembungkus untuk modal bootstrap.
- multiselect - Multiple Dropdown Pilih dengan pencarian dan gulungan virtual.
- offcanvas - Pembungkus untuk bootstrap offcanvas.
- pager - Bootstrap Pager yang berfungsi dengan data -grid.
- placeholder - Placeholder pemuatan berdasarkan placeholder bootstrap, sebagian besar digunakan oleh komponen lain untuk mengelola negara yang tidak diinisialisasi.
- search-input - Input pencarian sederhana dengan ikon pencarian yang menangani batas waktu pencarian dan mencegah beberapa permintaan pencarian.
- dll, banyak lagi yang ditambahkan secara teratur

Untuk melihat contoh penggunaan untuk komponen -komponen ini, lihat proyek ini.

Tangkapan layar

Demo Docker

Ikuti langkah -langkah ini untuk membangun dan menjalankan aplikasi demo Razorsvelte:

Unduh Dockerfile dari https://raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile (atau hanya menjalankan wget https: // raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile dari The Commanden) dari The Commanden) dari The Commandencontent) dari COMUMER) DARI COMUMER) DARI COMBOLDING)
Buka prompt perintah dan navigasikan ke folder tempat Anda menyimpan Dockerfile
Jalankan perintah berikut:

docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest

Catatan:

Jika Anda mencoba masuk dengan penyedia eksternal, Anda akan diarahkan ke halaman kesalahan. Harap edit appsettings.json dengan ID penyedia klien Anda sendiri dan rahasia klien dan pastikan bahwa aplikasi OAuth mengarahkan kembali ke `localhost: 5000`` - untuk mengaktifkan fitur ini.

Halaman sampel

/ : Halaman Indeks - Tampilkan Nilai dari Props Eksternal Halo world from svelte dan Tampilkan Tautan yang Berguna
/privacy - Halaman Sampel Privasi, menunjukkan judul H1 di halaman Svelte yang diteruskan dari Razor Page ViewData.
/login - Tampilkan tombol login eksternal
/authorized - Sampel halaman resmi dilindungi dengan atribut Authorize . Menampilkan data pengguna resmi sederhana yang diteruskan dari halaman Razor.
/401 - Contoh halaman tidak sah yang mengarahkan kembali ketika pengguna yang tidak sah mencoba untuk mengakses halaman dengan atribut Authorize .
/404 - halaman tidak ditemukan untuk rute server yang tidak dikenal.
/spa Contoh Aplikasi Halaman Tunggal (SPA) dengan komponen router klien tagar yang menampilkan berbagai rute dengan cara spa.

Catatan Penting:

Tidak ada server web NodeJS lainnya. Svelte terintegrasi dengan halaman pisau cukur.
Rollup JavaScript Bundler dikonfigurasi ke file output ke wwwroot dan Anda biasanya dapat mengimpornya ke halaman pisau cukur (atau halaman lain).
Tidak perlu mengkonfigurasi COR karena semuanya dilayani oleh .NET Web Server (Kestrel).

Mengapa

Svelte adalah pendekatan baru yang radikal untuk membangun antarmuka pengguna.
Sedangkan kerangka kerja tradisional seperti React dan Vue melakukan sebagian besar pekerjaan mereka di browser - langsing bergeser yang bekerja menjadi langkah kompilasi yang terjadi ketika Anda membangun aplikasi Anda. Alih -alih menggunakan teknik seperti DOM virtual yang berbeda, Svelte menulis kode yang secara pembedahan memperbarui DOM ketika keadaan aplikasi Anda berubah.
Svelte adalah kompiler yang menghasilkan output JavaScript yang kecil dan sangat dioptimalkan.
Svelte menggabungkan markup Anda ke dalam output kompiler juga, yang bahkan lebih kecil dari apa yang nantinya markup.
Output kompiler lsvelte kemudian di -cache di browser yang membuat setiap permintaan berikutnya lebih cepat karena browser bahkan tidak perlu mengunduh markup itu lagi.
Karena Svelte menghasilkan vanilla javascript murni, tidak ada overhead runtime. Ini juga berarti bahwa Anda dapat mengimpor dan menggabungkan (dengan rollup) dan kerangka kerja runtime yang mungkin Anda butuhkan, mungkin untuk menggunakan kembali komponen UI lama yang mungkin Anda miliki. Misalnya, kode warisan dengan jQuery.
Svelte telah menjadi kerangka kerja web yang paling dicintai untuk pengembang dalam tahun 2021 tahun, menurut Survei StackoverFlow.
Rollup sudah dikonfigurasi sebelumnya untuk dijalankan dengan proyek ASP.NET, mengkompilasi, menggabungkan dan menghapus modul yang tidak digunakan, dan kemudian mengeluarkan ke wwwroot Anda dari proyek ASP.NET Anda.
Anda juga dapat terus menggunakan asp.net pisau cukur normal (atau MVC) seperti biasanya.

Hasilnya adalah aplikasi web **** yang dioptimalkan ** *** dengan:

Backend dilayani oleh ASP.NET.
Ujung depan diterjemahkan dan dioptimalkan oleh Svelte dan Rollup.

Dan, Anda dapat menggabungkan rendering sisi server dengan rendering front-end langsing yang dioptimalkan.

Yang terbaik dari semuanya - Anda dapat menghindari konfigurasi yang membosankan dengan menggunakan template ini.

Instalasi

Dari baris perintah:

Template utama

 $ npx degit vb-consulting/RazorSvelte
> cloned vb-consulting/RazorSvelte#HEAD
$ cd RazorSvelte
$ npm install
...
$ dotnet run

Templat karbon UI

 $ npx degit vb-consulting/RazorSvelte#carbon
> cloned vb-consulting/RazorSvelte#carbon
$ cd RazorSvelte
$ npm install
...
$ dotnet run

Templat material UI

 $ npx degit vb-consulting/RazorSvelte#svelte-material-ui
> cloned vb-consulting/RazorSvelte#svelte-material-ui
$ cd RazorSvelte
$ npm install
...
$ dotnet run

.NET 5 Template

 $ npx degit vb-consulting/RazorSvelte#net5
> cloned vb-consulting/RazorSvelte#net5
$ cd RazorSvelte
$ npm install
...
$ dotnet run

Template jQuery

Contoh jQuery hanya memiliki satu halaman yang menunjukkan cara bundel menggunakan jQuery dengan langsing dan rollup.

 $ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run

Catatan:

degit cukup mengunduh dan membuka ritsleting versi terbaru dari konten repo git tanpa inisialisasi repositori (tidak seperti git clone misalnya).

Dari github:

Cukup klik tombol hijau besar Gunakan template ini .

Jika Anda menginginkan beberapa templat lain daripada template utama (seperti jQuery atau net5 contoh) - ubah cabang terlebih dahulu.

Struktur

Struktur Halaman Razor

Setiap halaman pisau cukur memiliki dua file bersarang baru:

MyPage.rollup.config.js - File konfigurasi rollup untuk halaman ini.
MyPage.entry.ts - File Modul TypeScript titik masuk untuk halaman ini.

Catatan:

Dua file baru itu bergantung pada MyPage.cshtml (melalui pengaturan file proyek) sehingga IDE seperti VisualStudio dan JetBrains Rider akan bersarang secara visual.
Anda dapat menyarangkan file dalam kode studio visual dengan mengaktifkan sarang file dan memperbarui "File Nesting: Patterns" di bawah pengaturan Explorer. Tambahkan item dengan nama item *.cshtml dan nilai ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js .

File konfigurasi

File konfigurasi mengimpor konfigurasi global dari Scripts/rollup. config` dan menetapkan nilai -nilai berikut:

Modul Entri File TypeScript.
File JavaScript Output Kompiler. Standarnya adalah wwwroot /build plus entry module name with the ekstensi JS`).
File CSS Output Kompiler untuk Modul SCOPED CSS/SCSS Jika ada. Standarnya adalah wwwroot /build plus entry module name with ekstensi css.

Lihat halaman sampel dalam repo ini.

Modul TypeScript Entri

Modul Entry TypeScript mengimpor file SVELTE untuk halaman ini dan mengembalikan aplikasi SVELTE.

Dalam templat ini, semua contoh menggunakan document.body sebagai target aplikasi. Itu berarti bahwa Pages/Shared/_Layout.cshtml hanya berisi tubuh.

Halaman pisau cukur

Konten tubuh diterjemahkan oleh halaman pisau cukur itu sendiri dan komponen svelte .

Setiap halaman Razor yang diaktifkan langsing juga harus menyertakan output JavaScript dan CSS (jika ada), misalnya, untuk halaman indeks:

 @section HeadSection {
    < link href = " ~/build/index.css " asp-append-version = " true " rel = " stylesheet " />
    < script defer src = " ~/build/index.js " asp-append-version = " true " ></ script >
}

Komponen langsing

Semua komponen langsing dan modul tambahan berada di Dir App terpisah.

Setiap komponen file svelte dalam root digunakan oleh halaman Razor terkait seperti dijelaskan di atas. Masing -masing dari mereka akan membuat header, bagian utama, dan footer dalam contoh ini.

Itu berarti bahwa sebagian besar markup diproduksi oleh kompiler langsing dalam satu file JavaScript, untuk setiap halaman, dengan ukuran rata -rata sekitar 18kB.

Rendering instan dan output JS di -cache pada klien untuk mengurangi ukuran unduhan.

Skrip dan alat NPM

Perintah dotnet untuk digunakan dengan skrip npm ekstensi UI (dijalankan dari IDE Anda):
- dotnet-run untuk dotnet run .
- dotnet-clean : Untuk dotnet clean .
- dotnet-build : Untuk dotnet build .
Dukungan Styling SCSS
- fe-scss-build : Bangun file CSS global wwwroot/style.css dalam format terkompresi dari aplikasi SCSS App/scss/style.scss yang diimpor.
- fe-scss-watch : Bangun file CSS global wwwroot/style.css dalam format yang tidak terkompresi dari aplikasi SCSS App/scss/style.scss yang mengimpor dan tetap dalam mode arloji rekursif.
Bangun dukungan untuk halaman Index
- fe-build : Bangun JavaScript untuk halaman Index . Outputnya adalah wwwroot/build/index.js dalam format terkompresi tanpa peta sumber apa pun. File JavaScript tidak dapat didebug. Ini untuk produksi
- fe-watch : Bangun JavaScript untuk halaman Index . Outputnya adalah wwwroot/build/index.js dalam format yang tidak terkompresi dengan peta sumber. File JavaScript dapat didebug. Ini bukan untuk produksi. Proses ini akan terus memantau perubahan file dan membangun kembali. Ini berguna untuk proses pengembangan.

CATATAN: Untuk membangun atau menonton halaman lain, Anda dapat menggunakan baris perintah ini npm run fe-build <page> atau npm run fe-build <page> , di mana nama halaman adalah file konfigurasi kecil tanpa ekstensi. Misalnya index untuk ./Pages/Index.rollup.config.js , login untuk ./Pages/Login.rollup.config.js , dll.

Semua halaman
- fe-build-all : Frontend build-all. Panggilan Scripts/build-all.js skrip untuk membangun dan menyusun semua halaman dan semua stylesheet.
- fe-watch-all: Frontend watch-all. Calls skrip/watch-all.js` skrip untuk membangun, menyusun, dan menonton semua halaman dan semua stylesheet.
Lainnya:
- npm-upgrade : Meningkatkan semua dependensi NPM ke versi terbaru. Gunakan ini dengan hati -hati. Untuk dapat menjalankan perintah ini, diperlukan ketergantungan npm-check-updates global. Gunakan npm install -g npm-check-updates untuk menginstal.
- code : Membuka satu contoh kode studio visual
- `Halaman Baru: Meminta pengguna untuk nama halaman baru, dan jika usia tidak ada menambahkan halaman baru dan melakukan semua perubahan kode yang sesuai.
- build-urls - Invokes .net C# skrip yang secara otomatis membuat file shared/urls.ts yang berisi semua URL aplikasi. Membangun backend, mengeksekusi perintah skrip dan ada. Perintah ini akan menggunakan kunci konfigurasi UrlBuilderPath .
- build-models - Invokes .net C# skrip yang secara otomatis membuat file shared/models.d.ts yang berisi semua antarmuka model dari model namespace. Membangun backend, mengeksekusi perintah skrip dan ada. Perintah ini akan membuat file TypeScript yang diatur dalam tombol konfigurasi TsModelsFilePath ( shared/models.d.ts ) yang akan berisi semua kelas publik C# yang diterjemahkan ke antarmuka TypeScript, yang ada di namespace di bawah Kunci Konfigurasi ModelNamespace ( RazorSvelte.SampleData ).

FAQ

Bisakah saya men -debug halaman ini?

Ya.

Anda dapat menggunakan konsol debug browser Anda untuk men -debug seperti biasanya. JavaScript perlu memiliki file .map terkait.

Untuk membuat file .map run rollup dan file konfigurasi sebagai perintah argumen dengan -w switch. Misalnya:

rollup -c ./Pages/Index.cshtml.js -w

Perintah ini membuat file wwwroot/build/index.js yang tidak terkompresi dengan peta terkait yang memungkinkan debugging di browser Anda.

Di tab Sumber Browser Anda, Anda akan melihat file App/index.svetle .

Juga, perintah ini akan terus menonton file sumber Anda dan secara bertahap akan membangun saat Anda terus mengubahnya.

Membangun semua halaman lambat. Bisakah saya membuatnya lebih cepat?

Ya.

Jangan gunakan perintah "Bangun Semua". Sebagai gantinya, gunakan build tambahan seperti yang dijelaskan di atas dalam pertanyaan sebelumnya.

Apakah saya memerlukan server pengembangan nodeJS?

Tidak, Anda tidak memerlukan server eksternal.

Proyek ini menggunakan server web .NET bawaan.

Namun, Anda harus menginstal nodej dan NPM untuk menjalankan perintah rollup.

Bagaimana cara menggunakan login eksternal dari Google, LinkedIn, atau GitHub dari contoh ini?

Anda harus membuat aplikasi login pada layanan ini untuk mengambil ID klien dan nilai rahasia klien dan menempelkannya ke file konfigurasi.

https://console.cloud.google.com/apis/ untuk google
https://www.linkedin.com/developers/apps/ untuk LinkedIn
https://github.com/settings/developers/ untuk github

Lihat appsettings.json untuk lebih jelasnya.

Setelah otorisasi dari penyedia eksternal disahkan, aplikasi akan menggunakan JWT Auth untuk identitas yang sudah dikonfirmasi oleh penyedia eksternal. Jadi, Anda harus mengkonfigurasi JwtConfigSection dengan nilai -nilainya:

Secret - String acak rahasia panjang
Issuer - Penerbit token JWT
Audience - audiens token JWT
ExpirationMin - Waktu kedaluwarsa token JWT dalam hitungan menit
ClockSkewMin - menambah waktu kedaluwarsa token JWT, diatur ke null untuk menghindari.
RefreshTokenExpirationMin - Refresh Token Menit Kadalan. Setel ke null untuk menghindari menggunakan token refresh. Jika digunakan, itu harus lebih lama dari waktu yang berakhir.
CookieExpirationMin - Cookie Expiration in Menit. Itu harus paling lama dari kadaluwarsa token atau menyegarkan token kadaluwarsa jika digunakan.
CookieName - Nama Cookie Keamanan.

Catatan: Jika menggunakan opsi Refresh Token, Anda mungkin ingin mengimplementasikan kembali kelas RefreshTokenRepository untuk menggunakan database atau semacam cache permanen, alih-alih kamus dalam memori.

Apakah routing halaman dilakukan pada klien atau server?

Routing halaman masih ditangani di server oleh server web ASP.NET. Itu berarti bahwa proyek ini bukan aplikasi satu halaman (SPA), meskipun seluruh markup terkandung dalam output langsing yang berarti di-cache pada klien dengan cara spa.

Namun, salah satu rute /spa server adalah contoh dari aplikasi SPA. Halaman ini menggunakan svelte-spa-router dan menunjukkan berbagai tampilan spa dengan rute tagar.

Dapatkah saya mengirim data dari halaman pisau cukur saya ke komponen langsing?

Ya, misalnya, dengan menggunakan input tersembunyi.

Tempatkan <input id="title" type="hidden" value="@ViewData["Title"]" /> di halaman Anda.
Di file langsing Anda:

 import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;

Apakah ini lebih cepat dari halaman pisau cukur biasa dengan JavaScript?

Selain jauh lebih mudah dan lebih cepat untuk berkembang dan memelihara, ya itu lebih cepat. Seluruh markup terkandung dan diminifikasi di dalam file JavaScript yang dikompilasi dari komponen SVELTE yang kemudian diunduh pertama kali dan kemudian di -cache untuk setiap permintaan baru.

Ini secara signifikan mengurangi lalu lintas jaringan untuk aplikasi Anda.

Markup kemudian diterjemahkan secara instan saat halaman dimuat.