# 个人发卡网平台 - React + PHP7.4 整合方案 不懂加QQ1469437475 ## 项目概述 这是一个个人发卡网平台的前后端分离解决方案，包含React前端应用和PHP7.4后端API。 ## 环境要求 ### 前端环境 - Node.js 16+ - pnpm (推荐) 或 npm/yarn ### 后端环境 - PHP 7.4 或更高版本 - SQLite3 扩展 - Web服务器（如Apache、Nginx） ## 安装与部署步骤 ### 1. 前端安装与构建 ```bash # 安装依赖 pnpm install # 开发模式运行 pnpm dev # 构建生产版本 pnpm build ``` 构建后的前端文件将位于`dist`目录。 ### 2. PHP后端部署 1. 将`php-api`目录中的所有文件复制到您的PHP服务器的Web根目录或子目录 2. 确保PHP有写权限来创建和修改`app.db`文件 3. 测试API是否正常工作： - 访问`http://your-server/php-api/index.php/content` - 访问`http://your-server/php-api/index.php/products` ### 3. 整合前后端 1. 前端构建完成后，将`dist`目录中的所有文件复制到PHP服务器的Web目录 2. 修改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数据库文件（自动创建） ## 使用说明 ### 前端功能 1. 首页：显示欢迎信息和下单入口 2. 自助下单：选择商品、数量，输入QQ邮箱，进行支付 3. 订单查询：通过QQ邮箱查询已完成订单和卡密信息 4. 后台管理： - 内容管理：配置页面标题、按钮文字、收款码等 - 商品管理：添加/编辑/删除商品分类和商品 - 订单管理：处理用户订单，分配卡密 - 安全设置：修改管理员账号密码 ### 后端API - `/content`: 获取前端配置内容 - `/products`: 获取商品分类和商品信息 - `/orders`: 订单管理（创建、查询） - `/auth`: 管理员认证 ## 注意事项 1. 在生产环境中，请务必修改默认的管理员账号和密码 2. 定期备份`app.db`数据库文件以防数据丢失 3. 对于大型应用，建议考虑使用更强大的数据库系统如MySQL 4. 前端应用在开发模式下使用localStorage存储数据，部署时需要修改为使用PHP API ## 常见问题解决 ### 前端问题 - 无法访问页面：检查Node.js版本和依赖安装是否正确 - 功能异常：查看浏览器控制台的错误信息 ### 后端问题 - API返回404：检查URL路径和服务器配置 - 数据库错误：确保PHP有正确的文件权限 - 跨域问题：检查CORS配置 ## 部署到服务器 1. 在服务器上安装必要的环境（PHP、Web服务器） 2. 部署PHP API到服务器 3. 构建React前端应用并部署到服务器 4. 配置Web服务器（Apache/Nginx）指向前端构建目录 5. 设置适当的文件权限 6. 测试整个系统是否正常工作 下载地址链接：https://pan.quark.cn/s/ecebf126c27a |
免责声明：本站所有内容仅限用于学习和研究目的，不得将本站任何内容用于商业或者非法用途，否则一切后果由用户自负。本站提供的资源来自网络自动采集，版权争议与本站无关。您必须在下载后24个小时内，从您的设备中彻底删除上述内容。本站十分重视版权问题，侵权删除请及时联系我们。
文章来源：《小K娱乐》 https://www.xkwo.com/thread-29547-1-1.html
