React个人发卡网系统 无后端静态部署

介绍

React个人发卡网系统是一套基于React+TypeScript+Tailwind CSS+Vite构建的无后端卡密销售管理工具，数据存储在浏览器localStorage中。支持卡密商品管理、订单管理、自定义收款码、明暗主题切换、数据导出、管理员密码保护等功能，响应式设计适配PC与移动端。适合用于销售虚拟商品卡密，便于学习React静态部署与前端数据管理实践。

使用说明

### 前置要求

– Node.js 16+

– pnpm 包管理器

### 构建步骤

1. 克隆或下载项目代码

2. 安装依赖：

“`bash

pnpm install

“`

3. 构建项目：

“`bash

pnpm build

“`

4. 构建完成后，`dist` 目录中的文件即为可部署的静态文件

### 上传到服务器

1. 将 `dist` 目录中的所有文件上传到您的 Web 服务器根目录

2. 确保服务器支持 php 7.4+（用于处理路由问题）

3. 如果您使用的是 Apache 服务器，`.htaccess` 文件会自动处理路由重写

4. 如果您使用的是 Nginx 服务器，需要配置相应的 try_files 规则

## 使用说明

### 管理员登录

– 默认密码：`admin123`

– 登录后请立即修改密码以确保安全

– 登录入口：网站首页右上角 ” 管理登录 ”

### 卡密管理

– 在后台管理界面可以添加、编辑和删除卡密商品

– 可以为每个商品添加多个卡密

– 系统会自动跟踪卡密的使用状态

### 订单管理

– 查看所有订单记录

– 审核待处理的订单

– 标记订单完成或拒绝

### 收款码管理

– 上传zfb、VX等收款二维码

– 可以启用或禁用特定的收款码

### 系统设置

– 配置客服 QQ

– 设置邮件发送功能（用于发送卡密）

– 修改管理员密码

– 导出系统数据备份

## 注意事项

1. 本系统使用 localStorage 存储数据，数据仅保存在浏览器本地

2. 如果需要更强大的数据持久化能力，建议开发相应的后端 API

3. 邮件发送功能默认使用模拟模式，如需真实发送请配置邮件服务器信息

4. 部署到虚拟主机时，确保 PHP 版本不低于 7.4

图片演示