タスク管理ツールをReact + ASP.Coreで作る 07APIを修正し、DBのデータをクライアントサイドで表示する

前回の続きです。
今回は構築したDBの情報をクライアントサイドで表示出来るようにしていきます。

ガイド

全体Index：タスク管理ツールをReact + ASP.Coreで作る - Index

コントローラクラスを修正する

前回DBを構築してデータの登録まで完了したので、コントローラークラスを修正してDBのデータを取得し、APIに返すように修正します。

修正後のコードは以下の様になります。
(変更点が多いので差分ではなく修正後のみを表示しています)
コンテキストクラスを用いてDB内のt_taskテーブルの中身をリスト形式で返すという内容です。

TaskController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Logging;
using server_app.Models.EDM;

namespace server_app.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TaskController : ControllerBase
    {
        private readonly DataContext _context;
        public TaskController(DataContext context)
        {
            _context = context;
        }
        [HttpGet]
        public async Task<ActionResult<List<t_task>>> Get()
        {
            return await _context.t_tasks.ToListAsync();
        }
    }
}

参考：前回からの差分(開くと表示)

TaskController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
+ using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Logging;
using server_app.Models.EDM;

namespace server_app.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TaskController : ControllerBase
    {
-        private readonly ILogger<TaskController> _logger;
-        public TaskController(ILogger<TaskController> logger)
-        {
-            _logger = logger;
-        }

+        private readonly DataContext _context;
+        public TaskController(DataContext context)
+        {
+            _context = context;
+        }



-        [HttpGet]
-        public IEnumerable<t_task> Get()
-        {
-            var rng = new Random();
-            return Enumerable.Range(1, 5).Select(index => new t_task
-            {
-                id_task = Guid.NewGuid(),
-                title = "item_" + index.ToString(),
-                is_finish = true,
-                end_date_scheduled = DateTime.Now.AddDays(index)
-            })
-            .ToArray();
-        }

+        [HttpGet]
+        public async Task<ActionResult<List<t_task>>> Get()
+        {
+            return await _context.t_tasks.ToListAsync();
+        }
    }
}

APIを実行してみる

サーバーサイド側のアプリケーションを立ち上げて/task APIにアクセスしてみると、これまでのダミーデータではなく、DBに登録したデータが表示されていることが分かります。

クライアントを実行

サーバーサイドは、DBのデータをAPIが返すように修正できました。
クライアントサイドは、APIのデータを受け取って表示する内容に既に実装されているので、実行すればもうDBのデータがブラウザに表示されます。

さっそく実行してみましょう

SQ Liteのテーブルと見比べると、DBの内容がクライアントサイドに表示されていることが分かります。

今回はここまでです
続きは次回です