2026全新个人发卡网 可以上传自己收款码.不需要支付接口

# 邀请码购买系统构建教程教程

## 项目概述

这是基于React的+TypeScript+Tailwind CSS的邀请码采购系统包括前台采购页面和后台管理功能，支持商品管理、订单处理、卡密发放和邮件通知。

## 环境准备

### 1. 安装Node.js

项目需要Node.建议在js环境中安装LTS版本。

– 访问 （Node.js官网)(https://nodejs.org/) 下载并安装

– 验证安装：`node -v` 和 `npm -v` 命令应显示版本号

### 2. 安装pnpm(推荐)

本项目采用pnpm作为包管理器，可通过以下方式安装：

“`bash

npm install -g pnpm

“`

验证安装：`pnpm -v`

## 项目建设步骤

### 1. 克隆项目代码

“`bash

git clone (项目仓库地址)

cd (项目目录)

“`

### 2. 安装依赖

“`bash

pnpm install

“`

### 3. 启动服务器开发

“`bash

pnpm dev

“`

将开发服务器 `http://localhost:3000` 启动

### 4. 项目结构说明

“`

├── src/ # 源代码目录

│ ├── components/ # 公共组件

│ ├── contexts/ # React上下文

│ ├── hooks/ # Hooks自定义

│ │ ├── useConfig.ts # 配置管理和业务逻辑

│ │ └── useTheme.ts # 主题切换功能

│ ├── lib/ # 工具函数

│ ├── pages/ # 页面组件

│ │ ├── AdminPage.tsx # 后台管理页面

│ │ ├── Home.tsx # 首页

│ │ └── InvitationCodePurchasePage.tsx # 购买页面的邀请码

│ ├── App.tsx # 应用入口组件

│ └── main.tsx # 程序入口文件

├── index.html # HTML模板

└── package.json # 项目配置和依赖

“`

## 核心功能描述

### 前台功能

– 展示和选择商品

– 调整购买量

– 填写联系方式

– 显示支付二维码

– 卡密查询功能

### 后台功能

– 商品管理(添加、编辑、删除商品和卡密)

– 订单管理(查看、审核、拒绝订单)

– 站点内容配置(文字、价格、收款码等)

– 邮箱服务器配置(用于自动发送卡密)

– 修改管理员密码

## 数据存储说明

该项目使用浏览器的LocalStorage存储数据，包括：

– 商品信息和卡密

– 订单数据

– 网站配置

– 管理员密码

> 注：LocalStorage仅在当前浏览器中有效，并且存储容量有限。建议在生产环境中使用后端数据库。

## 构建和部署

### 1. 制作版本

“`bash

pnpm build

“`

构建后的文件将生成 `dist/` 目录中

### 2. 部署方式

#### 静态网站部署

由于该项目是纯前端应用程序，可以部署到任何支持静态网站的托管服务：

– Vercel

– Netlify

– GitHub Pages

– 阿里云OSS

– 腾讯云COS等

#### 定制服务器部署

使用Nginx等Web服务器提供静态文件服务也可以部署到自己的服务器上：

“`nginx

server {

listen 80;

server_name your-domain.com;

root /path/to/your/project/dist;

index index.html;

location / {

try_files $uri $uri/ /index.html;

}

}

“`

## 默认登录信息

– 后台登录地址:`//admin`

– 默认密码：`admin123`(登录后可修改)

## 开发注意事项

1. Tailwinddd使用项目 CSS管理样式，请遵循相关规范

2. 组件开发，尽量将功能分为可重复使用的组件

3. 所有数据操作都通过了`useConfig` 保持数据一致性的hook

4. 如需添加新功能，建议先了解现有的代码结构和逻辑

## 解决常见问题

### 1. 页面样式混乱

– 检查Tailwinddd CSS类名是否正确

– 重试后清除浏览器缓存

### 2. 数据不保存

– 确认LocalStorage是否被禁止？

– 检查浏览器的隐私设置

### 3. 邮件发送失败

– 检查邮箱服务器配置是否正确

– 确认SMTP端口和认证信息

– 注：一些电子邮件需要打开“第三方应用程序授权”并使用授权代码而不是密码

## 技术栈

– React 18+

– TypeScript

– Tailwind CSS

– Vite

– React Router

– Sonner (toast提示)

– Recharts (图表库)