2026随心个人发卡网.用上传自己收款码.不需要支付接口.自动发卡密

# 发卡平台系统安装搭建指南 ## 环境准备 在安装本系统之前，请确保您的服务器或本地环境已经安装了以下软件： 1. **Node.js** (v16.0.0或更高版本) – 可以通过 [Node.js官网](https://nodejs.org/) 下载安装 – 安装完成后，可以通过以下命令验证安装是否成功： “`bash node -v “` 2. **pnpm** 包管理器 – 可以通过以下命令安装： “`bash npm install -g pnpm “` – 安装完成后，可以通过以下命令验证安装是否成功： “`bash pnpm -v “` ## 安装步骤 ### 1. 克隆项目代码 首先，将项目代码克隆到您的本地或服务器上： “`bash git clone [项目仓库地址] cd [项目目录名] “` ### 2. 安装项目依赖 进入项目目录后，执行以下命令安装项目依赖： “`bash pnpm install “` 这个过程可能需要一些时间，具体取决于您的网络速度。 ### 3. 配置项目 本项目使用本地存储(localStorage)来保存数据，不需要额外的数据库配置。系统默认已经配置了基本的商品分类、公告内容等初始数据。 ## 开发环境运行 如果您需要在本地进行开发或调试，可以使用以下命令启动开发服务器： “`bash pnpm dev “` 开发服务器启动后，您可以通过浏览器访问 `http://localhost:3000` 来查看项目运行效果。 开发模式下，代码修改后会自动热重载，方便您进行开发和调试。 ## 生产环境构建 当您完成开发或准备部署到生产环境时，可以执行以下命令构建生产版本： “`bash pnpm build “` 构建完成后，项目会在 `dist/static` 目录下生成优化后的静态文件，可以直接部署到Web服务器上。 ## 部署指南 ### Nginx部署示例 以下是使用Nginx部署本项目的简单配置示例： 1. 将构建后的 `dist/static` 目录下的所有文件复制到Nginx的Web根目录（如 `/usr/share/nginx/html`） 2. 编辑Nginx配置文件（如 `/etc/nginx/conf.d/default.conf`），添加以下配置： “`nginx server { listen 80; server_name your_domain.com; # 替换为您的域名或IP地址 root /usr/share/nginx/html; # 静态文件所在目录 index index.html; location / { try_files $uri $uri/ /index.html; # 处理单页应用路由 } # 可选：添加gzip压缩 gzip on; gzip_types text/plain text/css application/javascript application/json; } “` 3. 重启Nginx服务： “`bash nginx -s reload “` 现在，您应该可以通过浏览器访问您的域名或IP地址来使用系统了。 ## 项目结构说明 项目的主要结构如下： “` ├── src/ # 源代码目录 │ ├── components/ # 公共组件 │ ├── contexts/ # React Context，用于状态管理 │ ├── hooks/ # 自定义React Hooks │ ├── lib/ # 工具函数 │ ├── pages/ # 页面组件 │ │ ├── Home.tsx # 首页 │ │ ├── SelfOrderingPage.tsx # 自助下单页面 │ │ └── AdminPage.tsx # 后台管理页面 │ ├── App.tsx # 应用入口组件 │ ├── index.css # 全局样式 │ └── main.tsx # 程序入口文件 ├── index.html # HTML模板文件 ├── package.json # 项目依赖和脚本配置 ├── tailwind.config.js # Tailwind CSS配置 └── vite.config.ts # Vite配置 “` ## 主要功能 1. **前台功能**： – 商品浏览和搜索 – 自助下单 – 订单查询和卡密获取 – 滚动公告展示 2. **后台管理**： – 商品分类和商品管理 – 订单管理和卡密分配 – 前台内容配置（标题、按钮文字、收款码等） – 邮箱配置（用于发送卡密邮件） – 管理员账号安全设置 ## 管理员登录 系统默认的管理员账号信息： – 用户名：admin – 密码：admin123 首次登录后，建议立即修改管理员账号和密码以保证系统安全。 ## 常见问题解决 1. **依赖安装失败**： – 检查网络连接 – 确保pnpm版本正确 – 尝试删除 `node_modules` 目录和 `pnpm-lock.yaml` 文件后重新安装 2. **构建失败**： – 检查是否有语法错误 – 确保所有依赖都已正确安装 3. **部署后页面刷新404**： – 确保Nginx配置中包含了单页应用路由处理（try_files配置） – 其他Web服务器请参考相应的单页应用部署指南 ## 注意事项 1. 本系统使用localStorage存储数据，数据仅保存在浏览器本地。如果需要更可靠的数据存储方案，建议对接后端数据库。 2. 邮箱发送功能目前为模拟实现，实际使用时需要配置正确的SMTP服务器信息。 3. 收款码上传后仅保存在浏览器本地，刷新页面后不会丢失，但如果清除浏览器缓存，数据将会丢失。 4. 请妥善保管管理员账号和密码，避免未授权访问。