1.1功能模块实现
1.1.1整体结构
界面由两部分组成：左侧导航栏、右侧内容展示区。使用了 Bootstrap 5 的样式库，并结合了 ASP.NET MVC 的 @Html.ActionLink 和 Razor 条件判断语句来动态生成菜单项。
1.1.2导航栏功能模块
导航栏基础结构
导航栏基础结构使用 Bootstrap 的 navbar 类构建响应式导航栏。flex-column align-items-start 表示导航栏是垂直方向排列的。
响应式按钮
展示区显示折叠菜单按钮使用data-bs-toggle="collapse" 控制展开/收起。
动态菜单
根据用户登录状态和角色不同，显示不同的菜单项。
登录前：显示"登录"选项
登录后：设计用户角色：
店主功能用户管理、花卉管理、订单管理；普通用户功能购物车、订单界面、客服界面；管理员功能用户管理、花卉管理、花店订单管理。
商品搜索框
使用Ajax.BeginForm 实现异步搜索鲜花的功能，无需刷新页面即可更新商品列表。
3.1.2右侧内容展示区
主体内容容器使用 flex-grow-1 确保内容区域自动扩展以填满剩余空间。
@RenderBody() 是 MVC 布局页中的占位符，表示子页面的内容会在此处插入。
3.1.3主要功能模块
|-------|------------------------------------|
| 模块 | 功能说明 |
| 导航栏 | 实现响应式菜单，支持不同用户角色（管理员、店主、顾客）的不同菜单项。 |
| 权限控制 | 根据 Session 中的角色信息动态渲染菜单内容。 |
| 搜索功能 | 使用 AJAX 实现无刷新搜索，提升用户体验。 |
| 内容展示区 | 支持子页面内容动态加载，保持统一风格。 |
| 脚本管理 | 集中式引入常用脚本库，允许子页面添加自定义脚本。 |
3.2控制器介绍
3.2.1购物车控制器
通过多个Action 方法来实现添加、修改、删除购物车内容以及显示购物车信息等操作。
（1） Index()
获取当前登录用户的 ID。查询该用户的所有购物车条目，并包含关联的 Flowers 和 Users 数据。计算购物车中所有商品的总价（单价 × 数量），传递给视图。返回视图并展示购物车列表。依赖 Session["UserID"] 来判断当前用户。
（2） InsertCart(int flowerID)
判断用户是否登录（Session 是否存在 UserID）。判断用户身份是否是管理员或店主，如果是，则不允许购买。检查该用户是否已将此商品加入过购物车：若没有，新增一条记录；若有，将数量加一。保存更改后返回提示信息。使用了 JavaScript 提示框 (<script>alert(...)</script>) 并返回上一页。
（3） AddOne(int id)
根据 CartID 查找购物车条目。将商品数量加一。更新数据库状态并保存。
（4） MinusOne(int id)
同样根据 CartID 查找购物车条目。商品数量减一：若数量变为 0，则直接删除该条目；
否则更新数量。
（5） Delete(int id)
删除指定 ID 的购物车条目。保存更改后跳转回购物车首页。
3.2.2购物车控制器
用于处理与订单（Order）相关的操作。它使用了 ASP.NET MVC 框架，并结合 Entity Framework 实现对数据库中订单数据的访问和管理。
（1）Index()
功能：展示订单列表。权限控制：如果未登录（Session["RoleName"]为空），跳转到登录页。如果是"管理员"或"店主"，显示全部订单。如果是普通用户，则只显示当前用户的订单。
（2）UpdateOrderState(int id, int state)
功能：根据传入的状态值更新订单状态。参数说明：id: 订单IDstate: 状态码（应映射为枚举 OrderState）表示订单的状态。
3.3 技术介绍
3.3.1购买的倒计时功能
获取DOM元素：通过document.querySelector('.btn-gradient') 和 document.getElementById('countdown') 分别获取按钮和倒计时提示框的引用。禁用按钮：当函数开始执行时，首先禁用了按钮防止重复点击，并且改变了按钮的文字内容为带有旋转图标的"处理中..."以给用户视觉反馈。初始化倒计时：将倒计时设定为3秒，并将这个数值显示在倒计时框内。定时器逻辑：使用setInterval()方法每秒更新一次倒计时：减少剩余时间，并更新倒计时框中的数字。应用了一个名为countdown-pulse的CSS类，用于实现数字的跳动效果。根据剩余时间动态调整背景颜色，提供更丰富的视觉体验。当倒计时结束（即seconds小于等于0），清除定时器，恢复按钮的状态，并导航到购物车页面。
JS代码解释
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| function addToCart(flowerId) { // 获取按钮和倒计时元素 var button = document.querySelector('.btn-gradient'); var countdown = document.getElementById('countdown'); // 禁用按钮并改变按钮文本为加载状态 button.disabled = true; button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 处理中...'; // 显示倒计时框并应用动画效果 countdown.style.display = 'inline-block'; countdown.classList.add('countdown-show'); let seconds = 3; // 设置倒计时秒数 const numberElement = countdown.querySelector('.countdown-number'); // 获取倒计时数字元素 numberElement.textContent = seconds; // 初始化倒计时数字 // 开始定时器，每秒更新一次 const timer = setInterval(() => { seconds--; // 每次循环减少一秒 numberElement.textContent = seconds; // 更新倒计时数字 numberElement.classList.add('countdown-pulse'); // 添加跳动动画类 // 动态修改背景颜色以增加视觉效果 countdown.style.background = `linear-gradient(145deg, hsl(${seconds * 40}, 70%, 60%), #a363d9)`; // 在每次添加跳动动画类之后短暂延迟移除它，创建脉冲效果 setTimeout(() => { numberElement.classList.remove('countdown-pulse'); }, 200); // 如果倒计时结束 if (seconds <= 0) { clearInterval(timer); // 清除定时器 countdown.classList.remove('countdown-show'); // 移除动画效果 setTimeout(() => { countdown.style.display = 'none'; // 隐藏倒计时框 button.disabled = false; // 启用按钮 button.innerHTML = '立即购买'; // 恢复按钮文本 window.location.href = '@Url.Action("InsertCart","Cart",new { flowerID=Model.FlowerId})'; // 跳转至购物车页面 }, 500); } }, 1000); // 每隔一秒钟调用一次回调函数 } |
3.3.2花卉类别选择功能介绍
视图模型绑定
当前页面绑定了一个 Flowers 类型的集合数据，用于展示默认或筛选后的花卉列表。
|-------------------------------------------------|
| @model IEnumerable<FlowerShop.Models.Flowers> |
HTML结构的下拉菜单
使用了 ViewBag.flowerType 提供所有花卉类型的选项。每个 <option> 的 value 是花卉类型的 ID，提交后作为参数传给后台搜索方法。
|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <select id="flowerTypeSelect" name="flowertype" onchange="this.form.submit();"> <option value="" disabled selected>选择花卉类型</option> @foreach (var flowertype in ViewBag.flowerType as List<FlowerShop.Models.FlowerTypes>) { <option value="@flowertype.FlowerTypeId">@flowertype.FlowerTypeName</option> } </select> |
Ajax 异步请求
表单使用了 Ajax.BeginForm 实现无刷新提交。提交时调用控制器 FlowersController 中的 SearchFlowerList(int? flowertype) 方法。返回结果更新到 #GoodShow 容器中，不会重新加载整个页面。
|---------------------------------------------------------------------------------|
| @using (Ajax.BeginForm("SearchFlowerList", "Flowers", new AjaxOptions { ... })) |