RazorSvelte

Razorsvelte

บันทึก:

มีการประเมินเฟรมเวิร์กองค์ประกอบ UI อื่น ๆ อีกหลายอันและในที่สุดเทมเพลตนี้จะถูกตัดสินด้วย bootstrap

หากต้องการใช้เทมเพลตอื่น ๆ เช่นคาร์บอนหรือวัสดุ UI ดูคำแนะนำการติดตั้งด้านล่างในไฟล์นี้

นี่คือเทมเพลตโครงการและกำลังได้รับการปรับปรุงอย่างต่อเนื่องด้วยการปรับปรุงและส่วนประกอบใหม่จำเป็นต้องใช้เว็บแอปพลิเคชันที่ทันสมัยและหลากหลายมากขึ้น

ที่เก็บเทมเพลตโครงการที่มีโครงการเทมเพลตพร้อมการตั้งค่าต่อไปนี้:

• หน้ามีดโกน ASP.NET (C# และ .NET8)
• Svelte JavaScript Framework ที่กำหนดค่าไว้สำหรับใช้กับตัวประมวลผล preprocessor TypeScript และ SCSS
• Rollup JavaScript Bundler Build System
• เฟรมเวิร์ก Bootstrap 5+ CSS ที่กำหนดค่าสำหรับตัวประมวลผล preprocessor SCSS ดู https://getbootstrap.com/docs/
• สำหรับไอคอน bootstrap ดู https://icons.getbootstrap.com/
• ตัวอย่างกลไกการตรวจสอบความถูกต้องโดยใช้ (JWT ใช้คุกกี้ที่มีโทเค็นรีเฟรชเสริม) และมีผู้ให้บริการเข้าสู่ระบบภายนอกสามคน (Google, LinkedIn และ GitHub)
• หน้าตัวอย่างเช่นดัชนี, ความเป็นส่วนตัว, เข้าสู่ระบบ, ออกจากระบบ, หน้าตัวอย่างที่ได้รับอนุญาต, ไม่ได้รับอนุญาต (401), ไม่พบ (404) และหน้าข้อผิดพลาด
• ตัวอย่างแอปพลิเคชันหน้าเดียวโดยใช้ส่วนประกอบเราเตอร์ hashtag
• การรองรับชุดรูปแบบมืดในตัวพร้อมกลไกการสลับชุดรูปแบบในตัว
• ตัวอย่างส่วนประกอบ bootstrap พร้อมการสาธิต ส่วนประกอบใหม่กำลังถูกเพิ่มเข้ามาอย่างต่อเนื่อง
• ส่วนประกอบ UI รวมถึง:
  • chart - wrapper สำหรับ chart.js
  • chart-box -แผนภูมิที่มีชื่อและปุ่มซูมเต็มหน้าจอ
  • data-grid - Grid Data พร้อมแหล่งข้อมูลระยะไกลที่ใช้ตาราง bootstrap
  • modal - wrapper สำหรับ bootstrap modal
  • multiselect - หลายแบบเลื่อนลงเลือกด้วยการค้นหาและการเลื่อนเสมือน
  • offcanvas - wrapper สำหรับ bootstrap Offcanvas
  • pager - Pager Bootstrap ที่ทำงานกับ Data -Grid
  • placeholder - ตัวยึดตำแหน่งตามตัวยึด bootstrap ส่วนใหญ่ใช้โดยส่วนประกอบอื่น ๆ เพื่อจัดการสถานะที่ไม่ได้เริ่มต้น
  • search-input - อินพุตการค้นหาอย่างง่ายด้วยไอคอนการค้นหาที่จัดการการหมดเวลาการค้นหาและป้องกันไม่ให้มีการร้องขอการค้นหาหลายครั้ง
  • ฯลฯ มีการเพิ่มอีกมากมายเป็นประจำ

เพื่อดูตัวอย่างการใช้งานสำหรับส่วนประกอบเหล่านี้ดูโครงการนี้

Demo Docker

ทำตามขั้นตอนเหล่านี้เพื่อสร้างและเรียกใช้แอปพลิเคชันตัวอย่าง RazorSvelte:

1. ดาวน์โหลด dockerfile จาก https://raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile (หรือเพียงเรียกใช้ wget https: // raw.githubusercontent.com/vb-consulting/razorsvelte/master/master

2. เปิดพรอมต์คำสั่งและนำทางไปยังโฟลเดอร์ที่คุณบันทึก DockerFile

3. เรียกใช้คำสั่งต่อไปนี้:

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 ในหน้า svelte ที่ส่งผ่านจากหน้ามีดโกน ViewData
• /login - แสดงปุ่มเข้าสู่ระบบภายนอก
• /authorized - ตัวอย่างหน้าที่ได้รับอนุญาตได้รับการปกป้องด้วยแอตทริบิวต์ Authorize แสดงข้อมูลผู้ใช้ที่ได้รับอนุญาตอย่างง่ายที่ส่งผ่านจากหน้ามีดโกน
• /401 - ตัวอย่างหน้าโดยไม่ได้รับอนุญาตที่เปลี่ยนเส้นทางเมื่อผู้ใช้ที่ไม่ได้รับอนุญาตพยายามเข้าถึงหน้าเว็บด้วยแอตทริบิวต์ Authorize
• /404 - ไม่พบหน้าเว็บสำหรับเส้นทางเซิร์ฟเวอร์ที่ไม่รู้จัก
• /spa ของแอปพลิเคชันหน้าเดียว (SPA) ด้วยส่วนประกอบเราเตอร์ไคลเอ็นต์แฮชแท็กที่แสดงเส้นทางต่าง ๆ ในแฟชั่นสปา

หมายเหตุสำคัญ:

• ไม่มีเว็บเซิร์ฟเวอร์ NodeJS อื่น ๆ Svelte ถูกรวมเข้ากับหน้ามีดโกน
• Rollup JavaScript Bundler ได้รับการกำหนดค่าให้ส่งออกไฟล์ลงใน wwwroot และโดยปกติคุณสามารถนำเข้าพวกเขาไปยังหน้ามีดโกน (หรือหน้าอื่น ๆ )
• ไม่จำเป็นต้องกำหนดค่า CORS เนื่องจากทุกอย่างให้บริการโดย. NET Web Server (Kestrel)

ทำไม

• Svelte เป็นวิธีการใหม่ที่รุนแรงในการสร้างอินเทอร์เฟซผู้ใช้

• ในขณะที่เฟรมเวิร์กแบบดั้งเดิมเช่น React และ Vue ทำงานเป็นจำนวนมากในเบราว์เซอร์ - Svelte เปลี่ยนที่ทำงานเป็นขั้นตอนการคอมไพล์ที่เกิดขึ้นเมื่อคุณสร้างแอปของคุณ แทนที่จะใช้เทคนิคต่าง ๆ เช่น DOM เสมือน Dom Diffing Svelte เขียนโค้ดที่ผ่าตัดอัพเดท DOM เมื่อสถานะของแอปของคุณเปลี่ยนไป

• Svelte เป็นคอมไพเลอร์ที่สร้างเอาต์พุต JavaScript ขนาดเล็กและเหมาะสมมาก

• Svelte รวมตัวมาร์กอัปของคุณเข้ากับเอาท์พุทคอมไพเลอร์ด้วยเช่นกันซึ่งมีขนาดเล็กกว่ามาร์กอัปปกติ

• จากนั้นเอาต์พุตคอมไพเลอร์ Svelte จะถูกแคชในเบราว์เซอร์ซึ่งทำให้ทุกคำขอที่ตามมายิ่งเร็วขึ้นเนื่องจากเบราว์เซอร์ไม่จำเป็นต้องดาวน์โหลดมาร์กอัปอีกครั้ง

• เนื่องจาก Svelte ผลิต JavaScript วานิลลาบริสุทธิ์จึงไม่มีค่าใช้จ่ายในการรันไทม์ นอกจากนี้ยังหมายความว่าคุณสามารถนำเข้าและมัด (พร้อมกรอบการทำงาน) และกรอบการทำงานที่คุณอาจต้องการอาจนำส่วนประกอบ UI เก่าที่คุณอาจมี ตัวอย่างเช่นรหัสมรดกที่มี jQuery

• Svelte ได้กลายเป็นเฟรมเวิร์กเว็บที่เป็นที่รักมากที่สุดสำหรับนักพัฒนาในปี 2564 จากการสำรวจของ Stackoverflow

• Rollup ได้รับการกำหนดค่าล่วงหน้าเพื่อทำงานกับโครงการ ASP.NET, รวบรวม, มัดและลบโมดูลที่ไม่ได้ใช้แล้วส่งออกไปยัง wwwroot ของโครงการ ASP.NET ของคุณ

• นอกจากนี้คุณยังสามารถใช้หน้า ASP.NET ปกติ (หรือ MVC) ตามปกติตามปกติ

ผลที่ได้คือแอปพลิเคชันเว็บที่ได้รับ การ ปรับปรุง **** *** ด้วย:

• แบ็กเอนด์ให้บริการโดย ASP.NET
• ส่วนหน้าจะแสดงผลและปรับให้เหมาะสมโดย Svelte และ Rollup

และคุณสามารถรวมการเรนเดอร์ฝั่งเซิร์ฟเวอร์เข้ากับการแสดงผลส่วนหน้า SVELTE ที่เหมาะสม

ดีที่สุดของทั้งหมด - คุณสามารถหลีกเลี่ยงการกำหนดค่าที่น่าเบื่อโดยใช้เทมเพลตนี้

การติดตั้ง

จากบรรทัดคำสั่ง:

เทมเพลตหลัก

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

เทมเพลตคาร์บอน UI

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

เทมเพลตวัสดุ UI

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

.NET 5 เทมเพลต

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

เทมเพลต jQuery

ตัวอย่าง 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 )

