角8とASPでシンプルなcrudアプリをビルドします.ネットコア2.2 -パート1 -バックエンド

パート1 - ASPとバックエンド。NETコア2.2とEntity Frameworkコア

のASPを使用してCRUD Webアプリを構築する方法を見てみましょう.NETコア2.2、Entity Frameworkコア、および角度8.これは、我々がバックエンドに集中するパート1です.
我々は、バックエンドと角のアプリフロントエンドの残りのAPIを持っているよ.
基本的なCRUDアプリはブログ、ここでは、作成、読み取り、更新、およびブログの記事を削除することができます.
Github repo is here: Angular 8 blog app tutorial using .NET Core 2.2 and Entity Framework back-end

必要条件

.NET Core 2.2 SDK

Visual Studio 2019

角度フロントエンドについても、

VS Code

Node.js

Angular CLI

上記のことを確認します.Visual Studio 2019をフロントエンド用のバックエンドとVSコードに使用します.ただし、必要に応じてVisual Studio 2019のみを使用できます.
月15日現在、プレビューがあります.Visual Studio 2019のプレビューで動作するNETコア3.しかし、このチュートリアルでは、プレビューを使用しないで完全にリリースされたバージョンのみを使用します.NETコア2とVisual Studio 2019.

クリエイト.NETコア2.2 REST API

Visual Studio 2019で、新しいプロジェクトを作成し、ASP . NETを選択します.NETコアWebアプリケーション.プロジェクトに名前を付けます.次に選択します.ASP .NETコア2.2バージョンとAPIテンプレート

モデルとエンティティフレームワークのデータベースコンテキストを追加する

次に、モデルと呼ばれるフォルダーを作成し、ブログ投稿というクラスファイルを追加しましょう.cs必要な名前空間をインポートするようにしてください.
< div >
その後、APIコントローラを作成します.コントローラ.次に、Entity Frameworkを使用してアクションをAPIコントローラを選択します.p >
<ウル>

モデルクラスとしてブログ投稿を選択します.p >

データコンテキストクラスの下で+ボタンを押してコンテキストBlogPostsContextを呼び出します.p >

< ull >
< P >

「追加」を押すと、Visual Studioによって必要なNuGetパッケージが追加され、データフォルダに「BlogPostContext」という新しいデータベースコンテキストが作成されます.また、たくさんのAPIメソッドでいっぱいになっています.p >
< bf > BlogPostsContextの内容.cs :< p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/830fe1b579de0ddbedbd37ebc5c77f88.js//>
< div >
新たに作成されたBlogPostsControllerの内容.私たちのapicontroller
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/0c587170a6730247bba3980812248815.js//>
< div >
これは、ルート設定、すべてのCRUD操作と注釈を使用して正しいHTTP動詞(httppost、httpget、httpput、httpdelete)で完全にコードを処理しています.また、私たちのAPIを強制的にJSONを提供する[Produces("application/json")] フィルタもp >
私たちはREST APIのベストプラクティスに従っています.リストデータを取得したり、新しいデータを追加したり、既存のデータを更新するためにポストしたり、データを削除するために削除したりします.p >
<高橋潤子>このコンテキストは、アプリケーションのバックエンドに必要なすべてのアクションを実行するために使用されます.p >
しかしながら、このリポジトリのデザインパターンを使用してデータリポジトリを作成し、それを注入します.p >

データリポジトリの作成

既存のコードは動作しますが、アプリケーションが成長するにつれて、ロジックを別の層に分割する方が良いです
<ウル>

データベースと通信するデータリポジトリを持つデータ層p >

論理層とデータ層通信を処理するためのサービスを持つサービス層p >

APIコントローラだけのプレゼンテーション層p >

< ull >
アプリケーションには、データリポジトリと通信するAPIコントローラがあります.倉庫を作りましょうp >
< tag >データフォルダを右クリックし、idatarepositoryという新しいインターフェイスを作成します.このコードをコピーしてペーストします.cs :< p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/66280843b4200222f19700b6b7bf673c.js//>
< div >
次に、データフォルダを再び右クリックし、DataRepositoryという新しいクラスを作成します.このコードをDataRepositoryにコピーしてペーストします.cs :< p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/5b74095e49b6ee3c3cf91921d0916e85.js//>
< div >
<堀田,武井( 2.4.0更新)>p >

データリポジトリを使用するように更新する

