使用Blazor构建CRUD项目

左转的小电驴

在小公司中，往往没有一个前后端分离的大型团队，去各司其职的负责构建web应用程序。面对比较简单的需求，可能所谓团队只有一个人，既要开发前端又要开发后端。
如果能有一项技术，能够前后端通吃，并且具备非常高的开发效率，那就非常适合小公司的小型项目的小型甚至一人团队来使用了。
aspdotnet就是这样高效的后端开发框架，而有了blazor后，C#前端也可以通吃了，真正做到了一套框架，一种语言，前后端通吃。
本文使用aspdotnet + blazor，快速构建了一个CRUD项目。
1. 新建项目

新的Blazor Web App，可以同时使用Blazor Server和Blazor WebAssembly两种渲染模式

勾上sample pages

在生成的解决方案中，有两个项目

后面.Client的，就是WebAssembly的部分，这一部分只需要关注Pages里的页面。当用户访问这个页面时，就是WebAssembly，于是就可以离线操作页面。
如果页面功能不涉及前后台数据交互，则可以使用WebAssembly模式。
例如，问卷调查、考试，从后台获取数据，前提渲染出题目后，就是答题的过程。知道用户提交答案之前，都不需要与后台又交互。这时候整个作答页面可以使用WebAssembly。
2. 添加数据库支持

给项目添加sqlite数据库支持

• 引入nuget包
  
• 编写DbContext类
  
• 编写Model类
  
• 运行Package Manager Console命令
  

 新建DefaultDbContext.cs文件

1. using Microsoft.EntityFrameworkCore;
2. using QuickCRUD.Models;
4. namespace QuickCRUD;
6. public class DefaultDbContext : DbContext
7. {
8.   protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
9.   {
10.     optionsBuilder.UseSqlite("Data Source=quick_crud.sqlite");
11.   }
13.   protected override void OnModelCreating(ModelBuilder modelBuilder)
14.   {
15.     base.OnModelCreating(modelBuilder);
16.     modelBuilder.ApplyConfigurationsFromAssembly(GetType().Assembly);
17.   }
19.   public DbSet<WeatherForecast> WeatherForecasts { get; set; }
20. }

复制代码

新建WeatherForecast.cs文件。里面除了模型类，还有一个Configuration类，用来模型与配置数据库中表和表字段的对应关系。
删除自动生成的实例代码里，Pages/Weather.razor中的相关内容。

1. using Microsoft.EntityFrameworkCore;
2. using Microsoft.EntityFrameworkCore.Metadata.Builders;
4. namespace QuickCRUD.Models;
6. public class WeatherForecast
7. {
8.     public int Id { get; set; }
9.     public DateOnly Date { get; set; }
10.     public int TemperatureC { get; set; }
11.     public string? Summary { get; set; }
12.     public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
13. }
15. public class WeatherForecastConfig : IEntityTypeConfiguration<WeatherForecast>
16. {
17.     public void Configure(EntityTypeBuilder<WeatherForecast> builder)
18.     {
19.         builder.ToTable("weather_forcast");
20.         builder.Property("Id").HasColumnName("obj_id").ValueGeneratedOnAdd();
21.         builder.Property("Date").HasColumnName("ddate").HasColumnType("Text");
22.         builder.Property("TemperatureC").HasColumnName("temp_c");
23.         builder.Property("Summary").HasColumnName("summary");
24.     }
25. }

复制代码

Package Manger Console，运行命令

1. Add-Migration Init
2. Update-Database

复制代码

此时，将自动生成数据库与表结构

 3. 编写Repo代码

Repo是直接与数据库打交道的代码，提供了基本的对数据库表的CRUD操作
为了操作数据库，注入了DbContext类
新建WeatherForecastRepo.cs文件，里面利用DbContext对象，编写增删改查数据库的基本操作方法：

