跟着AI学习C#之项目实战-电商平台 Day6
📅 Day 6：后台管理系统开发（Admin Panel）
✅ 今日目标：
- 创建管理员页面布局
- 实现商品管理（CRUD）
- 实现订单管理（查看、状态变更）
- 添加权限控制（仅管理员可访问）
- 提交 Git 版本记录进度
🧩 功能概览
| 页面 | 功能 |
|---|---|
/Admin/Dashboard.cshtml | 后台首页仪表盘 |
/Admin/Products/Index.cshtml | 商品列表 |
/Admin/Products/Create.cshtml | 添加商品 |
/Admin/Products/Edit.cshtml | 编辑商品 |
/Admin/Products/Delete.cshtml | 删除商品 |
/Admin/Orders/Index.cshtml | 订单管理（查看、修改状态） |
🛠️ 知识点预览
| 技术 | 内容 |
|---|---|
| 身份验证 | 使用 [Authorize(Roles = "Admin")] 控制访问权限 |
| 数据模型 | 复用 Product, Order, OrderItem 模型 |
| CRUD 操作 | 使用 Razor Pages 实现创建、读取、更新、删除 |
| UI 设计 | 使用 Bootstrap 构建简洁的后台界面 |
| 分页支持 | 可选实现分页功能 |
🔐 第一步：添加管理员授权检查
在所有 Admin 页面模型中添加：
[Authorize(Roles = "Admin")]
public class IndexModel : PageModel
{// ...
}
并在 _Layout.cshtml 中添加后台导航链接：
@if (User.IsInRole("Admin"))
{<li class="nav-item"><a class="nav-link" href="/Admin/Dashboard">后台管理</a></li>
}
🧱 第二步：创建 Admin 页面结构
创建以下文件夹和页面结构：
/Pages/Admin/
├── Dashboard.cshtml
├── Products/
│ ├── Index.cshtml
│ ├── Create.cshtml
│ ├── Edit.cshtml
│ └── Delete.cshtml
└── Orders/├── Index.cshtml└── Details.cshtml
📦 第三步：实现商品管理（CRUD）
✅ Product Index 页面（列出所有商品）
Index.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class IndexModel : PageModel{private readonly ApplicationDbContext _context;public IndexModel(ApplicationDbContext context){_context = context;}public IList<Product> Products { get; set; } = new List<Product>();public void OnGet(){Products = _context.Products.ToList();}}
}
Index.cshtml
@page
@model ECommercePlatform.Pages.Admin.Products.IndexModel<h2>商品管理</h2><a asp-page="/Admin/Products/Create" class="btn btn-primary mb-3">添加新商品</a><table class="table table-bordered"><thead><tr><th>名称</th><th>价格</th><th>库存</th><th>操作</th></tr></thead><tbody>@foreach (var product in Model.Products){<tr><td>@product.Name</td><td>$@product.Price</td><td>@product.Stock</td><td><a asp-page="/Admin/Products/Edit" asp-route-id="@product.Id" class="btn btn-warning btn-sm">编辑</a><a asp-page="/Admin/Products/Delete" asp-route-id="@product.Id" class="btn btn-danger btn-sm">删除</a></td></tr>}</tbody>
</table>
✅ Product Create 页面（添加商品）
Create.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class CreateModel : PageModel{private readonly ApplicationDbContext _context;public CreateModel(ApplicationDbContext context){_context = context;}[BindProperty]public Product Product { get; set; } = new();public IActionResult OnPost(){if (!ModelState.IsValid){return Page();}_context.Products.Add(Product);_context.SaveChanges();return RedirectToPage("/Admin/Products/Index");}}
}
Create.cshtml
@page
@model ECommercePlatform.Pages.Admin.Products.CreateModel<h2>添加新商品</h2><form method="post"><div class="form-group"><label>名称</label><input asp-for="Product.Name" class="form-control" /></div><div class="form-group"><label>价格</label><input asp-for="Product.Price" class="form-control" /></div><div class="form-group"><label>库存</label><input asp-for="Product.Stock" class="form-control" /></div><div class="form-group"><label>图片地址</label><input asp-for="Product.ImageUrl" class="form-control" /></div><button type="submit" class="btn btn-success mt-2">提交</button>
</form>
✅ Product Edit 页面（编辑商品）
Edit.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class EditModel : PageModel{private readonly ApplicationDbContext _context;public EditModel(ApplicationDbContext context){_context = context;}[BindProperty]public Product Product { get; set; } = new();public IActionResult OnGet(int id){var product = _context.Products.Find(id);if (product == null) return NotFound();Product = product;return Page();}public IActionResult OnPost(){if (!ModelState.IsValid){return Page();}_context.Products.Update(Product);_context.SaveChanges();return RedirectToPage("/Admin/Products/Index");}}
}
Edit.cshtml
@page
@model ECommercePlatform.Pages.Admin.Products.EditModel<h2>编辑商品</h2><form method="post"><input type="hidden" asp-for="Product.Id" /><div class="form-group"><label>名称</label><input asp-for="Product.Name" class="form-control" /></div><div class="form-group"><label>价格</label><input asp-for="Product.Price" class="form-control" /></div><div class="form-group"><label>库存</label><input asp-for="Product.Stock" class="form-control" /></div><div class="form-group"><label>图片地址</label><input asp-for="Product.ImageUrl" class="form-control" /></div><button type="submit" class="btn btn-success mt-2">保存</button>
</form>
✅ Product Delete 页面（删除商品）
Delete.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Products
{[Authorize(Roles = "Admin")]public class DeleteModel : PageModel{private readonly ApplicationDbContext _context;public DeleteModel(ApplicationDbContext context){_context = context;}public Product? Product { get; set; }public IActionResult OnGet(int id){Product = _context.Products.Find(id);if (Product == null) return NotFound();return Page();}public IActionResult OnPost(int id){var product = _context.Products.Find(id);if (product != null){_context.Products.Remove(product);_context.SaveChanges();}return RedirectToPage("/Admin/Products/Index");}}
}
Delete.cshtml
@page
@model ECommercePlatform.Pages.Admin.Products.DeleteModel<h2>确认删除?</h2>
<p>你确定要删除商品：<strong>@Model.Product?.Name</strong>？</p><form method="post"><button type="submit" class="btn btn-danger">确认删除</button><a asp-page="/Admin/Products/Index" class="btn btn-secondary">取消</a>
</form>
🧾 第四步：实现订单管理（查看 + 修改状态）
✅ Orders/Index.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Orders
{[Authorize(Roles = "Admin")]public class IndexModel : PageModel{private readonly ApplicationDbContext _context;public IndexModel(ApplicationDbContext context){_context = context;}public IList<Order> Orders { get; set; } = new List<Order>();public void OnGet(){Orders = _context.Orders.Include(o => o.Items).ToList();}}
}
Orders/Index.cshtml
@page
@model ECommercePlatform.Pages.Admin.Orders.IndexModel<h2>订单管理</h2><table class="table table-bordered"><thead><tr><th>订单号</th><th>用户ID</th><th>总金额</th><th>状态</th><th>操作</th></tr></thead><tbody>@foreach (var order in Model.Orders){<tr><td>@order.Id</td><td>@order.UserId</td><td>$@order.TotalAmount</td><td>@order.Status</td><td><a asp-page="/Admin/Orders/Details" asp-route-id="@order.Id" class="btn btn-info btn-sm">查看详情</a></td></tr>}</tbody>
</table>
✅ Orders/Details.cshtml.cs
using Microsoft.AspNetCore.Mvc.RazorPages;
using ECommercePlatform.Models;namespace ECommercePlatform.Pages.Admin.Orders
{[Authorize(Roles = "Admin")]public class DetailsModel : PageModel{private readonly ApplicationDbContext _context;public DetailsModel(ApplicationDbContext context){_context = context;}public Order? Order { get; set; }public IActionResult OnGet(int id){Order = _context.Orders.Include(o => o.Items).FirstOrDefault(o => o.Id == id);if (Order == null) return NotFound();return Page();}public IActionResult OnPostUpdateStatus(int id, string status){var order = _context.Orders.Find(id);if (order != null){Enum.TryParse(status, out OrderStatus parsedStatus);order.Status = parsedStatus;_context.SaveChanges();}return RedirectToPage("/Admin/Orders/Details", new { id });}}
}
Orders/Details.cshtml
@page
@model ECommercePlatform.Pages.Admin.Orders.DetailsModel<h2>订单详情 - #@Model.Order?.Id</h2><p>用户ID: @Model.Order?.UserId</p>
<p>日期: @Model.Order?.OrderDate</p>
<p>状态:<form method="post" class="d-inline"><input type="hidden" name="id" value="@Model.Order?.Id" /><select name="status" asp-for="Order.Status" asp-items="Html.GetEnumSelectList<OrderStatus>()" onchange="this.form.submit()"></select></form>
</p><h4>商品列表：</h4>
<table class="table table-bordered"><thead><tr><th>商品名</th><th>单价</th><th>数量</th><th>总价</th></tr></thead><tbody>@foreach (var item in Model.Order?.Items ?? new()){<tr><td>@item.ProductName</td><td>$@item.Price</td><td>@item.Quantity</td><td>$@item.TotalPrice</td></tr>}</tbody>
</table>
📦 第五步：提交 Git 版本
git add .
git commit -m "Day6: Added admin panel with product management and order management"
📝 今日总结
今天你完成了：
✅ 创建后台管理页面（Dashboard + Products + Orders）
✅ 实现商品的增删改查（CRUD）
✅ 实现订单查看与状态变更
✅ 添加管理员权限控制
✅ 提交版本控制记录
📆 明日计划（Day7）
我们将进入 部署准备与优化阶段：
- 添加静态资源（CSS/JS 图片等）
- 优化页面样式与交互体验
- 添加分页功能（商品、订单列表）
- 配置生产环境设置（appsettings.Production.json）
- 准备发布部署（dotnet publish）