create blazor app

大部分情况下，开发人员遇到的都是维护工作：在现有的代码下，进行维护和新的业务功能开发。
比较少有需要自己全新创建整个 Solution 的情况，所以很多基础的 Dotnet 命令会比较生疏，都是先用先查。

dotnet core 3.1 已经 Release 了，今天尝试一下 BlazorApp 模板，并结合使用 EntityFramework 和 Postgresql + Sqlite 两种 DB。记录一下 dotnet 的系列命令。

需求计划

创建标准的 Solution 目录结构。

BlazorApp2
  --src/BlazorApp
  --test/BlazorApp.UnitTest
  --BlazorApp2.sln

使用 Dapper 从 Postgresql 读取数据，并实时显示日志信息。
使用 CodeFirst 创建 Sqlite DB。并完成数据的增删改查功能。

准备工作

Postgresql 环境，使用 Docker stack 搭建。

# 启动命令 docker stack deploy postgres -c stack.yml
# 执行的时候可能会需要先执行 `docker swarm init`

# 访问 localhost:8080
# user/password 是 postgres/postgres

version: "3.7"

services:

postgres:
  image: postgres
  restart: always
  ports:
    - "5432"
  environment:
  POSTGRES_PASSWORD: postgres
  volumes:
    - "postgres-data:/var/lib/postgresql/data"
  networks:
    - app_net

adminer:
  image: adminer
  restart: always
  ports:
    - 8080:8080
  networks:
    - app_net

networks:
app_net:

volumes:
postgres-data:

创建标准 Solution 目录结构

mkdir BlazorApp2
dotnet new sln
mkdir src
dotnet new blazorserver -o src/BlazorApp
dotnet sln BlazorApp2.sln add src/BlazorApp/BlazorApp.csproj
mkdir test
dotnet new mstest -o test/BlazorApp.UnitTest
dotnet sln BlazorApp2.sln add test/BlazorApp.UnitTest/BlazorApp.UnitTest.csproj
代码覆盖率报告怎么加？
dotnet build
dotnet test
dotnet run –project src/BlazorApp/BlazorApp.csproj

Dapper 读取 Porstgresql 数据

cd src/BlazorApp
dotnet add package Dapper –version 2.0.30
dotnet add package Npgsql
add ConnectionStrings in appsettings.json

add Data/SyncDataService.cs

using Dapper;
using Npgsql;

namespace BlazorApp.Data
{
    public class SyncDataService
    {
        private readonly IConfiguration _configuration;

        public SyncDataService(IConfiguration configuration)
        {
            _configuration = configuration;
        }

        public void SyncData()
        {
            string connStr = _configuration.GetConnectionString("ReportDB");
            using (NpgsqlConnection conn = new NpgsqlConnection(connStr))
            {
                conn.Open();

                string sql = "select id, report from report limit 5";
                var res = conn.Query<Report>(sql);

                conn.Close();
            }
        }
    }
}

add Pages/SyncData.razor

@page "/SyncData"

@using BlazorApp.Data
@inject SyncDataService _syncDataService

<h1>SyncData</h1>
<hr />

@if (_syncDataService.Reports != null && _syncDataService.Reports.Any())
{
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Report</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var r in _syncDataService.Reports)
            {
                <tr>
                    <td>@r.id</td>
                    <td>@r.report</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    protected override Task OnInitializedAsync()
    {
        _syncDataService.Reports();
    }
}

Registry service services.AddScoped<SyncDataService>(); in Startup.ConfigureServices
Update Shared/NavMenu.razor file.
dotnet run

DBFirst with Porstgresql

dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Tools

dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL

using Microsoft.EntityFrameworkCore;
namespace BlazorApp.Data
{
    public class ScanReportDBContext : DbContext
    {
        public ScanReportDBContext(DbContextOptions<ScanReportDBContext> options) : base(options)
        {

        }

        public DbSet<ScanReport> scanReport { get; set; }
    }
}

dotnet tool install –global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL.Design
dotnet ef dbcontext scaffold “Data Source=xxxx” Npgsql.EntityFrameworkCore.PostgreSQL –context-dir Data –output-dir Models

Code First with Sqlite

dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet tool install –global dotnet-ef
dotnet ef migrations add InitMigration
dotnet ef database update

Using MemoryCache

using Microsoft.Extensions.Caching.Memory;

namespace BlazorApp2.Data
{
    public class ScanReportService
    {
        private const string cached_scan_reports_key = "cached_scan_reports";
        private readonly IMemoryCache _memoryCache;
        private readonly ScanReportContext _scanReportContext;
        public ScanReportService(IMemoryCache memoryCache, scanReportContext scanReportContext)
        {
            _memoryCache = memoryCache;
            _scanReportContext = scanReportContext;
        }
        public List<Report> SyncScanReportToCache()
        {
            List<Report> cached_scan_reports;
            if (!_memoryCache.TryGetValue(cached_scan_reports_key, out cached_scan_reports))
            {
                cached_scan_reports = new List<Report>();
            }else
            {
                // cached_scan_reports = _scanReportContext.Report.ToList();
                _memoryCache.Set(cached_scan_reports_key, cached_scan_reports);
            }
            return cached_scan_reports;
        }
    }
}

文章目录