SZY自定义表单系统

SZY自定义表单系统

一个由SZY创新工作室现代化的可管理表单系统，支持多种功能，完全开源

预览可查看 https://www.szystudio.cn/join.html

开源地址：https://github.com/SZYInnovationStudio/SZYCustomFormSystem

图片预览：

Alt

功能特点

🎯 核心功能

  • 用户友好界面: 仿macOS窗口设计的现代化UI
  • 响应式设计: 完美适配桌面和移动设备
  • 实时表单验证: 客户端和服务端双重验证
  • 安全管理员面板: 密码保护的数据查看界面
  • 数据统计: 实时显示提交表单总数和今日提交数

🔐 安全特性

  • 跨域请求安全配置
  • Session-based身份验证
  • 输入数据过滤和验证
  • SQL注入防护

📊 数据管理

  • MySQL数据库存储
  • 完整的数据字段记录
  • 按时间排序的申请列表
  • IP地址记录

文件结构

1
2
3
szy-application-system/
├── index.html # 前端页面 (静态网站) 
└── main.php # 后端API (API服务器)

技术栈

前端技术

  • HTML5: 语义化结构
  • CSS3: 现代化样式，包括Flexbox和Grid布局
  • JavaScript ES6+: 原生JavaScript，无第三方依赖
  • 响应式设计: 移动端优先

后端技术

  • PHP 7.4+: 服务器端逻辑
  • MySQL 5.7+: 数据存储
  • RESTful API: 前后端分离架构
  • Session管理: 用户状态维护

快速开始

1. 环境要求

服务器要求:

  • PHP 7.4 或更高版本
  • MySQL 5.7 或更高版本
  • 支持HTTPS的Web服务器

浏览器支持:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

2. 数据库设置

创建数据库和表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CREATE DATABASE szy_studio CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

USE szy_studio;

CREATE TABLE applications (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    gender ENUM('male', 'female', 'other') NOT NULL,
    age INT NOT NULL,
    languages TEXT NOT NULL,
    project_url VARCHAR(500),
    submit_time DATETIME NOT NULL,
    ip_address VARCHAR(45) NOT NULL,
    status ENUM('pending', 'reviewed', 'accepted', 'rejected') DEFAULT 'pending'
);

3. 配置文件修改

编辑 main.php 中的数据库配置：

1
2
3
4
5
6
7
8
9
10
11
// 数据库配置
$host = 'localhost';        // 数据库主机
$dbname = 'szy_studio';     // 数据库名
$username = 'your_username'; // 数据库用户名
$password = 'your_password'; // 数据库密码

// 管理员账户配置
$admin_config = [
    'username' => 'SZY',           // 管理员用户名
    'password' => 'Szy.20130914'   // 管理员密码
];

4. 部署步骤

前端部署 (静态网站):

  1. 将 index.html 上传到您的静态网站服务器

  2. 确保可以通过您的链接访问

后端部署 (API服务器):

  1. 将 main.php 上传到您的PHP服务器

  2. 配置正确的数据库连接信息

  3. 确保可以通过您的后端连接访问

跨域配置:

  • 确保前端域名和后端API域名正确配置

  • 在 main.php 中修改 Access-Control-Allow-Origin 头

自定义指南

修改样式主题

编辑CSS变量来改变颜色主题：

1
2
3
4
5
6
7
8
:root {
    --primary-color: #0071e3;      /* 主色调 */
    --success-color: #28ca42;      /* 成功颜色 */
    --danger-color: #ff5f57;       /* 危险颜色 */
    --warning-color: #ffbd2e;      /* 警告颜色 */
    --text-primary: #1d1d1f;       /* 主要文字颜色 */
    --text-secondary: #86868b;     /* 次要文字颜色 */
}

添加新的表单字段

前端修改 (index.html):

  1. 在表单中添加新的HTML字段

  2. 更新JavaScript中的表单数据处理

后端修改 (main.php):

  1. 在 handleApplicationSubmission 函数中添加字段验证

  2. 更新数据库插入语句

  3. 修改数据库表结构

示例 - 添加电话号码字段:

前端:

1
2
3
4
<div class="form-group">
    <label for="phone">电话号码</label>
    <input type="tel" id="phone" name="phone" required>
</div>

后端:

1
2
3
4
// 在handleApplicationSubmission函数中添加
$phone = trim($data['phone'] ?? '');

// 验证和插入数据库时包含新字段

修改验证规则

年龄范围验证:

1
2
3
4
5
// 在handleApplicationSubmission函数中修改
if ($age < 10 || $age > 30) {
    echo json_encode(['success' => false, 'message' => '年龄必须在10-30岁之间']);
    return;
}

必填字段验证:

1
2
3
4
if (empty($name) || empty($gender) || empty($languages)) {
    echo json_encode(['success' => false, 'message' => '请填写所有必填字段']);
    return;
}

自定义管理员账户

修改 main.php 中的管理员配置：

1
2
3
4
$admin_config = [
    'username' => '你的用户名',     // 修改用户名
    'password' => '你的密码'        // 修改密码
];

API接口文档

提交申请

  • URL: POST /main.php

  • 参数:

1
2
3
4
5
6
7
{
  "name": "姓名",
  "gender": "male|female|other",
  "age": 年龄,
  "languages": "编程语言",
  "projectUrl": "项目地址"
}
  • 响应:
1
2
3
4
{
  "success": true,
  "message": "申请提交成功！"
}

管理员登录

  • URL: POST /main.php

  • 参数:

1
2
3
4
5
{
  "action": "admin_login",
  "username": "管理员用户名",
  "password": "管理员密码"
}
  • 响应:
1
2
3
4
{
  "success": true,
  "message": "登录成功"
}

获取申请列表

  • URL: POST /main.php

  • 参数:

1
2
3
{
  "action": "get_applications"
}
  • 响应:
1
2
3
4
{
  "success": true,
  "data": [...]
}

故障排除

常见问题

  1. 跨域请求失败

    • 检查 Access-Control-Allow-Origin 头设置

    • 确保前端和后端域名配置正确

  2. 数据库连接失败

    • 验证数据库配置信息

    • 检查MySQL服务是否运行

    • 确认数据库用户权限

  3. Session不保持

    • 检查跨域Cookie设置

    • 验证SSL证书配置

    • 检查浏览器Cookie设置

  4. 表单提交失败

    • 检查网络连接

    • 查看浏览器控制台错误信息

    • 验证API端点可访问性

调试模式

启用调试日志：

1
2
3
// 在main.php开头添加
error_reporting(E_ALL);
ini_set('display_errors', 1);

安全建议

  • 定期更改管理员密码

  • 使用强密码保护数据库

  • 启用HTTPS加密

  • 定期备份数据库

  • 监控服务器日志

  • 限制API访问频率

如果您有任何问题或发现bug，请联系QQ1774297708