Skip to content

Letmeouted/qrcodePlatform

BranchesTags

Repository files navigation

二维码生成管理平台

一个类似草料二维码的全功能二维码生成和管理平台，支持多种二维码类型、深度美化、表单收集、数据统计等功能。

功能特性

二维码生成

  • 多类型支持：文本、网址、文件、电子名片、WiFi、地图导航、联系方式、表单收集
  • 深度美化：自定义颜色、边框样式、阴影效果、码眼样式、Logo嵌入
  • 实时预览：所见即所得的编辑体验

表单收集

  • 可视化表单构建器：拖拽式创建表单，支持9种字段类型
    • 单行文本、多行文本、数字
    • 单选、多选、日期
    • 地理位置、文件上传、手写签名
  • 无需登录填写：扫码即可填写表单，降低使用门槛
  • 数据去重：支持相同内容去重，避免重复提交

码管理

  • 列表管理：查看所有二维码，支持搜索和筛选
  • 在线编辑：随时更新二维码内容
  • 状态控制：启用/禁用二维码

数据统计

  • 扫码统计：总扫码次数、今日扫码、本周扫码
  • 趋势分析：扫码趋势图表
  • 设备分布：扫码设备类型占比
  • 地域分布：扫码用户地域分析

其他功能

  • 批量生码：Excel导入批量生成二维码
  • 打印排版：多种纸张排版，支持PDF导出

技术栈

前端

  • 框架：React 18 + TypeScript
  • 构建工具：Vite
  • 样式：TailwindCSS + shadcn/ui
  • 状态管理：React Context
  • 图表：Recharts
  • 二维码：qrcode 库

后端

  • 框架：Express.js
  • 数据库：MySQL
  • 认证：JWT
  • 运行时：Node.js

目录结构

my-first-react-app/
├── src/                    # 前端源码
│   ├── components/         # 组件
│   │   ├── common/         # 公共组件
│   │   ├── layout/         # 布局组件
│   │   ├── qr/             # 二维码相关组件
│   │   └── ui/             # UI基础组件 (shadcn/ui)
│   ├── contexts/           # React Context
│   ├── hooks/              # 自定义 Hooks
│   ├── pages/              # 页面组件
│   ├── services/           # API 服务
│   ├── types/              # TypeScript 类型定义
│   ├── App.tsx             # 应用入口
│   ├── routes.tsx          # 路由配置
│   └── main.tsx            # 渲染入口
│
├── server/                 # 后端源码
│   ├── src/
│   │   ├── routes/         # API 路由
│   │   │   ├── auth.ts     # 认证接口
│   │   │   ├── qrcodes.ts  # 二维码接口
│   │   │   ├── templates.ts # 表单模板接口
│   │   │   ├── submissions.ts # 表单提交接口
│   │   │   └── stats.ts    # 统计接口
│   │   ├── db/             # 数据库配置
│   │   │   ├── mysql.ts    # MySQL 连接
│   │   │   └── schema.sql  # 数据库结构
│   │   └── index.ts        # 服务入口
│   ├── .env                # 后端环境配置
│   └── package.json
│
├── .env                    # 前端环境配置
├── package.json
├── vite.config.ts
└── README.md

安装部署

环境要求

Node.js ≥ 18
npm ≥ 9
MySQL ≥ 5.7

1. 克隆项目

git clone <项目地址>
cd my-first-react-app

2. 安装依赖

# 安装前端依赖
npm install

# 安装后端依赖
cd server
npm install
cd ..

3. 配置数据库

# 创建数据库并导入结构
mysql -u root -p < server/src/db/schema.sql

4. 配置环境变量

前端 .env 文件：

# 应用 ID
VITE_APP_ID=app-b3v924974utd

# API 服务地址（本地开发）
VITE_API_URL=http://localhost:3001/api

# 公开访问地址（扫码后跳转，手机需能访问）
# 本地开发：改为你的局域网 IP
# 生产环境：改为你的域名
VITE_PUBLIC_URL=http://192.168.1.100:5173

# 公开 API 地址（手机扫码后访问的后端）
VITE_PUBLIC_API_URL=http://192.168.1.100:3001/api

后端 server/.env 文件：

# MySQL 配置
MYSQL_HOST=localhost
MYSQL_PORT=3306
MYSQL_USER=root
MYSQL_PASSWORD=你的密码
MYSQL_DATABASE=qr_platform

# JWT 密钥（生产环境请更换为随机字符串）
JWT_SECRET=your-secret-key-change-in-production

# 服务器端口
PORT=3001

# CORS 配置（前端地址）
CORS_ORIGIN=http://192.168.1.100:5173

5. 启动服务

# 启动后端服务（在 server 目录）
cd server
npm run dev