1. using Microsoft.EntityFrameworkCore;
2. using QuickCRUD.Models;
4. namespace QuickCRUD.Repos;
6. public class WeatherForecastRepo
7. {
8.   private readonly DefaultDbContext _context;
10.   public WeatherForecastRepo(DefaultDbContext context)
11.   {
12.     _context = context;
13.   }
15.   public async Task<int> Add(WeatherForecast entity)
16.   {
17.     _context.WeatherForecasts.Add(entity);
18.     return await _context.SaveChangesAsync();
19.   }
21.   public async Task<int> DeleteAll()
22.   {
23.     _context.WeatherForecasts.RemoveRange(
24.       _context.WeatherForecasts.Take(_context.WeatherForecasts.Count())
25.     );
26.     return await _context.SaveChangesAsync();
27.   }
29.   public async Task<int> DeleteById(int id)
30.   {
31.     var w = await GetById(id);
32.     if (w != null)
33.     {
34.       _context.WeatherForecasts.Remove(w);
35.     }
36.     return await _context.SaveChangesAsync();
37.   }
39.   public async Task<List<WeatherForecast>?> GetAll()
40.   {
41.     return await _context.WeatherForecasts.ToListAsync();
42.   }
44.   public async Task<WeatherForecast?> GetById(int id)
45.   {
46.     return await _context.WeatherForecasts.FindAsync(id);
47.   }
49.   public async Task<int> Update(WeatherForecast entity)
50.   {
51.     var w = await GetById(entity.Id);
52.     if (w != null)
53.     {
54.       _context.WeatherForecasts.Update(entity);
55.     }
56.     return await _context.SaveChangesAsync();
57.   }
58. }

复制代码

 4. 编写前端list代码

• 引入QuickGrid包
  
• 编写前端list展示页面的component
  
• 编写add页面component
  
• 根据需要编写service文件
  

 编写展示数据的list页面，在Pages文件夹下建立Weather.razor文件

1. @page "/weather"
2. @rendermode InteractiveServer
3. @inject WeatherForecastService weatherForecastService
4. @inject NavigationManager nav
6. <PageTitle>Weather</PageTitle>
8. <h1>Weather</h1>
10. <button class="btn btn-sm btn-outline-success" @onclick="BtnNew">New</button>
11. <button class="btn btn-sm btn-danger" @onclick="BtnDeleteAll">Delete All</button>
12. <button class="btn btn-sm btn-outline-info" @onclick="BtnGenerateRandomDate">Generate Random Date</button>
14. @if (forecasts == null)
15. {
16.   <p><em>Loading...</em></p>
17. }
18. else
19. {
20.   <QuickGrid class="table" Items="forecasts.AsQueryable()">
21.     <PropertyColumn Property="@(f=>f.Id)" />
22.     <PropertyColumn Property="@(f=>f.Date)" />
23.     <PropertyColumn Title="Temp.(C)" Property="@(f=>f.TemperatureC)" />
24.     <PropertyColumn Title="Temp.(F)" Property="@(f=>f.TemperatureF)" />
25.     <PropertyColumn Property="@(f=>f.Summary)" />
26.     <TemplateColumn Context="f">
27.       <button class="btn btn-sm btn-outline-info" @onclick="_=>BtnEdit(f.Id)">Edit</button>
28.       <button class="btn btn-sm btn-outline-danger" @onclick="_=>BtnDelete(f.Id)">Delete</button>
29.     </TemplateColumn>
30.   </QuickGrid>
31. }
33. @code {
34.   private List<WeatherForecast>? forecasts;
36.   protected override async Task OnInitializedAsync()
37.   {
38.     forecasts = await weatherForecastService.AllForecast();
39.   }
41.   private void BtnNew()
42.   {
43.     nav.NavigateTo("/weather/add", true, true);
44.   }
46.   private void BtnEdit(int id)
47.   {
48.     nav.NavigateTo($"/weather/edit/{id}", true, true);
49.   }
51.   private async Task BtnDelete(int id)
52.   {
53.     await weatherForecastService.DeleteForecast(id);
54.     nav.Refresh(true);
55.   }
57.   private async Task BtnDeleteAll()
58.   {
59.     await weatherForecastService.DeleteAllForecast();
60.     nav.Refresh(true);
61.   }
63.   private async Task BtnGenerateRandomDate()
64.   {
65.     await weatherForecastService.GenerateRandom();
66.     nav.Refresh(true);
67.   }
68. }

复制代码

注入了WeatherForecastService
需要注意页面上方的@rendermode InteractiveServer，这个标注将使得页面在服务端进行渲染，这是必不可少的，因为我们使用的是service，里面注入了repo，而repo中使用的是EF，这就意味着service的代码必须在服务端运行，所以这个页面必须在服务端渲染完毕后，再在前端展示。如果我们的service选择使用HttpClient获取后端api接口数据，则可以使用Wasm模式，就像Count.razor页面。
5. 编写Service

前端页面当需要使用数据时，将注入service，service如果需要向数据库请求数据，则在service中注入repo
编写WeatherForecastService.cs文件

