LoginSignup
0
1

More than 1 year has passed since last update.

VisualStudio2022とVsCodeでReact+ASP.NET Coreを使ってみた

Posted at

VisualStudio2022を使用してフロントエンドはReactバックエンドはAsp.NET_Coreのプロジェクトを作成するための備忘録です

環境

・VisualStudio2022
・VisualStudioCode
・Postman  ※API確認・開発便利ツール
・SQLSERVER
・node.js

実際に作成していく

VisualStudio2022で「ASP.NET Core WebAPI」プロジェクトを選択

細かな手順は公式docsを参考にしました
チュートリアル

何はともあれ一度実行してみる
image.png

レスポンス200 でJSONデータが返されていることが確認できた
image.png

launchUrl を更新する

チュートリアルにも書かれてるが Properties\launchSettings.json の launchUrl を "swagger" から "api/プロジェクト名" に更新。

モデルクラスを作成

プロジェクト⇒追加⇒新しいフォルダで[Models]フォルダを作成。MVC のMの部分です

EntityFrameworkCoreのインストール

今回はSQLSERVERを使用するので必要なefcのパッケージをNuGetを使用してインストールします

image.png
image.png

この二つをインストールします。これによってEntityFrameworkを使用してSQLSERVERに接続するためのパッケージがプロジェクトにインストールされます

contextクラスの作成

インストール完了後に、「Models」フォルダ右クリック「追加」→「クラス」⇒「プロジェクト名Context」というクラスを作成します

image.png

appsettings.jsonに接続文字列を追加

appsettings.json
 "ConnectionStrings": {
    "プロジェクト名Database": "Server=サーバー名\\;Database=データベース名;persist security info=True;user id=ユーザ名;password=パスワード;MultipleActiveResultSets=True"

  }

program.csに追加

program.cs
builder.Services.AddControllers();

builder.Services.AddDbContext<作成したContextクラス>(options =>
  options.UseSqlServer(builder.Configuration.GetConnectionString("プロジェクト名Database")));

//データベース例外処理
builder.Services.AddDatabaseDeveloperPageExceptionFilter();

---------
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
else
{
    app.UseDeveloperExceptionPage();
    app.UseMigrationsEndPoint();
}

データベースの例外処理のために
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore NuGet パッケージを追加します

Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore NuGet パッケージには Entity Framework Core のエラー ページ用の ASP.NET Core ミドルウェアが用意されています。 このミドルウェアは、Entity Framework Core の移行に関するエラーを検出して診断するのに役立ちます。

コントローラーの作成

 続く...

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1