จาก GitHub:

เพียงคลิกที่ปุ่มสีเขียวขนาดใหญ่ ให้ใช้แม่แบบนี้

หากคุณต้องการเทมเพลตอื่น ๆ มากกว่าเทมเพลตหลัก (เช่น jQuery หรือ Net5 ตัวอย่าง) - เปลี่ยนสาขาก่อน

โครงสร้าง

โครงสร้างหน้ามีดโกน

หน้ามีดโกนแต่ละหน้ามีไฟล์ซ้อนใหม่สองไฟล์:

• MyPage.rollup.config.js - ไฟล์การกำหนดค่าการหมุนสำหรับหน้านี้
• MyPage.entry.ts - ไฟล์โมดูลตัวพิมพ์จุดเข้าสำหรับหน้านี้

บันทึก:

• ไฟล์ใหม่ทั้งสองนั้นขึ้นอยู่กับ MyPage.cshtml (ผ่านการตั้งค่าไฟล์โครงการ) เพื่อให้ ides เช่น Visualstudio และ Jetbrains Rider จะทำรังพวกเขา
• คุณสามารถทำรังไฟล์ใน Visual Studio Code โดยเปิดใช้งานการทำรังและอัปเดต "การทำรังไฟล์: รูปแบบ" ภายใต้การตั้งค่า Explorer เพิ่มรายการที่มีชื่อรายการของ *.cshtml และค่า ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js

