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

Day 7：部署准备与优化

✅ 今日目标：

• 添加静态资源（CSS、JS、图片）
• 优化页面样式与交互体验
• 添加分页功能（商品、订单列表）
• 配置生产环境设置（appsettings.Production.json）
• 准备发布部署（dotnet publish）

---

功能概览

类型	内容
静态资源	wwwroot/css, wwwroot/js, wwwroot/images
页面样式优化	使用 Bootstrap + 自定义 CSS 增强用户体验
分页功能	商品和订单列表支持分页显示
环境配置	appsettings.Production.json 设置数据库连接等信息
发布打包	使用 dotnet publish 构建部署包

---

️ 知识点预览

技术	内容
wwwroot 文件夹	存放前端资源文件
_Layout.cshtml	全局布局模板优化
分页模型	实现简单分页逻辑
生产配置	使用不同 appsettings 文件区分开发/生产环境
发布命令	使用 dotnet publish 打包部署代码

---

️ 第一步：添加静态资源目录

在项目根目录中创建或使用已有 wwwroot 文件夹，并添加以下结构：

/wwwroot/
├── css/
│   └── site.css
├── js/
│   └── main.js
└── images/
    └── logo.png

✅ 示例：site.css

body {
    background-color: #f8f9fa;
}

.navbar {
    background-color: #2c3e50 !important;
}

.card {
    margin-bottom: 1rem;
}

注册到 _Layout.cshtml 中：

<link rel="stylesheet" href="~/css/site.css" />
<script src="~/js/main.js">script>

---

第二步：优化全局布局（_Layout.cshtml）

✅ 示例优化内容：

• 更美观的导航栏
• 统一的页面标题格式
• 添加网站 Logo
• 底部版权信息

示例头部导航栏优化：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" asp-page="/Index"><img src="~/images/logo.png" width="30" /> ECommerce平台a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon">span>
        button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" asp-page="/Index">首页a>
                li>
                <li class="nav-item">
                    <a class="nav-link" asp-page="/Products/Index">商品a>
                li>
                @if (User.IsInRole("Admin"))
                {
                    <li class="nav-item">
                        <a class="nav-link" asp-page="/Admin/Dashboard">后台管理a>
                    li>
                }
            ul>
            <ul class="navbar-nav">
                @if (User.Identity?.IsAuthenticated == true)
                {
                    <li class="nav-item">
                        <a class="nav-link" asp-page="/Orders/Index">我的订单a>
                    li>
                    <li class="nav-item">
                        <form method="post" asp-page-handler="Logout" asp-page="/Account/Login">
                            <button type="submit" class="btn btn-link nav-link">退出button>
                        form>
                    li>
                }
                else
                {
                    <li class="nav-item">
                        <a class="nav-link" asp-page="/Account/Register">注册a>
                    li>
                    <li class="nav-item">
                        <a class="nav-link" asp-page="/Account/Login">登录a>
                    li>
                }
            ul>
        div>
    div>
nav>

---

第三步：添加分页功能（商品 & 订单）

✅ 创建分页模型 Models/PagedResult.cs

namespace ECommercePlatform.Models
{
    public class PagedResult<T>
    {
        public List<T> Items { get; set; } = new();
        public int TotalCount { get; set; }
        public int PageNumber { get; set; }
        public int PageSize { get; set; }
        public int TotalPages => (int)Math.Ceiling(TotalCount / (double)PageSize);
    }
}

✅ 创建分页扩展方法 Extensions/PagingExtensions.cs

using Microsoft.EntityFrameworkCore;

namespace ECommercePlatform.Extensions
{
    public static class PagingExtensions
    {
        public static async Task<PagedResult<T>> GetPagedAsync<T>(this IQueryable<T> query, int page, int pageSize) where T : class
        {
            var result = new PagedResult<T>
            {
                TotalCount = await query.CountAsync(),
                PageNumber = page,
                PageSize = pageSize,
                Items = await query.Skip((page - 1) * pageSize).Take(pageSize).ToListAsync()
            };

            return result;
        }
    }
}

✅ 在商品列表页面中使用分页（Products/Index.cshtml.cs）

public int PageNumber { get; set; } = 1;
public int PageSize { get; set; } = 6;
public PagedResult<Product> PagedProducts { get; set; } = new();

public async Task OnGet(int page = 1)
{
    PageNumber = page;
    PagedProducts = await _context.Products.GetPagedAsync(page, PageSize);
}

✅ 显示分页控件（Products/Index.cshtml）

<nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
        @for (var i = 1; i <= Model.PagedProducts.TotalPages; i++)
        {
            <li class="page-item @(i == Model.PageNumber ? "active" : "")">
                <a class="page-link" asp-route-page="@i">@ia>
            li>
        }
    ul>
nav>

---

⚙️ 第四步：配置生产环境设置

✅ 创建 appsettings.Production.json

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=prod-db-server;Database=ECommercePlatform;User Id=admin;Password=securepassword;"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Error",
      "Microsoft.AspNetCore": "Error"
    }
  }
}

✅ 修改 Program.cs 启动时加载对应配置：

var builder = WebApplication.CreateBuilder(args);

// 默认已自动根据环境加载对应的 appsettings.{Environment}.json

---

第五步：打包部署应用

✅ 使用命令打包：

dotnet publish -c Release -o ./publish

你可以在 publish 文件夹中找到所有部署所需文件。

✅ 可选：创建 .zip 包用于上传服务器

cd publish
zip -r ../ECommercePlatform.zip .

---

第六步：提交 Git 版本

git add .
git commit -m "Day7: Added static resources, pagination, layout improvements and deployment configuration"

---

今日总结

今天你完成了：

✅ 添加静态资源目录并优化页面样式
✅ 实现分页功能（商品、订单）
✅ 创建生产环境配置文件 appsettings.Production.json
✅ 使用 dotnet publish 打包部署项目
✅ 提交版本控制记录

---

明日计划（Day8）

我们将进入 最终测试与上线阶段：

• 测试用户注册/登录流程
• 测试购物车与下单流程
• 测试管理员功能
• 部署到本地 IIS 或 Linux 服务器
• 编写项目文档（README.md）
• 完成项目总结报告