MiniProject Tailtreats

**1. 系统概述**

Tailtreats 是一个使用 Next.js、Prisma 和 TailwindCSS 构建的电子商务网站项目。它为客户提供了一个购买宠物相关产品（如食品、玩具和零食）的平台。该系统还设有一个管理面板，用于管理产品列表、客户互动和其他关键数据。该网站设计为响应式，支持移动和桌面视图。

**2. 重要且有趣的函数**

使用 Next.js 进行动态路由

Tailtreats 利用 Next.js 强大的动态路由系统来处理不同的产品类别和页面。应用目录中的每个文件夹都对应网站上的一个单独页面。例如：

app/page.tsx - 主页

app/products/cat.tsx - 猫相关产品

app/products/dog.tsx - 与狗相关的产品

此设置允许轻松扩展，因为只需创建新文件夹或文件即可添加新的产品类别或页面。

使用 Prisma 进行数据库管理

Tailtreats 使用 Prisma ORM 来管理 SQLite 数据库。Prisma 有助于高效处理产品列表、客户详细信息和用户帐户的 CRUD 操作。

CRUD 操作：管理员可以使用 Prisma 在数据库中添加、编辑和删除产品。

数据验证：输入数据在前端（通过 Zod）和后端（通过 Prisma）进行验证。

用户身份验证

客户注册：用户可以使用电子邮件和密码创建帐户。

客户登录/注销：注册用户可以登录查看和购买产品。

管理员身份验证：管理员用户可以通过受密码保护的页面登录来管理产品。

可重用组件

Tailtreats 采用模块化设计方法，将导航栏、产品卡和按钮等可重复使用的组件放在组件目录中。这减少了冗余并保持了整个应用程序的一致性。

使用 Tailwind CSS 进行响应式设计

Tailtreats 使用 TailwindCSS 进行样式设计，确保设计能够无缝适应不同的屏幕尺寸。使用实用优先类可以实现快速灵活的布局设计。整个项目都使用 Flexbox 和 Grid 布局，以确保 UI 既实用又美观。

产品管理仪表板（管理员视图）

管理员有一个专用的仪表板，他们可以在其中：

查看所有产品的列表。

添加新产品。

编辑或删除现有产品。此功能可确保网站始终提供最新的产品。

**3. 如何使用系统**

对于客户

注册和登录：

顾客可以在主页上输入电子邮件和创建密码进行注册。

注册后，他们可以使用他们的凭证登录。

导航：

登录后，顾客可以通过导航栏按类别（例如猫粮、狗粮、零食、玩具）浏览产品。

在产品页面上，客户可以查看详细信息并将商品添加到购物车。

查看：

选择产品后，顾客可以继续结账，查看购物车并完成购买。

对于管理员

管理员登录：

管理员可以使用安全密码登录。

管理产品：

管理员可以向商店添加新产品，编辑现有产品详细信息（名称、价格、描述）以及删除产品。

查看订单：

管理员可以监控和管理客户订单，以确保及时完成。