ไฟล์กำหนดค่า

ไฟล์การกำหนดค่านำเข้าทั่วโลก config จาก Scripts/rollup. config` และตั้งค่าต่อไปนี้:

• ไฟล์รายการโมดูลรายการ
• คอมไพเลอร์เอาต์พุตไฟล์ JavaScript ค่าเริ่มต้นคือ wwwroot /build plus entry module name with the ส่วนขยาย JS`)
• คอมไพเลอร์เอาต์พุตไฟล์ CSS สำหรับโมดูลที่กำหนดค่า CSS/SCSS ถ้ามี ค่าเริ่มต้นคือ wwwroot /build plus entry module name with ส่วนขยาย CSS`

ดูหน้าตัวอย่างใน repo นี้

โมดูลรายการ typescript

โมดูล Typescript รายการนำเข้าไฟล์ svelte สำหรับหน้านี้และส่งคืนแอพ Svelte

ในเทมเพลตนี้ตัวอย่างทั้งหมดใช้ document.body เป็นเป้าหมายแอป นั่นหมายความว่า Pages/Shared/_Layout.cshtml มีเพียงร่างกายเท่านั้น

หน้ามีดโกน

เนื้อหาของร่างกายถูกแสดงผลโดยหน้ามีดโกนและองค์ประกอบ svelte

หน้ามีดโกนที่เปิดใช้งาน 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

ส่วนประกอบ svelte ทั้งหมดและโมดูลเพิ่มเติมอยู่ใน App แยกต่างหาก

แต่ละองค์ประกอบไฟล์ svelte ในรูทถูกใช้โดยหน้ามีดโกนที่เกี่ยวข้องตามที่อธิบายไว้ข้างต้น แต่ละคนจะแสดงส่วนหัวส่วนหลักและส่วนท้ายในตัวอย่างนี้

นั่นหมายความว่ามาร์กอัปส่วนใหญ่ผลิตโดยคอมไพเลอร์ Svelte ในไฟล์ JavaScript เดียวสำหรับแต่ละหน้าโดยมีขนาดเฉลี่ยประมาณ 18KB

การแสดงผลเป็นทันทีและเอาต์พุต JS ถูกแคชบนไคลเอนต์เพื่อลดขนาดการดาวน์โหลด

สคริปต์และเครื่องมือ NPM

• คำสั่ง DOTNET สำหรับใช้กับส่วนขยายของสคริปต์ NPM UI (เรียกใช้จาก IDE ของคุณ):

  • dotnet-run สำหรับ dotnet run
  • dotnet-clean : สำหรับ dotnet clean
  • dotnet-build : สำหรับ dotnet build

• การสนับสนุนการจัดแต่งทรงผม SCSS

  • fe-scss-build : สร้างไฟล์ CSS ส่วนกลาง wwwroot/style.css ในรูปแบบบีบอัดจาก 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 เพื่อสร้างและรวบรวมทุกหน้าและสไตล์ชีททั้งหมด
  • fe-watch-all: Frontend watch-all. Calls สคริปต์สคริปต์/watch-all.js` เพื่อสร้างรวบรวมและดูทุกหน้าและสไตล์ชีททั้งหมด