# 启动前端服务（在根目录）
cd ..
npm run dev

访问 http://localhost:5173 即可使用。

6. 局域网访问（手机扫码）

要让手机能扫码访问，需要：

  1. 获取局域网 IP：

    # Windows
ipconfig
# 找到 IPv4 地址，如：192.168.20.7

  2. 更新 .env 配置：将 192.168.1.100 改为你的实际 IP

  3. 重启前后端服务

  4. 确保手机和电脑在同一局域网

使用指南

创建二维码

  1. 点击左侧菜单「创建二维码」
  2. 选择内容类型（文本、网址、表单等）
  3. 输入二维码名称和内容
  4. 自定义样式（颜色、边框、阴影）
  5. 点击「保存」或「下载」

创建表单收集码

  1. 先创建表单模板：

    • 点击左侧菜单「表单模板」
    • 点击「创建模板」
    • 添加字段（文本、单选、签名等）
    • 保存模板

  2. 创建表单二维码：

    • 点击「创建二维码」→ 选择「表单收集」
    • 选择已创建的模板
    • 保存二维码

  3. 扫码填写：

    • 手机扫描二维码
    • 自动跳转到表单填写页面
    • 填写完成后提交

管理二维码

  • 在「码管理」页面查看所有二维码
  • 支持搜索、筛选、编辑、删除
  • 点击「查看详情」可编辑内容

查看统计数据

  • 在「数据统计」页面查看扫码分析
  • 包括扫码趋势、设备分布、地域分布

API 接口

认证接口

接口 方法 说明
/api/auth/register POST 用户注册
/api/auth/login POST 用户登录
/api/auth/me GET 获取当前用户信息

二维码接口

接口 方法 说明
/api/qrcodes GET 获取二维码列表
/api/qrcodes/:id GET 获取单个二维码详情
/api/qrcodes POST 创建二维码
/api/qrcodes/:id PUT 更新二维码
/api/qrcodes/:id DELETE 删除二维码

表单模板接口

接口 方法 说明
/api/templates GET 获取模板列表
/api/templates/:id GET 获取模板详情（需登录）
/api/templates/public/:id GET 公开获取模板（无需登录）
/api/templates POST 创建模板
/api/templates/:id PUT 更新模板
/api/templates/:id DELETE 删除模板

表单提交接口

接口 方法 说明
/api/submissions POST 提交表单（公开）
/api/submissions/template/:id GET 获取模板提交记录

统计接口

接口 方法 说明
/api/stats/overview GET 统计概览
/api/stats/trend GET 扫码趋势
/api/stats/devices GET 设备分布
/api/stats/locations GET 地域分布

页面路由

路径 页面 说明
/ HomePage 首页仪表盘
/login LoginPage 登录/注册页面
/create CreateQRPage 创建二维码
/create/:type CreateQRPage 创建特定类型二维码
/manage ManagePage 码管理列表
/templates FormTemplatesPage 表单模板列表
/templates/create FormBuilderPage 创建表单模板
/templates/:id/edit FormBuilderPage 编辑表单模板
/fill/:templateId FormFillPage 表单填写（公开）
/batch BatchCreatePage 批量生码
/stats StatsPage 数据统计
/print PrintPage 打印排版

生产部署

前端构建

npm run build

构建产物在 dist/ 目录，可部署到任意静态服务器。

后端部署

cd server
npm run build
npm start

建议使用 PM2 管理 Node.js 进程：

pm2 start server/dist/index.js --name qr-platform

环境变量调整

生产环境需要修改 .env：

# 生产环境配置示例
VITE_API_URL=https://your-domain.com/api
VITE_PUBLIC_URL=https://your-domain.com
VITE_PUBLIC_API_URL=https://your-domain.com/api

后端 server/.env：

MYSQL_HOST=生产数据库地址
JWT_SECRET=强随机字符串
CORS_ORIGIN=https://your-domain.com

常见问题

Q: 手机扫码后无法访问？

确保：

  1. 手机和电脑在同一局域网
  2. .env 中的 IP 地址正确
  3. 后端服务已启动且监听 0.0.0.0
  4. Windows防火墙允许端口访问

Q: 数据库连接失败？

确保：

  1. MySQL 服务已启动
  2. 数据库 qr_platform 已创建
  3. schema.sql 已导入
  4. .env 中的数据库配置正确

Q: 登录后提示未登录？

检查：

  1. 后端服务是否正常运行
  2. JWT_SECRET 配置是否一致
  3. 浏览器是否阻止了 localStorage

许可证

MIT License

联系方式

如有问题或建议，请提交 Issue。

About

一个类似草料二维码的全功能二维码生成和管理平台，支持多种二维码类型、深度美化、表单收集、数据统计等功能

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages