AIU人工智能协会官方网站是一个集协会展示、招新报名、录取查询、AI答疑等功能于一体的综合性Web应用。网站采用现代化的设计理念，支持深色模式自适应，移动端友好，为学生提供便捷的协会信息获取和报名体验。
- 潜在成员：想要了解或加入协会的学生
- 协会成员：想要了解项目和协会动态的内部成员
- 管理员：需要管理报名信息和录取结果的协会管理人员
| 功能模块 | 描述 |
|---|---|
| 🎨 协会介绍 | 展示协会基本信息、发展历程、愿景使命 |
| 👥 部门展示 | 介绍创智部、外联部、宣传部、运营部等四大部门 |
| 🚀 项目展示 | 采用Markdown渲染，展示协会项目和技术文档 |
| 💬 AI答疑 | 集成Dify Agent，提供智能问答服务 |
| 📝 在线报名 | 支持多部门志愿选择、头像上传、表单验证 |
| 🔍 录取查询 | 基于手机号或姓名查询报名状态和录取结果 |
| 👤 用户系统 | 本地会话管理，账户状态显示 |
| 🎯 管理后台 | 报名数据管理、状态更新、批量操作 |
- ✅ 响应式设计：完美适配桌面端和移动端
- 🌓 深色模式：自动适配系统主题偏好
- 🎭 玻璃拟态：现代化的毛玻璃UI效果
- 🎪 动画交互：流畅的过渡动画和悬停效果
- 📱 抽屉侧栏：移动端优化的侧边栏体验
├── HTML5 # 页面结构
├── CSS3 # 样式设计（支持CSS变量、Flexbox、动画）
├── JavaScript ES6 # 交互逻辑、路由管理
└── 第三方库
├── markdown-it # Markdown解析
├── highlight.js # 代码高亮
├── DOMPurify # XSS防护
└── github-markdown-css # Markdown样式
├── PHP 7.4+ # 服务端逻辑
├── MySQL/MariaDB # 数据持久化
├── PDO # 数据库抽象层
└── Python 3.x # Dify API集成
├── Node.js # 开发环境
├── npm/serve # 开发服务器
└── 宝塔面板 # 生产环境部署
确保你的开发环境已安装：
- Node.js >= 14.x
- PHP >= 7.4
- MySQL/MariaDB >= 5.7
- Git
1️⃣ 克隆项目
git clone <repository-url>
cd AIU网站2️⃣ 安装依赖
npm install3️⃣ 配置数据库
编辑 API/config.php，配置你的数据库连接信息：
$DB_HOST = 'localhost';
$DB_PORT = '3306';
$DB_USER = 'your_username';
$DB_PASS = 'your_password';
$DB_NAME = 'aiu';4️⃣ 启动开发服务器
终端1 - 启动前端服务：
npm start终端2 - 启动PHP服务：
php -S 127.0.0.1:5173 -t .5️⃣ 访问网站
打开浏览器访问：http://localhost:5173
AIU网站/
├── index.html # 主入口页面（单页应用）
├── index.php # PHP入口文件
├── package.json # Node.js依赖配置
├── README.md # 项目说明文档
│
├── API/ # 后端API接口
│ ├── config.php # 数据库配置和工具函数
│ ├── signup.php # 报名接口
│ ├── status.php # 录取查询接口
│ ├── list_signups.php # 报名列表（管理员）
│ ├── delete_signup.php # 删除报名
│ ├── decide.php # 录取决策
│ ├── upload.php # 头像上传
│ ├── ping.php # 健康检查
│ └── db_test.php # 数据库连接测试
│
├── html/ # 前端页面
│ ├── about.html # 协会介绍
│ ├── 手风琴菜单.html # 部门展示
│ ├── md-viewer.html # Markdown文档查看器
│ ├── chat.html # AI聊天界面
│ ├── send.html # 报名表单
│ ├── query.html # 录取查询
│ ├── user.html # 用户中心
│ ├── 管理员界面.html # 管理后台
│ └── 404.html # 错误页面
│
├── css/ # 样式文件
│ ├── back.css # 通用样式
│ └── loding.css # 加载动画
│
├── docs/ # 文档和内容
│ ├── docs.json # 文档索引配置
│ ├── list.php # 文档列表API
│ └── *.md # Markdown文档
│
├── photo/ # 图片资源
│ ├── AIU会标.png
│ ├── 创智部logo.webp
│ ├── 外联部logo.png
│ ├── 宣传部logo.webp
│ ├── 运营部logo.webp
│ └── 素材/ # UI图标素材
│
├── scripts/ # 工具脚本
│ └── gen-docs-json.js # 文档索引生成器
│
├── 报名页/ # Firebase报名系统（备用）
│ ├── 导航页面.html
│ ├── 报名页面.html
│ ├── 数据查询页面.html
│ └── Firebase设置说明.md
│
└── node_modules/ # Node.js依赖包（自动生成）
| 接口 | 方法 | 描述 | 参数 |
|---|---|---|---|
/API/signup.php |
POST | 提交报名信息 | 见报名字段 |
/API/status.php |
POST | 查询录取状态 | mobile 或 name |
/API/list_signups.php |
GET | 获取报名列表 | 无 |
/API/delete_signup.php |
POST | 删除报名记录 | id |
/API/decide.php |
POST | 更新录取决策 | mobile, status, department |
/API/upload.php |
POST | 上传头像 | file |
/API/ping.php |
GET | 健康检查 | 无 |
{
"name": "姓名",
"mobile": "手机号",
"wechat": "微信号",
"birth": "生日",
"gender": "性别",
"political": "政治面貌",
"college": "学院",
"grade": "年级",
"majorClass": "专业班级",
"firstChoice": "第一志愿",
"secondChoice": "第二志愿",
"adjustable": "是否服从调剂",
"intro": "自我介绍",
"other": "其他",
"avatarUrl": "头像URL"
}pending- 待审核interview- 待面试admitted- 已录取rejected- 未录取
- 系统：Ubuntu 20.04+ / CentOS 7+
- 配置：1核2G内存起（学生机即可）
- 网络：需要公网IP
- 端口：80/443（HTTP/HTTPS）
# Ubuntu/Debian
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
# CentOS
yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh- 安装 LNMP 环境（Linux + Nginx + MySQL + PHP）
- 设置 PHP 版本为 7.4 或以上
- 开启 PHP 扩展：
pdo_mysql,mbstring,json - 配置 MySQL 数据库
- 通过宝塔文件管理器上传项目文件
- 或使用 Git 克隆到服务器
- 在阿里云/腾讯云购买域名
- 添加 DNS 解析记录，指向服务器IP
- 在宝塔中添加站点，绑定域名
- 申请免费 SSL 证书（Let's Encrypt）
访问 http://你的域名/API/db_test.php，数据库表会自动创建。
# 修改数据库配置使用环境变量
export DB_HOST="localhost"
export DB_USER="aiu_user"
export DB_PASS="复杂密码"
export DB_NAME="aiu"- 在
docs/目录下创建.md文件 - 运行文档索引生成器：
npm run docs:gen
- 在
md-viewer.html中即可看到新文档
网站使用 CSS 变量实现主题切换，修改 :root 和 @media (prefers-color-scheme: dark) 中的变量即可：
:root {
--bg: #e4e9f5; /* 背景色 */
--sidebar-bg: #fff; /* 侧栏背景 */
--text: #333; /* 文字颜色 */
--icon: #6e5af0; /* 图标颜色 */
--active-ring: #6e5af0; /* 激活环颜色 */
/* ... 更多变量 */
}- 注册 Dify 账号（有教育优惠）
- 创建 Agent 并获取 API Key
- 在
chat.html中配置 API Key：const DIFY_API_KEY = 'your-api-key'; const DIFY_API_URL = 'https://api.dify.ai/v1/chat-messages';
python dify_chat.py用于验证 Dify API 连接是否正常。
网站已针对移动端进行优化：
- 断点：
640px - 移动端使用抽屉式侧栏
- 触摸友好的按钮尺寸
- 100svh 视口高度适配
欢迎协会成员贡献代码！
- Fork 本仓库
- 创建特性分支：
git checkout -b feature/AmazingFeature - 提交更改：
git commit -m 'Add some AmazingFeature' - 推送到分支：
git push origin feature/AmazingFeature - 提交 Pull Request
- HTML：使用语义化标签，保持良好缩进
- CSS：使用 CSS 变量，避免内联样式
- JavaScript：使用 ES6+ 语法，注意浏览器兼容性
- PHP：遵循 PSR 标准，使用预编译语句防止SQL注入
⚠️ 生产环境务必修改数据库密码⚠️ 不要将config.php中的敏感信息提交到公开仓库⚠️ 使用 HTTPS 保护数据传输⚠️ 定期备份数据库⚠️ 限制管理员接口的访问权限
- 启用 Gzip 压缩
- 使用 CDN 加速静态资源
- 开启浏览器缓存
- 优化图片大小（使用 WebP 格式）
本项目仅供华南农业大学人工智能协会内部使用。
- 官方网站：即本项目
- 公众号：见
photo/公众号二维码.jpg - 协会邮箱：无
- 第六届AIU创智部部长 陈林峰
感谢以下开源项目：
Made with ❤️ by AIU Tech Team
© 2025 华南农业大学人工智能协会