本项目由 ICodeStar 智码星科技 开发制作，该项目已MIT开源，欢迎学习使用，开发不易，使用还请保留版权信息 https://www.icodestar.net
该商城系统是一个基于 Spring Boot + Vue.js 的现代化电商平台，专为产品销售而设计。系统采用前后端分离架构，包含管理后台、H5移动端和RESTful API后端服务，提供完整的电商解决方案。
这个项目非常适合作为学习全栈开发的示例，或者作为小型电商项目的起点。代码结构清晰，文档完善，部署方案多样，是一个很好的全栈项目示例。
giee 已开源 https://gitee.com/heyqzz/icodestarmall_basic github 已开源 https://github.com/hyqzz/ICodeStarMall_Basic
演示：
前端H5（手机浏览器访问，需支持IPV6网络（WIFI不行可以用手机流量））
https://h5-mall.demo.icodestar.net
用户名：user
密码： user123
后端管理页面（电脑浏览器访问，需支持IPV6网络）
https://admin-mall.demo.icodestar.net
用户名：superadmin
密码： admin123
- 框架: Spring Boot 2.7.18
- 数据库: MySQL 8.0
- ORM: MyBatis-Plus 3.5.3.1
- 安全: Spring Security + JWT
- 工具库: Hutool 5.8.20, Lombok 1.18.38
- Java版本: JDK 17
- 管理后台: Vue 3 + TypeScript + Element Plus + Vite
- H5移动端: Vue 3 + TypeScript + Vant + Vite
- 状态管理: Pinia
- 路由: Vue Router 4
- HTTP客户端: Axios
- 商品管理: 商品分类、商品信息、库存管理、多图展示
- 用户系统: 用户注册、登录、个人信息管理、地址管理
- 购物车: 商品添加、数量修改、价格计算
- 订单系统: 订单创建、状态跟踪、订单详情
- 支付系统: 多种支付方式（在线支付、储值卡、月结）
- 储值卡: 储值卡管理、余额查询、消费记录
- 响应式设计: 适配各种移动设备
- 用户友好: 直观的购物流程和界面
- 地址管理: 收货地址的增删改查
- 订单跟踪: 实时订单状态更新
- 个人中心: 用户信息、订单历史、地址管理
- 数据统计: 销售数据、用户统计、订单分析
- 商品管理: 商品上架下架、分类管理、库存调整
- 订单管理: 订单处理、状态更新、发货管理
- 用户管理: 用户信息查看、状态管理
- 轮播图管理: 首页轮播图配置
- 储值卡管理: 储值卡发放、余额管理
- JWT认证: 基于Token的身份验证
- 权限控制: 管理员权限分级
- 数据加密: 密码BCrypt加密
- 接口安全: RESTful API安全防护
icodestarmall_basic/
├── seafood-mall-backend/ # 后端服务
│ ├── src/main/java/com/seafoodmall/backend/
│ │ ├── common/ # 公共组件
│ │ ├── config/ # 配置类
│ │ ├── controller/ # 控制器层
│ │ ├── dto/ # 数据传输对象
│ │ ├── entity/ # 实体类
│ │ ├── filter/ # 过滤器
│ │ ├── mapper/ # 数据访问层
│ │ ├── service/ # 业务逻辑层
│ │ └── util/ # 工具类
│ ├── src/main/resources/
│ │ ├── db/ # 数据库脚本
│ │ └── application.yml # 配置文件
│ └── uploads/ # 文件上传目录
├── seafood-mall-admin/ # 管理后台
│ ├── src/
│ │ ├── api/ # API接口
│ │ ├── views/ # 页面组件
│ │ ├── stores/ # 状态管理
│ │ ├── utils/ # 工具函数
│ │ └── router/ # 路由配置
│ └── public/ # 静态资源
└── seafood-mall-h5/ # H5移动端
├── src/
│ ├── api/ # API接口
│ ├── views/ # 页面组件
│ ├── stores/ # 状态管理
│ ├── utils/ # 工具函数
│ └── router/ # 路由配置
└── public/ # 静态资源
- 用户表 (
user): 用户基本信息、类型、等级 - 管理员表 (
admin_user): 后台管理员信息 - 商品表 (
product): 商品信息、价格、库存 - 分类表 (
category): 商品分类管理 - 订单表 (
order): 订单主信息 - 订单项表 (
order_item): 订单商品明细 - 用户地址表 (
user_address): 收货地址管理 - 储值卡表 (
stored_value_card): 储值卡信息 - 支付记录表 (
payment_record): 支付流水 - 轮播图表 (
banner): 首页轮播图
- JDK 17+
- Node.js 16+
- MySQL 8.0+
- Maven 3.6+
- 克隆项目
git clone [项目地址]
cd icodestarmall_basic- 数据库配置
# 创建数据库
mysql -u root -p
CREATE DATABASE seafood_mall_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
# 导入数据库脚本
mysql -u root -p seafood_mall_db < seafood-mall-backend/src/main/resources/db/schema.sql
mysql -u root -p seafood_mall_db < seafood-mall-backend/src/main/resources/db/data_db.sql-
修改配置文件 编辑
seafood-mall-backend/src/main/resources/application.yml，配置数据库连接信息。 -
启动后端服务
cd seafood-mall-backend
mvn spring-boot:run- 安装依赖
cd seafood-mall-admin
npm install- 启动开发服务器
npm run dev- 构建生产版本
npm run build- 安装依赖
cd seafood-mall-h5
npm install- 启动开发服务器
npm run dev- 构建生产版本
npm run buildPOST /api/user/login- 用户登录POST /api/user/register- 用户注册GET /api/user/info- 获取用户信息PUT /api/user/info- 更新用户信息
GET /api/product/list- 获取商品列表GET /api/product/{id}- 获取商品详情GET /api/category/list- 获取分类列表
POST /api/order/create- 创建订单GET /api/order/list- 获取订单列表GET /api/order/{id}- 获取订单详情PUT /api/order/{id}/status- 更新订单状态
POST /api/admin/login- 管理员登录GET /api/admin/dashboard- 获取仪表板数据GET /api/admin/product/list- 获取商品管理列表POST /api/admin/product- 创建商品PUT /api/admin/product/{id}- 更新商品
- 后端部署: 使用Docker或直接部署到服务器
- 前端部署: 构建静态文件部署到Nginx
- 数据库: 配置主从复制，确保数据安全
- 文件存储: 配置CDN加速图片访问
- 数据库索引优化
- Redis缓存热点数据
- 图片压缩和CDN加速
- 前端代码分割和懒加载
- 开发公司: ICodeStar 智码星科技
- 官网: https://www.icodestar.net
- 许可证: MIT License
- 初始版本发布
- 完整的电商功能实现
- 管理后台和H5移动端
- 多种支付方式支持
欢迎提交Issue和Pull Request来改进项目。
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。