1. using QuickCRUD.Models;
2. using QuickCRUD.Repos;
4. namespace QuickCRUD.Services;
6. public class WeatherForecastService
7. {
8.   private readonly WeatherForecastRepo _repo;
10.   public WeatherForecastService(WeatherForecastRepo repo)
11.   {
12.     _repo = repo;
13.   }
15.   public async Task<WeatherForecast> GetById(int id)
16.   {
17.     var f = await _repo.GetById(id);
18.     if (f == null) return new();
19.     return f;
20.   }
22.   public async Task<List<WeatherForecast>> AllForecast()
23.   {
24.     var result = await _repo.GetAll();
25.     if (result == null)
26.     {
27.       return [];
28.     }
29.     else
30.     {
31.       return result;
32.     }
33.   }
35.   public async Task<int> NewForecast(WeatherForecast forecast)
36.   {
37.     if (forecast == null) return 0;
38.     return await _repo.Add(forecast);
39.   }
41.   public async Task<int> UpdateForecast(WeatherForecast forecast)
42.   {
43.     if (forecast == null) { return 0; }
44.     return await _repo.Update(forecast);
45.   }
47.   public async Task<int> DeleteForecast(int id)
48.   {
49.     return await _repo.DeleteById(id);
50.   }
52.   public async Task<int> DeleteAllForecast()
53.   {
54.     return await _repo.DeleteAll();
55.   }
57.   public async Task<int> GenerateRandom()
58.   {
59.     var startDate = DateOnly.FromDateTime(DateTime.Now);
60.     var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
61.     var forecasts = Enumerable.Range(1, 10).Select(index => new WeatherForecast
62.     {
63.       Date = startDate.AddDays(index),
64.       TemperatureC = Random.Shared.Next(-20, 55),
65.       Summary = summaries[Random.Shared.Next(summaries.Length)]
66.     }).ToList();
68.     foreach (var forecast in forecasts) await _repo.Add(forecast);
69.     return forecasts.Count;
70.   }
71. }

复制代码

6. 编写add和edit子页面

新建WeatherAdd.razor文件

1. @page "/weather/add"
2. @rendermode InteractiveServer
3. @inject WeatherForecastService weatherForecastService
4. @inject NavigationManager nav
6. <h1>New Weather Forecast</h1>
8. <EditForm Model="forecast" OnValidSubmit="SubmitForecast">
9.   <p>
10.     <label>
11.       Date:
12.       <InputDate @bind-Value="forecast.Date" />
13.     </label>
14.   </p>
15.   <p>
16.     <label>
17.       Temperature C:
18.       <InputNumber @bind-Value="forecast.TemperatureC" />
19.     </label>
20.   </p>
21.   <p>
22.     <label>
23.       Summary:
24.       <InputText @bind-Value="forecast.Summary" />
25.     </label>
26.   </p>
27.   <p>
28.     <button type="submit" class="btn btn-primary">Submit</button>
29.   </p>
30. </EditForm>
31. <button class="btn btn-outline-primary" @onclick="BtnCancel">Cancel</button>
34. @code {
35.   private WeatherForecast forecast { get; set; } = new() { Date = DateOnly.FromDateTime(DateTime.Today) };
37.   private async Task SubmitForecast()
38.   {
39.     await weatherForecastService.NewForecast(forecast);
40.     nav.NavigateTo("/weather", true, true);
41.   }
43.   private void BtnCancel()
44.   {
45.     nav.NavigateTo("/weather", true, true);
46.   }
47. }

复制代码

新建WeatherEdit.razor文件

1. @page "/weather/edit/{id:int}"
2. @rendermode InteractiveServer
3. @inject WeatherForecastService weatherForecastService
4. @inject NavigationManager nav
6. <h1>Edit Weather Forecast</h1>
7. <h3>Id: @Id</h3>
9. <EditForm Model="forecast" OnValidSubmit="SubmitForecast">
10.   <p>
11.     <label>
12.       Date:
13.       <InputDate @bind-Value="forecast.Date" />
14.     </label>
15.   </p>
16.   <p>
17.     <label>
18.       Temperature C:
19.       <InputNumber @bind-Value="forecast.TemperatureC" />
20.     </label>
21.   </p>
22.   <p>
23.     <label>
24.       Summary:
25.       <InputText @bind-Value="forecast.Summary" />
26.     </label>
27.   </p>
28.   <p>
29.     <button type="submit" class="btn btn-primary">Submit</button>
30.   </p>
31. </EditForm>
32. <button class="btn btn-outline-primary" @onclick="BtnCancel">Cancel</button>
34. @code {
35.   [Parameter]
36.   public int Id { get; set; }
38.   private WeatherForecast forecast { get; set; } = new();
40.   protected override async Task OnParametersSetAsync()
41.   {
42.     forecast = await weatherForecastService.GetById(Id);
43.   }
45.   private void BtnCancel()
46.   {
47.     nav.NavigateTo("/weather", true, true);
48.   }
50.   private async Task SubmitForecast()
51.   {
52.     await weatherForecastService.UpdateForecast(forecast);
53.     nav.NavigateTo("/weather", true, true);
54.   }
55. }

