Dulizhan 电商独立站
项目概述
Dulizhan 是一个功能完整的电商独立站系统，采用前后端分离架构。前台为面向消费者的购物官网，后台为独立的管理系统。
技术栈
前端
- 框架: Next.js 14 (App Router)
- 语言: TypeScript
- 样式: Tailwind CSS
- 状态管理: Zustand
- HTTP 客户端: Axios
- 国际化: i18next
后端
- 框架: Java Spring Boot 3
- 数据库: MySQL 8
- 构建工具: Maven
项目结构
dulizhan/
├── frontend/ # 前台官网 (端口: 3000)
│ └── src/
│ ├── app/ # Next.js 页面
│ │ ├── products/ # 产品列表
│ │ ├── products/[id]/ # 产品详情
│ │ ├── cart/ # 购物车
│ │ ├── checkout/ # 结账流程
│ │ ├── order/ # 订单页面
│ │ ├── login/ # 用户登录
│ │ ├── register/ # 用户注册
│ │ ├── about/ # 关于我们
│ │ └── contact/ # 联系我们
│ ├── components/ # React 组件
│ └── lib/ # 工具函数和状态管理
│
├── admin/ # 后台管理系统 (端口: 3001)
│ └── src/
│ └── app/
│ ├── login/ # 管理员登录
│ └── admin/ # 管理后台页面
│ ├── dashboard/ # 数据仪表盘
│ ├── products/ # 商品管理
│ ├── categories/# 分类管理
│ ├── orders/ # 订单管理
│ ├── customers/ # 客户管理
│ ├── analytics/ # 数据分析
│ └── settings/ # 系统设置
│
└── backend/ # Spring Boot 后端 (端口: 8080)
└── src/main/java/com/dulizhan/
├── product/ # 产品模块
├── order/ # 订单模块
├── user/ # 用户模块
├── cart/ # 购物车模块
├── cms/ # 内容管理模块
├── review/ # 评价模块
├── plugin/ # 插件模块
└── common/ # 公共模块功能特性
前台官网
- 🛍️ 产品展示: 多语言产品列表、搜索、筛选
- 🛒 购物车: 添加/删除商品、数量调整
- 💳 结账流程: 地址管理、支付方式选择、订单确认
- 🌐 多语言支持: 中英文切换
- 📱 响应式设计: 支持移动端和桌面端
后台管理系统
- 📊 数据仪表盘: 关键指标概览
- 📦 商品管理: 产品增删改查、属性管理
- 🗂️ 分类管理: 产品分类维护
- 📋 订单管理: 订单列表、状态更新
- 👥 客户管理: 客户信息查看
- 📈 数据分析: 销售数据图表
- ⚙️ 系统设置: 站点配置
快速启动
1. 数据库准备
确保 MySQL 8 已启动，并创建数据库：
sql
CREATE DATABASE dulizhan CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;2. 后端启动
bash
cd backend
./mvnw spring-boot:run后端运行在: http://localhost:8080
3. 前台启动
bash
cd frontend
npm install
npm run dev前台运行在: http://localhost:3000
4. 后台启动
bash
cd admin
npm install
npm run dev后台运行在: http://localhost:3001
测试账号
后台管理
- URL: http://localhost:3001/login
- 用户名: admin
- 密码: admin123
API 接口
产品接口
| 方法 | 路径 | 描述 |
|---|---|---|
| GET | /api/products | 获取产品列表 |
| GET | /api/products/{id} | 获取产品详情 |
| POST | /api/products | 创建产品 |
| PUT | /api/products/{id} | 更新产品 |
| DELETE | /api/products/{id} | 删除产品 |
分类接口
| 方法 | 路径 | 描述 |
|---|---|---|
| GET | /api/categories | 获取分类列表 |
| POST | /api/categories | 创建分类 |
| PUT | /api/categories/{id} | 更新分类 |
| DELETE | /api/categories/{id} | 删除分类 |
用户接口
| 方法 | 路径 | 描述 |
|---|---|---|
| POST | /api/users/register | 用户注册 |
| POST | /api/users/login | 用户登录 |
| GET | /api/users/me | 获取当前用户 |
环境变量
后端 (application.yml)
yaml
spring:
datasource:
url: jdbc:mysql://localhost:3306/dulizhan
username: root
password: your_password
jpa:
hibernate:
ddl-auto: update前端
无需额外环境变量，API 通过 Next.js 代理连接后端。
项目截图
前台官网
- 首页：品牌展示、精选产品
- 产品页：产品列表、筛选搜索
- 购物车：商品列表、金额计算
- 结账：地址选择、支付方式
后台管理
- 仪表盘：销售数据、订单统计
- 商品管理：产品列表、编辑表单
- 订单管理：订单列表、状态更新
