.NET6如何开发TodoList应用

发布时间：2021-12-27 12:29:32 作者：小新
来源：亿速云阅读：190

# .NET 6如何开发TodoList应用

## 前言

在当今快速发展的软件开发领域，掌握现代Web开发框架已成为开发者的必备技能。本文将详细介绍如何使用.NET 6框架开发一个功能完整的TodoList应用程序。通过这个实践项目，您将学习到.NET 6的核心概念、Entity Framework Core的使用以及前后端分离的开发模式。

## 环境准备

### 开发工具要求
- Visual Studio 2022 (17.0或更高版本)
- .NET 6 SDK
- SQL Server Express/LocalDB (或使用SQLite)
- Postman/Insomnia (API测试工具)

### 创建项目
1. 打开Visual Studio
2. 选择"创建新项目"
3. 搜索"ASP.NET Core Web API"模板
4. 项目命名为"TodoListApi"
5. 选择.NET 6.0作为框架版本

```bash
dotnet new webapi -n TodoListApi

项目结构设计

典型分层架构

TodoListApi/
├── Controllers/         # API端点
├── Models/             # 数据模型
├── Services/           # 业务逻辑
├── Data/               # 数据库上下文
├── DTOs/               # 数据传输对象
├── Migrations/         # 数据库迁移
└── Properties/         # 启动配置

实现步骤

1. 定义数据模型

首先创建TodoItem实体类：

// Models/TodoItem.cs
public class TodoItem
{
    public int Id { get; set; }
    public string? Title { get; set; }
    public string? Description { get; set; }
    public bool IsCompleted { get; set; }
    public DateTime CreatedDate { get; set; } = DateTime.Now;
    public DateTime? DueDate { get; set; }
}

2. 配置数据库上下文

// Data/ApplicationDbContext.cs
public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
        : base(options)
    {
    }

    public DbSet<TodoItem> TodoItems { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<TodoItem>().HasData(
            new TodoItem { Id = 1, Title = "学习.NET Core", IsCompleted = false },
            new TodoItem { Id = 2, Title = "构建TodoList应用", IsCompleted = false }
        );
    }
}

在Program.cs中注册DbContext：

builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

3. 创建数据库迁移

dotnet ef migrations add InitialCreate
dotnet ef database update

4. 实现服务层

创建ITodoService接口：

// Services/ITodoService.cs
public interface ITodoService
{
    Task<IEnumerable<TodoItem>> GetAllItemsAsync();
    Task<TodoItem?> GetItemByIdAsync(int id);
    Task<TodoItem> CreateItemAsync(TodoItem item);
    Task UpdateItemAsync(int id, TodoItem item);
    Task DeleteItemAsync(int id);
}

实现服务：

// Services/TodoService.cs
public class TodoService : ITodoService
{
    private readonly ApplicationDbContext _context;

    public TodoService(ApplicationDbContext context)
    {
        _context = context;
    }

    public async Task<IEnumerable<TodoItem>> GetAllItemsAsync()
    {
        return await _context.TodoItems.ToListAsync();
    }

    // 其他方法实现...
}

5. 创建控制器

// Controllers/TodoItemsController.cs
[ApiController]
[Route("api/[controller]")]
public class TodoItemsController : ControllerBase
{
    private readonly ITodoService _todoService;

    public TodoItemsController(ITodoService todoService)
    {
        _todoService = todoService;
    }

    [HttpGet]
    public async Task<ActionResult<IEnumerable<TodoItem>>> GetTodoItems()
    {
        var items = await _todoService.GetAllItemsAsync();
        return Ok(items);
    }

    // 其他端点...
}

6. 添加DTO和AutoMapper

创建DTO类：

// DTOs/TodoItemDto.cs
public class TodoItemDto
{
    public int Id { get; set; }
    public string? Title { get; set; }
    public string? Description { get; set; }
    public bool IsCompleted { get; set; }
    public DateTime? DueDate { get; set; }
}

配置AutoMapper：

builder.Services.AddAutoMapper(typeof(Program));

// 创建映射配置
public class TodoItemProfile : Profile
{
    public TodoItemProfile()
    {
        CreateMap<TodoItem, TodoItemDto>();
        CreateMap<TodoItemDto, TodoItem>();
    }
}

7. 添加验证和异常处理

// 在DTO上添加数据注解
public class TodoItemDto
{
    [Required]
    [StringLength(100)]
    public string? Title { get; set; }
    
    // 其他属性...
}

// 全局异常处理中间件
app.UseExceptionHandler("/error");

8. 实现分页和过滤

// 服务层添加方法
public async Task<PaginatedList<TodoItem>> GetItemsAsync(
    int pageNumber, 
    int pageSize,
    string? searchTerm,
    bool? isCompleted)
{
    IQueryable<TodoItem> query = _context.TodoItems;

    if (!string.IsNullOrEmpty(searchTerm))
    {
        query = query.Where(i => i.Title.Contains(searchTerm));
    }

    if (isCompleted.HasValue)
    {
        query = query.Where(i => i.IsCompleted == isCompleted.Value);
    }

    return await PaginatedList<TodoItem>.CreateAsync(query, pageNumber, pageSize);
}

高级功能实现

1. 添加JWT认证

配置身份认证：

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = builder.Configuration["Jwt:Issuer"],
            ValidAudience = builder.Configuration["Jwt:Audience"],
            IssuerSigningKey = new SymmetricSecurityKey(
                Encoding.UTF8.GetBytes(builder.Configuration["Jwt:Key"]))
        };
    });

2. 实现实时更新SignalR

添加SignalR Hub：

// Hubs/TodoHub.cs
public class TodoHub : Hub
{
    public async Task SendUpdate(string message)
    {
        await Clients.All.SendAsync("ReceiveUpdate", message);
    }
}

在控制器中调用：

[HttpPost]
public async Task<ActionResult<TodoItem>> PostTodoItem(TodoItem item)
{
    _context.TodoItems.Add(item);
    await _context.SaveChangesAsync();
    
    await _hubContext.Clients.All.SendAsync("ReceiveUpdate", $"New item added: {item.Title}");
    
    return CreatedAtAction(nameof(GetTodoItem), new { id = item.Id }, item);
}

3. 添加Swagger文档

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "Todo API", Version = "v1" });
});

// 在开发环境中启用
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

前端集成

使用Vue.js构建前端

创建Vue项目：

npm init vue@latest todolist-frontend

添加API服务：

// src/services/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://localhost:5001/api',
});

export default {
  async getTodos() {
    const response = await api.get('/todoitems');
    return response.data;
  },
  // 其他方法...
};

创建Todo组件：

<template>
  <div>
    <input v-model="newTodoTitle" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.title }}
        <button @click="toggleComplete(todo)">✓</button>
      </li>
    </ul>
  </div>
</template>

<script>
import api from '../services/api';

export default {
  data() {
    return {
      todos: [],
      newTodoTitle: ''
    }
  },
  async created() {
    this.todos = await api.getTodos();
  },
  methods: {
    async addTodo() {
      const newTodo = await api.addTodo({
        title: this.newTodoTitle,
        isCompleted: false
      });
      this.todos.push(newTodo);
      this.newTodoTitle = '';
    }
  }
}
</script>

部署指南

发布到Azure

右键项目 → 发布
选择”Azure”作为目标
选择”Azure App Service (Windows)”
创建新应用服务
配置数据库连接字符串
点击”发布”

Docker容器化

创建Dockerfile：

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["TodoListApi.csproj", "."]
RUN dotnet restore "TodoListApi.csproj"
COPY . .
RUN dotnet build "TodoListApi.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "TodoListApi.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "TodoListApi.dll"]

构建并运行：

docker build -t todolistapi .
docker run -p 8080:80 --name myapp todolistapi

性能优化建议

缓存策略：

使用MemoryCache或Redis缓存频繁访问的数据

services.AddMemoryCache();
// 或
services.AddStackExchangeRedisCache(options =>
{
   options.Configuration = Configuration.GetConnectionString("Redis");
});

异步编程：
- 确保所有I/O操作都使用async/await模式
查询优化：
- 使用EF Core的AsNoTracking()只读查询
- 实现选择性加载（Select加载）

响应压缩：

services.AddResponseCompression(options =>
{
   options.Providers.Add<GzipCompressionProvider>();
});

常见问题解决

数据库连接问题：
- 检查连接字符串是否正确
- 确保SQL Server服务正在运行
跨域问题(CORS)： “`csharp services.AddCors(options => { options.AddPolicy(“AllowAll”, builder => builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); });

