花漾商城 – Vue3 纯前端鲜花购物商城
基于 Vue3 + Element Plus + Vite + Pinia + Vue Router + Axios 的纯前端鲜花购物商城，无需数据库、无需后端服务，接口由 axios-mock-adapter 在浏览器端模拟，购物车 / 登录态 / 订单均保存在浏览器 localStorage 中，开箱即用。
演示账号：admin / 123456（也可自行注册新账号）
一、环境要求与启动
本项目兼容 Node.js 14（Vite 锁定 2.x 版本；Vite 3+ 对 Node 版本要求更高，切勿随意升级）。
# 1. 安装依赖
npm install
# 2. 启动开发服务器（默认 http://localhost:5173 ，端口被占用时自动顺延）
npm run dev
# 3. 打包生产环境（输出到 dist 目录）
npm run build
# 4. 本地预览打包产物
npm run preview
二、技术栈
| Vue | ^3.2.47 | 组合式 API（<script setup>） |
| Vite | ^2.9.18 | 构建工具（兼容 Node 14） |
| Element Plus | ^2.2.36 | UI 组件库（完整引入 + 中文语言包） |
| @element-plus/icons-vue | ^2.0.10 | 图标库（全局注册） |
| Pinia | ^2.0.36 | 状态管理（含 localStorage 持久化插件） |
| Vue Router | ^4.1.6 | 路由管理（懒加载 + 登录守卫） |
| Axios | ^0.27.2 | HTTP 请求（请求/响应拦截器） |
| axios-mock-adapter | ^1.21.2 | 纯前端模拟后端接口 |
三、页面清单（共 12 个页面）
| / | 首页 | 轮播图、欢迎区、热门分类、精选推荐 |
| /search | 搜索页 | 关键词搜索、分类筛选、排序、分页（6/9/12 条每页） |
| /product/:id | 商品详情页 | 商品图、数量步进器、加入购物车、立即购买 |
| /cart | 购物车页 | 勾选、数量修改、删除、全选、合计、去结算 |
| /order/confirm | 订单确认页 | 收货信息、商品清单、运费规则（满199免运费）、提交订单（需登录） |
| /orders | 订单列表页 | 状态筛选（待付款/待发货/待收货/已完成）、模拟支付、确认收货、再次购买（需登录） |
| /profile | 个人中心页 | 用户资料、订单统计、编辑资料弹窗、快捷入口（需登录） |
| /login | 登录页 | 表单校验、演示账号提示 |
| /register | 注册页 | 自定义校验（两次密码一致）、注册后自动登录 |
| /about | 关于我们页 | 品牌故事、四大优势、团队介绍、联系我们与留言表单 |
| /ai | AI 助手页 | 模拟 AI 客服对话、快捷提问、清空对话、服务评价、热门推荐侧栏 |
四、目录结构
xianhuagouwushangcheng/
├─ index.html # HTML 入口
├─ vite.config.js # Vite 配置（@别名、端口）
├─ package.json
└─ src/
├─ main.js # 应用入口：注册 ElementPlus / Pinia（含持久化插件）/ 路由 / Mock
├─ App.vue # 根组件（Header + router-view + Footer）
├─ styles/
│ └─ global.css # 全局样式与主题变量（粉色主题覆盖 Element Plus 主色）
├─ router/
│ └─ index.js # 路由表 + 全局前置守卫（登录拦截）
├─ stores/ # Pinia 状态管理
│ ├─ user.js # 用户：登录/注册/资料/退出
│ ├─ cart.js # 购物车：增删改、勾选、合计、立即购买
│ └─ order.js # 订单：创建、状态流转
├─ utils/
│ └─ request.js # Axios 实例 + 请求/响应拦截器（自动带 token）
├─ api/
│ └─ index.js # 接口封装（商品/轮播/分类/登录/注册/AI对话）
├─ mock/ # 纯前端模拟后端
│ ├─ data.js # 商品、分类、轮播图、团队成员等数据
│ └─ index.js # axios-mock-adapter 接口拦截与 AI 关键词回复逻辑
├─ components/
│ ├─ AppHeader.vue # 顶部导航（Logo/菜单/搜索/购物车角标/用户下拉）
│ ├─ AppFooter.vue # 底部页脚
│ └─ ProductCard.vue # 商品卡片（props + emit + 具名插槽）
└─ views/ # 12 个页面（见上表）
五、Vue3 知识点对照（学习/答辩用）
| 父子组件通信 props / emit | ProductCard.vue 接收 product 属性，派发 addCart、buyNow 事件；Home.vue / Search.vue 中监听 |
| 具名插槽 slot | ProductCard.vue 定义 tag、footer 两个具名插槽；Home.vue 用 #footer 覆盖卡片底部按钮 |
| v-if / v-else | AppHeader.vue 登录态切换；Cart.vue 空购物车；Orders.vue 按订单状态渲染操作按钮 |
| v-for | 商品列表、分类、订单、消息列表等所有遍历场景 |
| v-on (@) | 按钮点击、回车搜索、输入确认等事件绑定 |
| v-model | 搜索框、登录/注册表单、数量输入、AI 输入框、弹窗显隐、评价星级 |
| v-bind (😃 | :src、:class、:style、:model-value 等动态绑定 |
| computed 计算属性 | cart.js 的总价/总件数/全选状态；Search.vue 总页数；OrderConfirm.vue 运费；Orders.vue 状态筛选 |
| watch 侦听器 | AppHeader.vue 侦听路由关键词同步搜索框；Search.vue 侦听路由参数与页码；ProductDetail.vue 校正数量；AiChat.vue 消息变化自动滚底；Profile.vue 弹窗打开回填数据 |
| Pinia 数据管理 | stores/ 三个仓库，main.js 中通过插件自动持久化到 localStorage |
| 分页功能 | Search.vue 自定义分页（每页 6/9/12 条、页码、Go to 跳转），后端分页逻辑在 mock/index.js |
| 路由守卫 | router/index.js 中 requiresAuth 页面未登录跳转登录页，登录后回跳 |
| Axios 拦截器 | utils/request.js 请求自动带 token，响应统一错误提示 |
六、Mock 接口说明
所有接口由 src/mock/index.js 拦截，baseURL 为 /api：
| GET | /banners | – | 轮播图 |
| GET | /categories | – | 热门分类与全部分类 |
| GET | /products | keyword, category, sort, page, pageSize | 商品分页列表（搜索/筛选/排序） |
| GET | /products/:id | – | 商品详情 |
| POST | /login | username, password | 登录，返回 token + 用户信息 |
| POST | /register | username, password, name, phone | 注册（用户存入 localStorage） |
| POST | /chat | message | AI 客服，按关键词规则回复 |
数据存储说明（纯前端，无数据库）：
- 购物车 / 订单 / 登录态：Pinia 状态自动持久化到 localStorage（键名 huayang_cart、huayang_order、huayang_user）
- 注册用户：localStorage 的 huayang_mock_users
- 清除浏览器站点数据即可重置全部数据
七、项目效果图
源码获取：
大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻
精彩专栏推荐订阅：在下方专栏👇🏻