<高橋潤子>
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/eabc1a53de43ae6a1b42ff8981a61410.js//>
< div >
< p >あなたはデータリポジトリをPutBlogPost , PostBlogPost and DeleteBlogPost 以下のようにします.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/d3ce9210d8c522fc8354a95a40bf80a7.js//>
< div >
しかし、コンテキストとデータリポジトリの両方を使用して、コントローラ内のBlogPostsContextに依存するようにします.p >

アプリケーションの設定

起動時の< p >CSは、すでにいくつかの設定を見ることができます-私たちのアプリは、MVCを使用し、インスタンスのDBコンテキストがあります.ConfigureServicesメソッドを更新します.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/665d3027909c7a36f9c2cb76c352bab7.js//>
< div >
私たちのAPIをJavaScriptから呼び出すつもりですので、CORSを有効にする必要があります.デフォルトのポリシーを使用します.p >
<高橋潤子>p >
必要な名前空間をインポートするようにします.p >
私たちはコメントアウトしましたservices.AddSpaStaticFiles() . 我々は角度のアプリケーションを作成したときにこれをコメントしないでください.p >
次に、configureメソッドを更新します.
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/b2b553c5cb4fa330b4bd88f277a52f8e.js//>
< div >
< P >UseCors 来る前にUseMvc はい.必要な名前空間をインポートすることを忘れないでください.p >
ここでSPA特有の設定をコメントしました.我々はコメントを解除しますapp.UseSpaStaticFiles() and app.UseSpa() その後、アングルアプリケーションを作成しました.p >
< tt > LaunchSettingsも更新しましょう.セットするJSONlaunchUrl 二つの場所に空にする
< P >"launchUrl": “”

<高橋>コントローラも削除します.コントローラフォルダ内のcsp >

セットアップの移行とデータベースの作成

私たちはほとんどそこにいる!p >
<高橋潤子>**この項目の翻訳は古いバージョンが元になっています**まず、appsettingsのデータベース接続文字列を見てみましょう.JSON .p >
接続文字列は私たちの以前に作成され、アプリケーションはSQL Server ExpressのlocalDBを使用します.もちろん、SQL Serverのインスタンスを使用して、接続文字列が正しいかどうかを確認できます.p >
< div class ="LagagCount - gig - Link - tag "
"スクリプトのID "https://gist.github.com/dileno/976302990ae6a8b4347311afc1213967.js//>
< div >
移行を可能にするために、パッケージマネージャコンソール( tools :& gt ; nuget package manager & gt ; package manager console )を開き、このコマンドを実行します.
< P >Add-Migration Initial

このメッセージを返します
<> P >
クラスをハイライト表示する

Microsoft.EntityFrameworkCore.Infrastructure[10403]

Entity Framework Core 2.2.6-servicing-10079 initialized 'BlogPostsContext' using provider 'Microsoft.EntityFrameworkCore.SqlServer' with options: None

To undo this action, use Remove-Migration.

< div >
< P >パーフェクト!移行フレームワークは、Entity Frameworkモデルに変更を含むEntity Frameworkの移行で作成されます.私たちには、20190912150055 Cert初期のような何かという名前の移行ファイルがあります.cs

このファイルでは、Up and Down メソッドは、次の、または以前のバージョンにデータベースをアップグレードしてダウングレードします.p >
データベースを作成するには、次のコマンドを実行しなければなりません.
< P >Update-Database

SQL Serverオブジェクトエクスプローラーを開きます.これは以下のようになります:< p/p >
< P >

覚えておいてください.データモデルに変更を加えると、Add-Migration YourMigrationName and Update-Database データベースへの変更をプッシュするコマンドp >

APIを試してください

Visual StudioでF 5キーを押してアプリケーションを起動します.localhostでは、/api/blogposts これは空のJSON文字列を返すべきです.これでPostman 新しいブログ記事を作成するにはp >
<投稿> JSON POST : < br/>
<> P >
クラスをハイライト表示する

{
  "dt": "2019-09-12T18:18:02.190Z",
  "creator": "Martin",
  "title": "Test",
  "body": "Testing"
}

< div >
Postmanでは、API URLが正しいことを確認し、POSTをHTTP動詞として使用します.エディターで上記のJSONを入力し、「送信」を押す前に「JSON(application/json)」を選択します.リクエストと返されたbody resultは以下のようになります.
< P >

そして、もしあなたが投稿からHTTP動詞を取得するなら、この結果を得るでしょう
< P >

APIが稼働中です!p >
今私たちの角度8フロントエンドのアプリに.チュートリアルのパート2ですp >