个人发卡网平台 - React + PHP7.4 整合方案
不懂加QQ1469437475
项目概述
这是一个个人发卡网平台的前后端分离解决方案，包含React前端应用和PHP7.4后端API。
环境要求
前端环境
-
Node.js 16+
-
pnpm (推荐) 或 npm/yarn
后端环境
-
PHP 7.4 或更高版本
-
SQLite3 扩展
-
Web服务器（如Apache、Nginx）
安装与部署步骤
1. 前端安装与构建
# 安装依赖
pnpm install
# 开发模式运行
pnpm dev
# 构建生产版本
pnpm build
构建后的前端文件将位于dist目录。
2. PHP后端部署
-
将
php-api目录中的所有文件复制到您的PHP服务器的Web根目录或子目录 -
确保PHP有写权限来创建和修改
app.db文件 -
测试API是否正常工作：
-
访问
http://your-server/php-api/index.php/content -
访问
http://your-server/php-api/index.php/products
-
3. 整合前后端
-
前端构建完成后，将
dist目录中的所有文件复制到PHP服务器的Web目录 -
修改React代码中的API URL，指向您的PHP API地址（在实际部署时）
项目结构说明
前端部分 (React)
-
src/App.tsx: 主应用组件 -
src/pages/: 页面组件-
Home.tsx: 首页 -
SelfOrderingPage.tsx: 自助下单页面 -
AdminPage.tsx: 后台管理页面
-
-
src/components/: 通用组件 -
src/contexts/: React上下文，用于状态管理 -
src/hooks/: 自定义React钩子
后端部分 (PHP)
-
php-api/index.php: PHP API入口文件，处理所有API请求 -
php-api/app.db: SQLite数据库文件（自动创建）
使用说明
前端功能
-
首页：显示欢迎信息和下单入口
-
自助下单：选择商品、数量，输入QQ邮箱，进行支付
-
订单查询：通过QQ邮箱查询已完成订单和卡密信息
-
后台管理：
-
内容管理：配置页面标题、按钮文字、收款码等
-
商品管理：添加/编辑/删除商品分类和商品
-
订单管理：处理用户订单，分配卡密
-
安全设置：修改管理员账号密码
-
后端API
-
/content: 获取前端配置内容 -
/products: 获取商品分类和商品信息 -
/orders: 订单管理（创建、查询） -
/auth: 管理员认证
注意事项
-
在生产环境中，请务必修改默认的管理员账号和密码
-
定期备份
app.db数据库文件以防数据丢失 -
对于大型应用，建议考虑使用更强大的数据库系统如MySQL
-
前端应用在开发模式下使用localStorage存储数据，部署时需要修改为使用PHP API
常见问题解决
前端问题
-
无法访问页面：检查Node.js版本和依赖安装是否正确
-
功能异常：查看浏览器控制台的错误信息
后端问题
-
API返回404：检查URL路径和服务器配置
-
数据库错误：确保PHP有正确的文件权限
-
跨域问题：检查CORS配置
部署到服务器
-
在服务器上安装必要的环境（PHP、Web服务器）
-
部署PHP API到服务器
-
构建React前端应用并部署到服务器
-
配置Web服务器（Apache/Nginx）指向前端构建目录
-
设置适当的文件权限
-
测试整个系统是否正常工作