app.UseCors(“AllowAll”);


3. **迁移失败**：
   - 删除Migrations文件夹并重新创建迁移
   - 检查数据库权限

4. **性能瓶颈**：
   - 使用Application Insights进行监控
   - 分析慢查询

## 总结

通过本教程，我们使用.NET 6构建了一个完整的TodoList应用程序，涵盖了从数据模型设计到前端集成的全流程开发。关键点包括：

- 清晰的架构分层（控制器-服务-仓储）
- Entity Framework Core的高效使用
- 前后端分离的开发模式
- 现代化的API设计实践
- 安全认证和授权实现
- 性能优化技巧

这个项目可以作为学习.NET 6 Web开发的良好起点，您可以根据需要进一步扩展功能，如添加用户系统、文件上传或更复杂的状态管理。

## 延伸学习资源

1. [.NET 6官方文档](https://docs.microsoft.com/zh-cn/dotnet/core/whats-new/dotnet-6)
2. [Entity Framework Core教程](https://docs.microsoft.com/zh-cn/ef/core/)
3. [ASP.NET Core最佳实践](https://docs.microsoft.com/zh-cn/aspnet/core/performance/performance-best-practices)
4. [Vue.js官方指南](https://vuejs.org/guide/introduction.html)
5. [REST API设计原则](https://restfulapi.net/)

Happy coding!