1. 程式人生 > >.net core mvc初級教程(三)

.net core mvc初級教程(三)

一、更正popper.js的錯誤
二、打包js
三、新增服務與路由,中介軟體

一、更正popper.js的錯誤

emmm,今天來更正些昨天的錯誤
那個package.json裡面的popper改為"popper.js": “1.14.6”,後面的版本也改下,然後點選儲存

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "4.2.1",
    "jquery-slim": "3.0.0",
    "popper.js": "1.14.6"
  }
}

在這裡插入圖片描述

二、打包js

在wwwroot/js資料夾下新增site.js
然後開啟bundleconfig.json進行js打包操作

[
  {
    "outputFileName": "wwwroot/css/all.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "wwwroot/css/site.css"
    ]
  },
  //上面用於開發
  //下面用於生產
  {
    "outputFileName": "wwwroot/css/bootstrap.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "minify": {
      "enabled": false //意為沒有對它進行壓縮
    }
  },
  //js
  {
    "outputFileName": "wwwroot/js/all.min.js",
    "inputFiles": [
      "node_modules/jquery-slim/dist/jquery.slim.js",
      "node_modules/popper.js/dist/js/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true //true重新命名區域性變數
    },
    "sourceMap": false //一個儲存原始碼與編譯程式碼對應位置對映的資訊檔案
  },
  {
    "outputFileName": "wwwroot/js/vendor.js",
    "inputFiles": [
      "node_modules/jquery-slim/dist/jquery.slim.js",
      "node_modules/popper.js/dist/js/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.js"
    ],
    "minify": {
      "enabled": false
    }
  }
]

然後點選解決方案,店家重新生成
在這裡插入圖片描述
js資料夾就會多出兩個

三、新增服務與路由,中介軟體

接下來就是新增服務與中介軟體了
開啟stratup類,在ConfigureServices方法中新增

services.AddMvc();註冊服務

在Configure方法
去掉
app.Run(async (context) =>
{
await context.Response.WriteAsync(“Hello World!”);
});

新增預設路由
app.UseMvc(routes =>
{
//預設路由:沒有指定url和controller情況下會預設找到下面這個
routes.MapRoute(
name: “default”,
template: “{controller=Home}/{action=Index}/{id?}”);
});

開啟launchSettings.json,把這個去掉,可直接開啟控制檯
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

開啟瀏覽器輸入localhost:5000

卻發現什麼都沒

然後在Configure方法新增

//顯示錯誤
app.UseStatusCodePages();

//載入wwwroot資料夾下css,js
app.UseStaticFiles()

這兩個方法,作用都備註了;

再執行,輸入網址
在這裡插入圖片描述
這個是預設顯示的錯誤

還可以自己新增自定義錯誤輸出
app.UseStatusCodePagesWithRedirects();
這裡就不用了

stratup類程式碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using DemoCoreStudy.Serivce;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Routing;
using Microsoft.Extensions.DependencyInjection;

namespace DemoCoreStudy
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

            services.AddSingleton<ICinemaService, CinemaMemoryService>();
            services.AddSingleton<IMovieService, MovieMemoryService>();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            //顯示錯誤
            //app.UseStatusCodePages();

            //新增自定義錯誤
            //app.UseStatusCodePagesWithRedirects();

            //載入wwwroot資料夾下css,js
            app.UseStaticFiles();

            app.UseMvc(routes =>
                {
                    //預設路由:沒有指定url和controller情況下會預設找到下面這個
                    routes.MapRoute(
                        name: "default", 
                        template: "{controller=Home}/{action=Index}/{id?}");
                });
        }
    }
}