• อื่น:

  • npm-upgrade : อัปเกรดการพึ่งพา NPM ทั้งหมดเป็นเวอร์ชันล่าสุด ใช้สิ่งนี้ด้วยความระมัดระวัง เพื่อให้สามารถเรียกใช้คำสั่งนี้ได้จำเป็นต้องมีการพึ่งพาการอัปเดต npm-check-updates ใช้ npm install -g npm-check-updates เพื่อติดตั้ง
  • code : เปิดหนึ่งอินสแตนซ์ของ Visual Studio Code
  • `หน้าใหม่: แจ้งให้ผู้ใช้สำหรับชื่อหน้าใหม่และหากอายุไม่มีอยู่เพิ่มหน้าใหม่และทำการเปลี่ยนแปลงรหัสที่เหมาะสมทั้งหมด
  • build-urls - เรียกใช้. Net C# สคริปต์ที่สร้างไฟล์ shared/urls.ts โดยอัตโนมัติที่มี URL แอปพลิเคชันทั้งหมด สร้างแบ็กเอนด์ดำเนินการคำสั่งสคริปต์และมีอยู่ คำสั่งนี้จะใช้คีย์การกำหนดค่า UrlBuilderPath
  • build-models - เรียกใช้. NET C# สคริปต์ที่สร้างไฟล์ shared/models.d.ts โดยอัตโนมัติที่มีส่วนต่อประสานโมเดลทั้งหมดจากเนมสเปซรุ่น สร้างแบ็กเอนด์ดำเนินการคำสั่งสคริปต์และมีอยู่ คำสั่งนี้จะสร้างไฟล์ typeScript ที่ตั้งค่าในคีย์การกำหนดค่า TsModelsFilePath ( shared/models.d.ts ) ที่จะมีคลาสสาธารณะ C# ทั้งหมดที่แปลไปยังอินเตอร์เฟส typeScript ที่มีอยู่ในเนมสเปซภายใต้รหัสการกำหนดค่า ModelNamespace ( RazorSvelte.SampleData )

คำถามที่พบบ่อย

ฉันสามารถดีบักหน้าเหล่านี้ได้หรือไม่?

ใช่.

คุณสามารถใช้คอนโซลดีบั๊กเบราว์เซอร์สำหรับการดีบักตามปกติ JavaScript ต้องมีไฟล์ .map ที่เกี่ยวข้อง

ในการสร้างไฟล์ .map Run rollup และการกำหนดค่าเป็นคำสั่งอาร์กิวเมนต์ด้วยสวิตช์ -w ตัวอย่างเช่น:

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

คำสั่งนี้สร้างไฟล์ wwwroot/build/index.js ที่ไม่บีบอัดด้วยแผนที่ที่เกี่ยวข้องที่เปิดใช้งานการดีบักในเบราว์เซอร์ของคุณ

ในแท็บแหล่งที่มาของเบราว์เซอร์คุณจะเห็นไฟล์ App/index.svetle typescript ที่คุณสามารถแก้ไขข้อบกพร่องได้ตามปกติ

นอกจากนี้คำสั่งนี้จะยังคงดูไฟล์ต้นฉบับของคุณต่อไปและจะเพิ่มขึ้นเรื่อย ๆ ในขณะที่คุณเปลี่ยนมันต่อไป

การสร้างหน้าทั้งหมดช้า ฉันจะทำให้เร็วขึ้นได้ไหม

ใช่.

อย่าใช้คำสั่ง "สร้างทั้งหมด" ให้ใช้การสร้างที่เพิ่มขึ้นตามที่อธิบายไว้ข้างต้นในคำถามก่อนหน้า

ฉันต้องการเซิร์ฟเวอร์การพัฒนา NodeJS หรือไม่?

ไม่คุณไม่จำเป็นต้องมีเซิร์ฟเวอร์ภายนอก

โครงการนี้ใช้เว็บเซิร์ฟเวอร์. NET ในตัว

อย่างไรก็ตามคุณจะต้องติดตั้ง NodeJS และ NPM เพื่อเรียกใช้คำสั่ง Rollup

ฉันจะใช้การเข้าสู่ระบบภายนอกจาก Google, LinkedIn หรือ GitHub จากตัวอย่างนี้ได้อย่างไร

คุณจะต้องสร้างแอพเข้าสู่ระบบในบริการเหล่านี้เพื่อดึงรหัสไคลเอนต์และค่าความลับของลูกค้าและวางลงในไฟล์การกำหนดค่า

• https://console.cloud.google.com/apis/ สำหรับ Google
• https://www.linkedin.com/developers/apps/ สำหรับ LinkedIn
• https://github.com/settings/developers/ สำหรับ gitHub

ดู AppSettings.json สำหรับรายละเอียดเพิ่มเติม

เมื่อผ่านการอนุญาตจากผู้ให้บริการภายนอกแอปพลิเคชันจะใช้ JWT Auth สำหรับข้อมูลประจำตัวที่ได้รับการยืนยันแล้วโดยผู้ให้บริการภายนอก ดังนั้นคุณจะต้องกำหนดค่า JwtConfigSection ด้วยค่า:

• Secret - สตริงสุ่มลับยาว
• Issuer - ผู้ออกโทเค็น JWT
• Audience - ผู้ชมโทเค็น JWT
• ExpirationMin - JWT โทเค็นหมดเวลาในไม่กี่นาที
• ClockSkewMin - เพิ่มเวลาหมดอายุโทเค็น JWT ตั้งค่าเป็น NULL เพื่อหลีกเลี่ยง
• RefreshTokenExpirationMin - รีเฟรชโทเค็นหมดอายุนาที ตั้งค่าเป็นโมฆะเพื่อหลีกเลี่ยงการใช้โทเค็นรีเฟรช หากใช้งานจะต้องยาวกว่าการหมดอายุโทเค็นที่จะมีผล
• CookieExpirationMin - การหมดอายุของคุกกี้ในไม่กี่นาที มันจะต้องยาวที่สุดกว่าการหมดอายุโทเค็นหรือการรีเฟรชโทเค็นหมดอายุหากใช้
• CookieName - ชื่อของคุกกี้รักษาความปลอดภัย

หมายเหตุ: หากใช้ตัวเลือกการรีเฟรชโทเค็นคุณอาจต้องการนำเสนอคลาส RefreshTokenRepository อีกครั้งเพื่อใช้ฐานข้อมูลหรือแคชถาวรบางชนิดแทนที่จะเป็นพจนานุกรมในหน่วยความจำ

การกำหนดเส้นทางหน้าเสร็จสิ้นบนไคลเอนต์หรือเซิร์ฟเวอร์หรือไม่?

การกำหนดเส้นทางหน้ายังคงจัดการบนเซิร์ฟเวอร์โดยเว็บเซิร์ฟเวอร์ ASP.NET นั่นหมายความว่าโครงการนี้ไม่ใช่แอปพลิเคชันหน้าเดียว (SPA) แม้ว่ามาร์กอัปทั้งหมดจะอยู่ในเอาต์พุต SVELTE ซึ่งหมายความว่ามันถูกแคชบนไคลเอนต์ในลักษณะสปา

อย่างไรก็ตามหนึ่งในเส้นทางเซิร์ฟเวอร์ /spa เป็นตัวอย่างของแอปพลิเคชัน SPA หน้านี้ใช้ svelte-spa-router และแสดงมุมมองสปาต่างๆด้วยเส้นทางแฮชแท็ก

ฉันสามารถส่งข้อมูลจากหน้ามีดโกนของฉันไปยังส่วนประกอบ svelte ได้หรือไม่?

ใช่ตัวอย่างเช่นโดยใช้อินพุตที่ซ่อนอยู่

1. วาง <input id="title" type="hidden" value="@ViewData["Title"]" /> ในหน้าของคุณ
2. ในไฟล์ svelte ของคุณ:

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

นี่เร็วกว่าหน้ามีดโกนปกติที่มีจาวาสคริปต์หรือไม่?

นอกจากจะง่ายขึ้นและเร็วขึ้นในการพัฒนาและบำรุงรักษาใช่มันเร็วขึ้น มาร์กอัปทั้งหมดมีอยู่และลดลงในไฟล์ JavaScript ที่รวบรวมจากส่วนประกอบ SVELTE ซึ่งจะดาวน์โหลดเป็นครั้งแรกแล้วแคชสำหรับคำขอใหม่ทุกครั้ง

สิ่งนี้จะช่วยลดทราฟฟิกเครือข่ายสำหรับแอปพลิเคชันของคุณอย่างมีนัยสำคัญ

มาร์กอัปจะแสดงผลทันทีเมื่อหน้าโหลด

มีส่วนขยายใดบ้างที่คุณอยากจะแนะนำ?

• สำหรับการทำงานกับ svelte: svelte สำหรับ vs code
• นอกจากนี้: Svelte Intellisense
• สำหรับการทำงานกับ Bootstrap: Intellisense สำหรับชื่อคลาส CSS ใน HTML
• เพียงเพื่อดูสวย: Intent-Rainbow

ใบอนุญาต

Copyright (C) Vedran Bilopavlović - VB Consulting และ VB Software 2022 รหัสแหล่งนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT