跟着AI学习C#之项目实战-电商平台 Day6

📅 Day 6：后台管理系统开发（Admin Panel）

✅ 今日目标：

• 创建管理员页面布局
• 实现商品管理（CRUD）
• 实现订单管理（查看、状态变更）
• 添加权限控制（仅管理员可访问）
• 提交 Git 版本记录进度

🧩 功能概览

🛠️ 知识点预览

🔐 第一步：添加管理员授权检查

在所有 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）