# 新问卷

**Repository Path**: elitdr/xwj

## Basic Information

- **Project Name**: 新问卷
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-20
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 新问卷-客户端

## 项目概述

这是一个名为"新问卷"(xwj-client)的问卷调查系统前端应用，使用 Next.js 框架构建，主要功能包括展示问卷、收集用户答案并提交到后端。

## 技术栈

- 框架: Next.js v13.4.10
- 语言: TypeScript + JavaScript
- 样式: Sass + CSS Modules
- 核心库: React v18.2.0
- 构建工具: npm/yarn/pnpm

## 项目架构

### 主要目录结构

1. src/app/ - 应用的主页和全局样式
2. src/components/ - 可复用的 UI 组件

   - QuestionComponents/ - 问卷相关的组件（标题、段落、输入框、单选、多选等）

3. src/pages/ - 页面路由

   - question/ - 问卷展示页面，支持动态路由 [questionId]
   - api/ - API 路由，处理答案提交

4. src/services/ - 数据服务层，封装了 AJAX 请求

### 核心功能流程

问卷展示:

用户访问 /question/[questionId] 页面
服务端获取问卷数据（通过 getServerSideProps）
根据问卷中的组件列表渲染对应组件
组件系统:

问卷由多个组件构成，如标题、段落、输入框、单选、多选等
通过 QuestionComponents/index.tsx 中的 getComponent 函数动态渲染组件
答案提交:

用户填写问卷后点击提交
表单通过 POST 请求发送到 /api/answer
src/pages/api/answer.ts 处理请求，整理答案数据并转发给后端
根据提交结果重定向到成功或失败页面

### 数据流

用户访问问卷 -> 获取问卷数据 -> 渲染问卷组件 -> 用户填写 -> 提交答案 -> 后端处理 -> 显示结果
后端 API 地址配置在 ajax.ts 文件中。

## 组件系统

问卷系统支持多种组件类型：

QuestionTitle - 标题组件
QuestionParagraph - 段落组件
QuestionInput - 单行输入框
QuestionTextarea - 多行输入框
QuestionRadio - 单选框
QuestionCheckbox - 多选框
这种设计使得问卷具有很好的扩展性，可以轻松添加新的问题类型。