复制代码

edit页面与add页面的不同在于，需要传入id参数
7. 检查依赖注入

检查一下Program.cs文件中，是否将dbcontext，repo和service都配置了依赖注入

1. builder.Services.AddDbContext<DefaultDbContext>();
2. builder.Services.AddScoped<WeatherForecastRepo>();
3. builder.Services.AddScoped<WeatherForecastService>();

复制代码

8. 效果展示

9. 发布

• 将sqlite数据库的文件编译属性调整为复制到输出目录
  
• publish参数
  

 

 最终生成
至此，最简单的CRUD完成了
10. 利用泛型的Repo

目前的Repo需要逐个编写操作数据库的方法，如果新增了一个model，则需要对应添加一个repo类，并再次重新编写所有的CRUD方法。但是因为都是CRUD的标准化方法，可以通过接口和泛型，实现新的model类继承全部CRUD方法。
首先编写一个接口，新建ICRUD.cs

1. namespace QuickCRUD.Repos;
3. public interface ICRUD<T, T_ID>
4. {
5.   public int GetCount();
6.   public Task<List<T>?> GetAll();
7.   public Task<List<T>?> GetLimit(int num);
8.   public Task<T?> GetById(T_ID id);
9.   public Task<int> Add(T entity);
10.   public Task<int> Update(T entity, T_ID id);
11.   public Task<int> DeleteById(T_ID id);
12.   public Task<int> DeleteAll();
13. }

复制代码

然后，编写一个抽象类，AbstractRepo.cs，再抽象类中，同泛型，实现全部接口

1. using Microsoft.EntityFrameworkCore;
3. namespace QuickCRUD.Repos;
5. public abstract class AbstractRepo<T, T_ID>(DefaultDbContext context) : ICRUD<T, T_ID> where T : class
6. {
7.   public async Task<int> Add(T entity)
8.   {
9.     context.Set<T>().Add(entity);
10.     return await context.SaveChangesAsync();
11.   }
13.   public async Task<int> DeleteAll()
14.   {
15.     context.Set<T>().RemoveRange(
16.       context.Set<T>().Take(context.Set<T>().Count())
17.     );
18.     return await context.SaveChangesAsync();
19.   }
21.   public async Task<int> DeleteById(T_ID id)
22.   {
23.     var w = await GetById(id);
24.     if (w != null)
25.     {
26.       context.Set<T>().Remove(w);
27.     }
28.     return await context.SaveChangesAsync();
29.   }
31.   public async Task<List<T>?> GetAll()
32.   {
33.     return await context.Set<T>().ToListAsync();
34.   }
36.   public async Task<T?> GetById(T_ID id)
37.   {
38.     return await context.Set<T>().FindAsync(id);
39.   }
41.   public int GetCount()
42.   {
43.     return context.Set<T>().Count();
44.   }
46.   public async Task<List<T>?> GetLimit(int num)
47.   {
48.     var result = context.Set<T>().Take(num);
49.     return await result.ToListAsync();
50.   }
52.   public async Task<int> Update(T entity, T_ID id)
53.   {
54.     var w = await GetById(id);
55.     if (w != null)
56.     {
57.       context.Set<T>().Update(entity);
58.     }
59.     return await context.SaveChangesAsync();
60.   }
61. }

复制代码

最后，修改WeatherForcastRepo.cs

1. using QuickCRUD.Models;
3. namespace QuickCRUD.Repos;
5. public class WeatherForecastRepo(DefaultDbContext context) : AbstractRepo<WeatherForecast, int>(context)
6. {
7. }

复制代码

WeatherForcastRepo只需要继承抽象类，即可实现全部CRUD接口方法。如果有个性化的数据库操作方法，再在repo中添加方法即可。
如果有新的model，只需要创建一个新的repo，并继承AbstractRepo即可实现全部CRUD方法。

来源:https://www.cnblogs.com/jimokelly/p/18142830
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！