# directus-survey-system

**Repository Path**: sunlli/directus-survey-system

## Basic Information

- **Project Name**: directus-survey-system
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-11
- **Last Updated**: 2025-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 问卷调查系统

一个基于 Directus 的现代化问卷调查系统，采用前后端分离架构，支持创建、编辑、填写问卷，并支持单选、多选和文本输入等多种题型。

> 📖 **详细项目介绍**：查看 [PROJECT_INTRODUCTION.md](./PROJECT_INTRODUCTION.md) 了解完整的技术栈、实现思路和注意事项。  
> 🚀 **部署指南**：查看 [DEPLOYMENT_GUIDE.md](./DEPLOYMENT_GUIDE.md) 了解如何部署到生产环境。  
> 🌐 **部署后访问**：查看 [HOW_TO_ACCESS.md](./HOW_TO_ACCESS.md) 了解部署后如何访问应用。

## 功能特性

- ✅ 与 Directus 集成，使用 Directus 作为数据后端
- ✅ 问卷的增删改查（CRUD）
- ✅ 问题的增删改查
- ✅ 支持多种题型：文本输入、单选、多选
- ✅ 问卷填写和提交功能
- ✅ 现代化的 React 前端界面
- ✅ RESTful API 后端

## 技术栈

- **前端**: React + Vite
- **后端**: Node.js + Express
- **数据库**: Directus
- **SDK**: @directus/sdk

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 配置 Directus

1. 确保 Directus 服务正在运行（默认端口 8055）
2. 按照 [DIRECTUS_SETUP.md](./DIRECTUS_SETUP.md) 文档配置 Directus 集合
3. 获取 Directus API Token

### 3. 配置环境变量

复制 `.env.example` 为 `.env` 并填写配置：

```bash
cp .env.example .env
```

编辑 `.env` 文件：

```env
DIRECTUS_URL=http://localhost:8055
DIRECTUS_TOKEN=your-directus-token-here
PORT=3000
NODE_ENV=development
```

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

```bash
npm run dev
```

这将同时启动：
- 后端服务器：http://localhost:3000
- 前端开发服务器：http://localhost:5173

### 5. 访问应用

打开浏览器访问：http://localhost:5173

## 项目结构

```
.
├── server/                 # 后端代码
│   ├── config/            # 配置文件
│   │   └── directus.js   # Directus 客户端配置
│   ├── routes/            # API 路由
│   │   ├── surveys.js    # 问卷路由
│   │   ├── questions.js  # 问题路由
│   │   └── responses.js  # 回答路由
│   └── index.js          # 服务器入口
├── src/                   # 前端代码
│   ├── components/        # React 组件
│   │   ├── SurveyList.jsx    # 问卷列表
│   │   ├── SurveyForm.jsx    # 问卷表单（创建/编辑）
│   │   └── SurveyFill.jsx   # 问卷填写
│   ├── services/          # API 服务
│   │   └── api.js        # API 调用封装
│   ├── App.jsx           # 主应用组件
│   ├── main.jsx          # 入口文件
│   └── index.css         # 全局样式
├── package.json          # 项目配置
├── vite.config.js        # Vite 配置
└── README.md            # 项目说明
```

## API 接口

### 问卷接口

- `GET /api/surveys` - 获取所有问卷
- `GET /api/surveys/:id` - 获取单个问卷
- `POST /api/surveys` - 创建问卷
- `PUT /api/surveys/:id` - 更新问卷
- `DELETE /api/surveys/:id` - 删除问卷

### 问题接口

- `GET /api/questions/survey/:surveyId` - 获取问卷的所有问题
- `GET /api/questions/:id` - 获取单个问题
- `POST /api/questions` - 创建问题
- `PUT /api/questions/:id` - 更新问题
- `DELETE /api/questions/:id` - 删除问题

### 回答接口

- `GET /api/responses/survey/:surveyId` - 获取问卷的所有回答
- `GET /api/responses/:id` - 获取单个回答
- `POST /api/responses` - 提交问卷回答
- `DELETE /api/responses/:id` - 删除回答

## 使用说明

### 创建问卷

1. 点击"创建问卷"按钮
2. 填写问卷标题和描述
3. 添加问题：
   - 点击"添加问题"
   - 输入问题内容
   - 选择问题类型（文本输入/单选/多选）
   - 如果是单选或多选，添加选项
   - 设置是否必填
4. 点击"保存问卷"

### 填写问卷

1. 在问卷列表中点击"填写问卷"
2. 回答所有必填问题
3. 点击"提交问卷"

### 编辑问卷

1. 在问卷列表中点击"编辑"
2. 修改问卷信息或问题
3. 点击"保存问卷"

### 删除问卷

1. 在问卷列表中点击"删除"
2. 确认删除操作

## 问题类型

### 文本输入 (text)
- 用户可以直接输入文本答案
- 适用于开放性问题

### 单选 (radio)
- 用户只能选择一个选项
- 需要配置选项列表

### 多选 (checkbox)
- 用户可以选择多个选项
- 需要配置选项列表

## 开发命令

```bash
# 同时启动前后端开发服务器
npm run dev

# 仅启动后端服务器
npm run dev:server

# 仅启动前端开发服务器
npm run dev:client

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 启动生产服务器
npm start
```

## 注意事项

1. 确保 Directus 服务正常运行
2. 确保 API Token 有足够的权限
3. 按照 DIRECTUS_SETUP.md 正确配置 Directus 集合
4. 开发环境使用 concurrently 同时运行前后端

## 许可证

MIT