系统介绍
这是一个基于 React 开发的个人发卡网系统,可以用于销售和管理各类卡密。系统支持卡密商品管理、订单管理、收款码管理等功能,所有数据使用 localStorage 存储,无需后端数据库支持。
技术栈
– React 18+
– TypeScript
– Tailwind CSS
– Vite
– React Router
功能特点
– 🏠 简洁的卡密商城界面
– 🔧 完整的后台管理功能
– 💳 支持自定义收款码
– 📱 响应式设计,支持移动端和 PC 端
– 🌓 支持明暗主题切换
– 📊 数据概览统计
– 📤 数据导出功能
– 🔐 管理员密码保护
部署指南
前置要求
– Node.js 16+
– pnpm 包管理器
构建步骤
- 克隆或下载项目代码
- 安装依赖:
“bash pnpm install “ - 构建项目:
“bash pnpm build “ - 构建完成后,
dist目录中的文件即为可部署的静态文件
上传到服务器
- 将
dist目录中的所有文件上传到您的 Web 服务器根目录 - 确保服务器支持 PHP 7.4+(用于处理路由问题)
- 如果您使用的是 Apache 服务器,
.htaccess文件会自动处理路由重写 - 如果您使用的是 Nginx 服务器,需要配置相应的 try_files 规则
使用说明
管理员登录
– 默认密码:admin123
– 登录后请立即修改密码以确保安全
– 登录入口:网站首页右上角 ” 管理登录 ”
卡密管理
– 在后台管理界面可以添加、编辑和删除卡密商品
– 可以为每个商品添加多个卡密
– 系统会自动跟踪卡密的使用状态
订单管理
– 查看所有订单记录
– 审核待处理的订单
– 标记订单完成或拒绝
收款码管理
– 上传支付宝、微信等收款二维码
– 可以启用或禁用特定的收款码
系统设置
– 配置客服 QQ
– 设置邮件发送功能(用于发送卡密)
– 修改管理员密码
– 导出系统数据备份
注意事项
- 本系统使用 localStorage 存储数据,数据仅保存在浏览器本地
- 如果需要更强大的数据持久化能力,建议开发相应的后端 API
- 邮件发送功能默认使用模拟模式,如需真实发送请配置邮件服务器信息
- 部署到虚拟主机时,确保 PHP 版本不低于 7.4
开发说明
如需二次开发,可以使用以下命令启动开发服务器:
“bash pnpm dev “
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END





























暂无评论内容