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. 请妥善保管管理员账号和密码，避免未授权访问。


下载地址：https://pan.quark.cn/s/9d0c1b101da5