基于 Vue 3 + Vite 开发的完整商城系统，包含客户端（用户端）和管理员后台两个部分。
- ✅ Vue 3 Composition API
- ✅ Vue Router 路由管理
- ✅ MockJS 模拟后端接口
- ✅ Axios HTTP 请求封装
- ✅ 路由守卫（登录验证）
- ✅ 购物车本地存储
- ✅ 响应式设计
- ✅ 商品首页展示
- ✅ 商品分类浏览
- ✅ 商品列表和搜索
- ✅ 商品详情页
- ✅ 添加商品到购物车
- ✅ 购物车商品管理
- ✅ 商品数量调整
- ✅ 购物车本地存储
- ✅ 创建订单
- ✅ 订单列表查看
- ✅ 订单状态筛选
- ✅ 订单详情查看
- ✅ 个人信息管理
- ✅ 订单管理入口
- ✅ 用户登录/退出
- ✅ 管理员登录页面
- ✅ 登录成功自动跳转
- ✅ 错误提示处理
- ✅ 欢迎信息展示
- ✅ 数据统计概览
- ✅ 快捷操作入口
- ✅ 用户列表展示
- ✅ 分页功能
- ✅ 搜索功能
- ✅ 路由守卫
- ✅ 未登录自动跳转
- ✅ Token 管理
npm installnpm run dev访问 http://localhost:5173 查看应用
npm run build- 用户名：
admin - 密码：
123456 - 访问地址：
http://localhost:5173/admin/login
- 用户名：
user或test - 密码：
123456 - 访问地址：
http://localhost:5173/login
mall/
├── public/ # 静态资源
├── src/
│ ├── api/ # API 接口封装
│ │ ├── login.js # 登录接口
│ │ ├── user.js # 用户接口
│ │ ├── product.js # 商品接口
│ │ ├── cart.js # 购物车接口
│ │ └── order.js # 订单接口
│ ├── mock/ # Mock 数据
│ │ ├── index.js # Mock 入口
│ │ ├── login.js # 登录 Mock
│ │ ├── user.js # 用户 Mock
│ │ ├── product.js # 商品 Mock
│ │ ├── cart.js # 购物车 Mock
│ │ └── order.js # 订单 Mock
│ ├── router/ # 路由配置
│ │ └── index.js # 路由文件（含路由守卫）
│ ├── utils/ # 工具函数
│ │ ├── request.js # Axios 封装
│ │ ├── auth.js # 认证工具（Token 管理）
│ │ └── cart.js # 购物车工具（localStorage）
│ ├── views/ # 页面组件
│ │ ├── admin/ # 后台管理页面
│ │ │ ├── Login.vue # 登录页
│ │ │ ├── Layout.vue # 布局组件
│ │ │ ├── Home.vue # 首页
│ │ │ └── User.vue # 用户管理页
│ │ └── client/ # 客户端页面
│ │ ├── Layout.vue # 布局组件
│ │ ├── Home.vue # 首页
│ │ ├── Products.vue # 商品列表
│ │ ├── ProductDetail.vue # 商品详情
│ │ ├── Cart.vue # 购物车
│ │ ├── Checkout.vue # 结算页
│ │ ├── Orders.vue # 订单列表
│ │ ├── Profile.vue # 用户中心
│ │ └── Login.vue # 登录页
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html
├── package.json
├── vite.config.js
└── 任务书.md # 任务书文档
/- 首页/products- 商品列表/product/:id- 商品详情/cart- 购物车/checkout- 订单结算/orders- 我的订单/profile- 个人中心/login- 用户登录
/admin/login- 管理员登录/admin或/admin/home- 后台首页/admin/user- 用户管理
- GET
/api/products- 获取商品列表 - GET
/api/product/:id- 获取商品详情 - GET
/api/categories- 获取分类列表
- GET
/api/cart- 获取购物车列表 - POST
/api/cart/add- 添加到购物车 - PUT
/api/cart/update- 更新购物车 - DELETE
/api/cart/:id- 删除购物车商品
- GET
/api/orders- 获取订单列表 - POST
/api/order/create- 创建订单 - GET
/api/order/:id- 获取订单详情 - POST
/api/order/:id/cancel- 取消订单
- POST
/api/login- 用户登录 - GET
/api/userlist- 获取用户列表（管理员）
- Vue 3 - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Vue Router - Vue.js 官方路由管理器
- Axios - 基于 Promise 的 HTTP 客户端
- MockJS - 生成随机数据，拦截 Ajax 请求
-
Mock 数据
- Mock 数据仅在开发环境生效
- 购物车数据存储在 localStorage
- Token 存储在 localStorage
-
路由守卫
- 管理员后台需要登录才能访问
- 客户端大部分页面不需要登录
- 已登录用户访问登录页会自动跳转
-
购物车
- 购物车数据存储在浏览器 localStorage
- 关闭浏览器后数据仍然保留
- 清除浏览器缓存会丢失购物车数据