Скачать RazorSvelte - RazorSvelte исходный код скачать

RazorSvelte

Другие категории

1.0.0

Скачать

Razorsvelte

Примечание:
Есть несколько других оцениваемых структур пользовательского интерфейса, и, наконец, этот шаблон оседает с начальной загрузкой.
Чтобы использовать другие шаблоны, например, пользовательский интерфейс углерода или материала, см. Инструкции по установке ниже в этом файле.
Это шаблон проекта, и поэтому постоянно обновляется с улучшениями, а новые компоненты нуждаются в более современном и универсальном веб -приложении.

Репозиторий шаблона проекта, содержащий шаблонный проект со следующей настройкой:

ASP.NET RAZOR PAGES (C# и .NET8).
Свлажа Javascript Framework, настроенная для использования с помощью TypeScript и SCSS -препроцессора.
Rollup JavaScript Bundler System.
Bootstrap 5+ CSS Framework, настроенная для препроцессора SCSS, см. Https://getbootstrap.com/docs/.
Значки начальной загрузки см. Https://icons.getbootstrap.com/.
Образец механизма аутентификации с использованием (JWT с использованием файлов cookie с дополнительными токенами обновления) и с тремя поставщиками внешнего входа (Google, LinkedIn и GitHub).
Образцы страниц, такие как индекс, конфиденциальность, вход в систему, вход, авторизованная образец страница, несанкционированная (401), не найдено (404) и страница ошибки.
Пример приложения приложения для одного страницы с использованием хэштега -компонента маршрутизатора.
Встроенная поддержка темной темы с темой встроенного механизма переключения.
Образец начальной загрузки компонентов с демонстрацией. Новые компоненты добавляются постоянно.
Компоненты пользовательского интерфейса включают:
- chart - обертка для chart.js.
- chart-box -диаграмма с заголовком и полноэкранными кнопками масштабирования.
- data-grid - Сетка данных с удаленным источником данных, который использует таблицы начальной загрузки.
- modal - обертка для начальной модала.
- multiselect - Несколько выпадающих списков выберите с поиском и виртуальным свитком.
- offcanvas - обертка для Bootstrap OffCanvas.
- pager - Pagestrap Pager, который работает с Data Grid.
- placeholder - загрузка заполнителя на основе заполнителя начальной загрузки, в основном используемых другими компонентами для управления неэлиальным состоянием.
- 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) с компонентом хэштега клиентского маршрутизатора, который отображает различные маршруты в SPA.

Важные примечания:

Нет другого веб -сервера Nodejs. СВОВЕТ интегрируется со страницами бритвы.
Rollup JavaScript Bundler настроен на выводы файлов в wwwroot , и вы обычно можете импортировать их в страницы бритвы (или любые другие страницы).
Нет необходимости настраивать COR, так как все обслуживается .NET Web Server (Kestrel).

Почему

Svelte - это радикальный новый подход к созданию пользовательских интерфейсов.
Принимая во внимание, что традиционные рамки, такие как React и Vue, выполняют большую часть своей работы в браузере, - сдвигает, которые работают в шаг компиляции, который происходит при создании своего приложения. Вместо того, чтобы использовать методы, такие как виртуальные DOM Diffing, Svelte записывает код, который хирургически обновляет DOM при изменении состояния вашего приложения.
Svelte - это компилятор, который производит небольшие и очень оптимизированные выводы JavaScript.
Стэйс переворачивает свою разметку в вывод компилятора, что еще меньше, чем обычная разметка.
Выходная компилятор -компилятора затем кэшируется в браузере, что делает каждый последующий запрос еще быстрее, поскольку браузер даже не должен загружать эту разметку снова.
Поскольку SVELTE производит чистый ванильный JavaScript, накладных расходов не существует. Это также означает, что вы можете импортировать и объединить (с подключением) и структурой времени выполнения, которые вам могут понадобиться, возможно, для повторного использования старых компонентов пользовательского интерфейса, которые у вас могут быть. Например, устаревший код с jQuery.
Согласно опросу StackOverflow, Svelte стала самым любимым веб -структурой для разработчиков за 2021 год.
Rollup уже предварительно настроен для работы с проектом ASP.NET, компиляции, объединением и удалением неиспользованных модулей, а затем выводится в ваш wwwroot вашего проекта ASP.NET.
Вы также можете продолжать использовать обычные страницы ASP.NET Razor (или MVC), как обычно.

Результатом является очень ** оптимизированное приложение Web **** *** с:

