Интеграция приложений с одной страницей в Visual Studio

Технология:

  • Visual Studio 2017
  • Asp.Net Core Tooling 1.1
  • .Net Framework 4.6.2

Одностраничное приложение и их интеграция в Visual Studio стали проще, со всей новой поддержкой, встроенной в Visual Studio. Но ранее на этой неделе Jeffery T. Fritz опубликовал очень хорошую статью об интеграции и внедрении со следующими пакетами:

  • Microsoft.AspNetCore.SpaServices
  • Microsoft.AspNetCore.NodeServices

После того, как вы просмотрите и проанализируете пару шаблонов, вы заметите в своем обозревателе решений, каталоге ClientApp. Это настраивается и маршрутизируется через Webpack.

Внутри Startup.cs появляется проблема.

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });
    }

Внутри нашего запроса у нас есть некоторая маршрутизация в нашу MVC Framework.

Вопрос, , почему нам нужно указывать этот маршрут? Если мы просто используем app.UseDefaultFiles() и app.UseStaticFiles() и указали наш индекс в нашем wwwroot. Наш клиентский маршрутизатор всегда будет возвращен. Итак, почему мы не делаем этого так:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseDefaultFiles();
        app.UseStaticFiles();
    }

Я понимаю, что элементы непосредственно в нашем wwwroot не сжаты, также могут быть утечки безопасности, но помимо этих двух недостатков, почему бы не использовать этот маршрут, чтобы гарантировать, что ваш индекс и клиентский маршрутизатор не всегда возвращаются?

Я специально спрашиваю о том, как заставить MVC всегда возвращать Home/Index или UseDefaultFiles()/UseStaticFiles(). Что мне не хватает, почему нам сказали заставить MVC вернуть его?

Важно: в основном проблема связана с тем, как заставить индекс возвращаться, поэтому наш клиентский каркасный маршрутизатор обрабатывает изменения, а бэкэнд возвращает определенное состояние просмотра.

Ответ 1

Кажется, все вещи, которые мы видели, были еще более красиво упакованы.

    // allow returning of physical files on the file system of the web root and it sub dirs
    app.UseDefaultFiles();
    app.UseStaticFiles();

    // map MVC routes to controller actions when a static file cannot be found
    app.UseMvc(routes =>
    {
       // default routing convention for mapping "most situations"
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");

        // fallback routing 
        routes.MapSpaFallbackRoute(
            name: "spa-fallback",
            defaults: new { controller = "Home", action = "Index" });
    });

Согласно комментариям...

Это действительно откат, если статический файл не существует. Но если это содержит index.htm в wwwroot, он технически никогда выполнить этот маршрут, если не передана информация об отдельном заголовке

Ответ 2

Эти шаблоны SPA используют минимальную основу ASP.NET Core MVC. Нам нужен маршрут по умолчанию для MVC для генерации разметки html из Index.cshtml.

Я не вижу никаких простых файлов html, сгенерированных в папке шаблона wwwroot/dist. Итак, app.UserDefaultFiles() не имеет Index.html для перехода.

Я мог бы предположить, что, возможно, маршруты mvc существуют и в том случае, если кто-то решит включить больше контроллеров/действий/просмотр для многостраничного приложения SPA (oxy-moron); или для начала работы с backp app...?

Я не так хорошо знаком с MapSpaFallbackRoute, но он служит для всех маршрутов, не охватываемых SPA. См. Исходный код: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Routing/SpaRouteExtensions.cs

Чтобы быть целостным, давайте упомянуть, что если мы хотим быть без сервера, статично файловыми, служить-из-в-CDN- есть стартовые шаблоны и angular cli для загрузки:

https://github.com/AngularClass/angular2-webpack-starter

https://github.com/angular/angular2-seed

https://cli.angular.io/

Но если эти статические /mvc -less Javascript-приложения размещаются в IIS, им потребуется web.config с минимальной настройкой маршрутизации. См:

https://github.com/angular/angular/issues/11046

EDIT:

Другая причина может заключаться в том, что многие люди будут использовать веб-api в этих проектах, и для этого нам все равно потребуется app.UseMvc();