RazorSvelte
1.0.0
메모:
여러 다른 UI 구성 요소 프레임 워크가 평가되었으며, 마지막 으로이 템플릿은 부트 스트랩으로 해결됩니다.
다른 템플릿, 예를 들어 탄소 또는 재료 UI를 사용하려면이 파일의 아래 설치 지침을 참조하십시오.
이것은 프로젝트 템플릿이며 개선 사항으로 지속적으로 업데이트되고 있으며보다 현대적이고 다양한 웹 애플리케이션이 필요한 새로운 구성 요소입니다.
다음 설정이있는 템플릿 프로젝트를 포함하는 프로젝트 템플릿 저장소 :
chart - Chart.js 용 래퍼.chart-box -제목 및 전체 화면 줌 버튼이있는 차트.data-grid - 부트 스트랩 테이블을 사용하는 원격 데이터 소스가있는 데이터 그리드.modal - 부트 스트랩 모달을위한 래퍼.multiselect 검색 및 가상 스크롤이 포함 된 다중 드롭 다운 선택.offcanvas 부트 스트랩 OffCanvas 용 래퍼.pager 데이터 그리드와 함께 작동하는 부트 스트랩 호출기.placeholder - 부트 스트랩 자리 표시자를 기반으로 한 자리 표시 자 로딩. 주로 다른 구성 요소에서 사용되지 않은 상태를 관리하는 데 사용됩니다.search-input - 검색 시간 초과를 처리하고 여러 검색 요청을 방지하는 검색 아이콘이있는 간단한 검색 입력.이러한 구성 요소의 사용 예를 보려면이 프로젝트를 참조하십시오.
다음 단계에 따라 Razorsvelte 데모 애플리케이션을 구축하고 실행하십시오.
wget
명령 프롬프트를 열고 dockerfile을 저장 한 폴더로 이동하십시오.
다음 명령을 실행하십시오.
docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest
메모:
외부 제공 업체로 로그인하려면 오류 페이지로 리디렉션됩니다. 자신의 클라이언트 제공 업체 ID 및 클라이언트 비밀로
appsettings.json편집하고 OAUTH 애플리케이션이`localHost : 5000``로 리디렉션되어 있는지 확인하십시오.
/ : 색인 페이지 - 외부 소품에서 값 표시 hello world from svelte and display 유용한 링크/privacy - 개인 정보 보호 샘플 페이지, Razor Page ViewData에서 전달 된 Svelte 페이지에 H1 제목을 표시합니다./login - 외부 로그인 버튼 표시/authorized - Authorize 속성으로 보호 된 샘플 공인 페이지. 면도기 페이지에서 전달 된 간단한 승인 된 사용자 데이터를 표시합니다./401 무단 사용자가 Authorize 속성으로 페이지에 액세스하려고 할 때 리디렉션되는 무단 페이지 샘플./404 알 수없는 서버 경로의 경우 찾을 수 없습니다./spa 방식으로 다양한 경로를 표시하는 해시 태그 클라이언트 라우터 구성 요소가있는 단일 페이지 응용 프로그램 (SPA)의 SPA 예제.중요한 메모 :
wwwroot 에 파일을 출력하도록 구성되며 일반적으로 Razor 페이지 (또는 다른 페이지)로 가져올 수 있습니다.Svelte는 사용자 인터페이스 구축에 대한 급진적 인 새로운 접근 방식입니다.
반면 React 및 Vue와 같은 전통적인 프레임 워크는 브라우저에서 대부분의 작업을 수행합니다. 앱을 구축 할 때 발생하는 컴파일 단계로 작동하는 벨트 교대 근무입니다. Svelte는 Virtual Dom Diffing과 같은 기술을 사용하는 대신 앱 상태가 변경 될 때 DOM을 외과 적으로 업데이트하는 코드를 작성합니다.
Svelte는 작고 최적화 된 JavaScript 출력을 생성하는 컴파일러입니다.
Svelte는 마크 업을 컴파일러 출력으로 묶습니다. 이는 일반 마크 업보다 훨씬 작습니다.
그런 다음 브라우저에 캐싱 된 브라우저가 해당 마크 업을 다시 다운로드 할 필요조차 없기 때문에 모든 후속 요청이 더 빠르게 진행됩니다.
Svelte는 순수한 바닐라 JavaScript를 생성하기 때문에 런타임 오버 헤드가 없습니다. 이것은 또한 롤업과 함께 가져 와서 번들 및 런타임 프레임 워크를 가져올 수 있고, 아마도 당신이 가질 수있는 이전 UI 구성 요소를 재사용하기 위해 런타임 프레임 워크를 가져올 수 있음을 의미합니다. 예를 들어, jQuery가있는 레거시 코드.
StackoverFlow Survey에 따르면 Svelte는 2021 년에 개발자에게 가장 사랑받는 웹 프레임 워크가되었습니다.
롤업은 이미 ASP.NET 프로젝트, Compile, Bundle 및 제거 된 모듈을 제거한 다음 ASP.NET 프로젝트의 wwwroot 로 출력하도록 이미 사전 구성되어 있습니다.
평소와 같이 일반 ASP.NET Razor 페이지 (또는 MVC)를 계속 사용할 수도 있습니다.
결과는 매우 ** 최적화 된 웹 **** 응용 프로그램 *** : :
또한 서버 측면 렌더링을 최적화 된 Svelte 프론트 엔드 렌더링과 결합 할 수 있습니다.
무엇 보다도이 템플릿을 사용하여 지루한 구성을 피할 수 있습니다.
$ 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 예제에는 Svelte 및 롤업으로 jQuery를 사용하는 방법을 보여주는 페이지가 하나만 있습니다.
$ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run
메모:
degit git clone 초기화없이 최신 버전의 git Repo 컨텐츠를 다운로드하고 압축하는 것입니다.큰 녹색 버튼을 클릭하면 이 템플릿을 사용하십시오 .
기본 템플릿이 아닌 다른 템플릿 (jQuery 또는 Net5 예 : 먼저 분기를 변경하십시오.
각 면도기 페이지에는 두 개의 새로운 중첩 파일이 있습니다.
MyPage.rollup.config.js 이 페이지의 롤업 구성 파일.MyPage.entry.ts 이 페이지의 Entry Point TypeScript 모듈 파일.메모:
MyPage.cshtml (프로젝트 파일 설정을 통해)에 의존하여 VisualStudio 및 JetBrains 라이더와 같은 IDE가 시각적으로 중첩되도록합니다.*.cshtml 의 항목 이름과 ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js 의 값이있는 항목을 추가하십시오. 구성 파일 Scripts/rollup. 구성하고 다음 값을 설정합니다.
wwwroot /build plus entry module name with the ).wwwroot /빌드 plus entry module name with 입니다.이 repo의 샘플 페이지를 참조하십시오.
Entry 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 구성 요소 및 추가 모듈은 별도의 App Dir에 있습니다.
루트의 각 svelte 파일 구성 요소는 위에서 설명한대로 관련 면도기 페이지에서 사용됩니다. 이 예에서 각각은 헤더, 메인 섹션 및 바닥 글을 렌더링합니다.
즉, 마크 업의 대부분은 평균 크기가 약 18KB 인 각 페이지에 대해 단일 JavaScript 파일의 Svelte 컴파일러에 의해 생성된다는 것을 의미합니다.
렌더링은 즉각적이며 JS 출력은 클라이언트에 캐시되어 다운로드 크기를 줄입니다.
NPM 스크립트 UI 확장 기능 (IDE에서 실행)과 함께 사용할 DotNet 명령 :
dotnet-run dotnet run 런.dotnet-clean : dotnet clean .dotnet-build : dotnet build .SCSS 스타일 지원
fe-scss-build : Global CSS 파일 빌드 wwwroot/style.css SCSS 파일에서 압축 형식으로 App/scss/style.scss 가져 오는 것입니다.fe-scss-watch : Global CSS 파일 빌드 wwwroot/style.css SCSS 파일 App/scss/style.scss 에서 witch recursive 모드로 유지하는 형식으로 비 압축 형식으로 구축됩니다. Index 페이지에 대한 지원을 구축하십시오
fe-build : Index 페이지의 JavaScript 빌드. 출력은 소스 맵이없는 압축 형식의 wwwroot/build/index.js 입니다. JavaScript 파일을 디버깅 할 수 없습니다. 이것은 생산을위한 것입니다fe-watch : Index 페이지의 JavaScript를 빌드하십시오. 출력은 소스 맵과 함께 압축되지 않은 형식의 wwwroot/build/index.js 입니다. JavaScript 파일을 디버깅 할 수 있습니다. 이것은 생산을위한 것이 아닙니다. 프로세스는 파일 변경에 대한 모니터링을 계속 모니터링하고 그에 따라 재 구축합니다. 이것은 개발 프로세스에 유용합니다. 참고 : 다른 페이지를 빌드하거나 시청하려면이 명령 줄 npm run fe-build <page> 또는 npm run fe-build <page> , 여기서 페이지 이름은 확장자가없는 소문자 구성 파일입니다. 예를 들어 ./Pages/Index.rollup.config.js 의 index , ./Pages/Login.rollup.config.js 등의 login
모든 페이지
fe-build-all : Frontend Build-All. 모든 페이지와 모든 스타일 시트를 빌드하고 컴파일하려면 Scripts/build-all.js 스크립트를 호출합니다.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 Studio Code의 한 인스턴스를 열어build-urls 모든 응용 프로그램 URL이 포함 된 shared/urls.ts 파일을 자동으로 생성하는 .NET C# 스크립트를 호출합니다. 백엔드를 빌드하고 스크립트 명령을 실행하고 존재합니다. 이 명령은 UrlBuilderPath 구성 키를 사용합니다.build-models - 모델 네임 스페이스에서 모든 모델 인터페이스를 포함하는 shared/models.d.ts 파일을 자동으로 생성하는 .NET C# 스크립트를 호출합니다. 백엔드를 빌드하고 스크립트 명령을 실행하고 존재합니다. 이 명령은 구성 키 TsModelsFilePath ( shared/models.d.ts )에서 typeScript 파일을 생성합니다. 이는 ModelNamespace 구성 키 ( RazorSvelte.SampleData ) 아래 네임 스페이스에있는 TypeScript 인터페이스로 번역 된 모든 C# 공개 클래스가 포함됩니다. 예.
브라우저 디버그 콘솔을 사용하여 평소와 같이 디버깅을 할 수 있습니다. JavaScript에는 관련 .map 파일이 있어야합니다.
-w switch를 사용하여 인수 명령으로 .map 파일 실행 rollup 및 구성 파일을 만듭니다. 예를 들어:
rollup -c ./Pages/Index.cshtml.js -w
이 명령은 브라우저에서 디버깅을 가능하게하는 관련 맵이있는 압축되지 않은 wwwroot/build/index.js 파일을 만듭니다.
브라우저 소스 탭에는 정상적으로 디버그 할 수있는 App/index.svetle typescript 파일이 표시됩니다.
또한이 명령은 소스 파일을 계속보고 있으며 계속 변경하면서 점차적으로 빌드됩니다.
예.
"모두 빌드"명령을 사용하지 마십시오. 대신, 이전 질문에서 위에서 설명한대로 증분 빌드를 사용하십시오.
아니요, 외부 서버가 필요하지 않습니다.
이 프로젝트는 내장 .net 웹 서버를 사용합니다.
그러나 롤업 명령을 실행하려면 NodeJS 및 NPM이 설치되어 있어야합니다.
클라이언트 ID 및 클라이언트 비밀 값을 검색하고 구성 파일에 붙여 넣기 위해이 서비스에 로그인 앱을 작성해야합니다.
자세한 내용은 AppSettings.json을 참조하십시오.
외부 제공 업체의 승인이 통과되면 응용 프로그램은 외부 제공 업체가 이미 확인한 ID에 JWT Auth를 사용합니다. 따라서 값으로 JwtConfigSection 구성해야합니다.
Secret - 긴 비밀 무작위 문자열Issuer -JWT 토큰 발행자Audience -JWT 토큰 청중ExpirationMin - JWT 토큰 만료 시간 몇 분ClockSkewMin JWT 토큰 만료 시간을 추가하고 피하기 위해 null로 설정합니다.RefreshTokenExpirationMin 새로 고침 토큰 만료 분. 새로 고침 토큰 사용을 피하기 위해 NULL로 설정하십시오. 사용되는 경우, 발효가 완료되는 것이 더 길어야합니다.CookieExpirationMin 몇 분 만에 쿠키 만료. 사용하는 경우 토큰 만료 또는 새로 고침 만료보다 가장 길어야합니다.CookieName 보안 쿠키의 이름. 참고 : 토큰 새로 고침 옵션을 사용하는 경우 RefreshTokenRepository 클래스를 다시 구현하여 메모리 내 사전 대신 데이터베이스 또는 일부 영구 캐시를 사용하려고 할 수 있습니다.
페이지 라우팅은 ASP.NET 웹 서버에 의해 서버에서 여전히 처리됩니다. 즉,이 프로젝트는 단일 페이지 응용 프로그램 (SPA)이 아니라는 것을 의미하지만 전체 마크 업은 스파인 출력에 포함되어있어 스파 방식으로 클라이언트에 캐시됩니다.
그러나 서버 경로 /spa 중 하나는 스파 애플리케이션의 예입니다. 이 페이지는 svelte-spa-router 사용하며 해시 태그 경로와 함께 다양한 스파 뷰를 보여줍니다.
예를 들어, 숨겨진 입력을 사용하여.
<input id="title" type="hidden" value="@ViewData["Title"]" /> 페이지에 놓습니다. import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;개발 및 유지 관리가 훨씬 쉽고 빠르는 것 외에도 더 빠릅니다. 전체 마크 업은 Svelte 구성 요소의 컴파일 된 JavaScript 파일 내부에 포함되어 있으며 처음으로 다운로드 한 다음 모든 새로운 요청에 따라 캐시됩니다.
이는 응용 프로그램의 네트워크 트래픽을 크게 줄입니다.
그런 다음 페이지가로드 될 때 마크 업이 즉시 렌더링됩니다.
저작권 (C) Vedran Bilopavlović -VB Consulting 및 VB Software 2022이 소스 코드는 MIT 라이센스에 따라 라이센스가 부여됩니다.