Бэкэнд обслуживается ASP.NET.
Передняя часть отображается и оптимизируется с помощью Svelte и Rollup.

И вы можете объединить рендеринг на стороне сервера с оптимизированным передним рендерингом.

Лучше всего - вы можете избежать утомительной конфигурации, используя этот шаблон.

Установка

Из командной строки:

Основной шаблон

 $ 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

.Net 5 шаблон

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

Шаблон jQuery

Пример JQUERY имеет только одну страницу, которая демонстрирует, как объединить использование jQuery со стрте и RULLUP.

 $ 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 - файл конфигурации Rollup для этой страницы.
MyPage.entry.ts - Файл модуля TypeScript Point Point для этой страницы.

Примечание:

Эти два новых файла зависят от MyPage.cshtml (через настройки файлов проекта), так что IDE, такие как VisualStudio и JetBrains Rider, были бы их визуально.
Вы можете гнездовать файлы в коде Visual Studio, включив гнездование файлов и обновления «Гнездование файлов: шаблоны» в настройках Explorer. Добавьте элемент с названием элемента *.cshtml и значением ${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.js .

Файл конфигурации

Импорт файла конфигурации Global 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.

См. Примерные страницы в этом репо.

Модуль ввода типографии

Модуль ввода TypeScript импортирует слабый файл для этой страницы и возвращает приложение 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 >
}

Стройные компоненты

Все стройные компоненты и дополнительные модули находятся в отдельном App .

Каждый svelte компонент File в корне используется соответствующей страницей бритвы, как описано выше. Каждый из них сделает в этом примере заголовок, основной раздел и нижний колонтитул.

Это означает, что большая часть разметки производится стройным компилятором в одном файле JavaScript для каждой страницы со средним размером около 18 КБ.

Рендеринг мгновенный, а вывод JS кэшируется на клиенте, чтобы уменьшить размер загрузки.

Сценарии и инструменты NPM

Команды Dotnet для использования с расширениями UI сценариев NPM (запустите из вашей 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 Scripts/Watch-all.js`-сценарий для создания, компиляции и наблюдения за всеми страницами и всеми таблицами стилей.
Другой:
- npm-upgrade : обновляет все зависимости NPM до последней версии. Используйте это с осторожностью. Чтобы иметь возможность запустить эту команду, требуется глобальная зависимость npm-check-updates . Используйте npm install -g npm-check-updates напрокат.
- code : открывает один экземпляр кода Visual Studio
- `new-Page: подсказывает пользователя новое имя страницы, и если возраст не существует, добавляет новую страницу и выполняет все соответствующие изменения кода.
- 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 , запустить файл rollup и Configuration в качестве команд аргумента с переключателем -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 - обновить токен токен. Установите NULL, чтобы избежать использования токенов обновления. Если он используется, он должен быть длиннее истечения срока токена, чтобы вступить в силу.
CookieExpirationMin - срок годности печенья. Это должно быть самым длинным, чем истечение срока действия токена или истечения срока обновления токена при использовании.
CookieName - имя Cookie Security.

Примечание. При использовании опции обновления токена, вы можете захотеть повторно внедрить класс RefreshTokenRepository для использования базы данных или какого-либо постоянного кэша, а не в словарю в памяти.

Сделано ли маршрутизация страницы на клиенте или на сервере?

Маршрутизация страницы все еще обрабатывается на сервере веб -сервером ASP.NET. Это означает, что этот проект не является приложением на одну страницу (SPA), хотя вся разметка содержится в выходе стройного, что означает, что он кэшируется на клиенте в спа-салоне.

Тем не менее, один из серверных маршрутов /spa является примером приложения SPA. На этой странице используется svelte-spa-router и показывает различные представления о спа-салоне с хэштегом.

Могу ли я отправить данные со своей страницы бритвы на стройный компонент?

Да, например, с помощью скрытых входов.

Поместите <input id="title" type="hidden" value="@ViewData["Title"]" /> на вашей странице.
В вашем стройном файле:

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

Это быстрее, чем обычные страницы бритвы с JavaScript?

Помимо того, что он намного проще и быстрее развиваться и поддерживать, да, это быстрее. Вся разметка содержится и мини -минимум внутри скомпилированных файлов JavaScript из Svelte Components, которые затем загружаются в первый раз, а затем кэшируют для каждого нового запроса.

Это значительно уменьшает сетевой трафик для вашего приложения.

Затем наценка отображается мгновенно, когда страница загружается.