嘿，我刚搞定了一个带HTTP交互的Dynamic Forms扩展实现，核心是从MongoDB拉取问题来动态构建表单，提交时把用户答案存回数据库，还加了个实用的小功能——如果用户之前答过这些问题，打开表单时会自动把已填内容加载出来，跟原教程的基础逻辑保持一致，下面给你拆解下具体怎么做的：

一、核心功能梳理 #

• 从MongoDB数据库动态拉取表单问题，不用硬编码在前端
• 提交表单时，把用户的答案保存到对应MongoDB的用户条目里
• 新增已答问题自动回填：加载表单前检查用户历史答案，有对应内容就自动填充到输入框

二、关键实现细节 #

1. 从数据库拉取表单问题 #

前端通过HTTP请求调用后端接口，后端从form_questions集合里取出所有问题数据，返回的结构要适配原表单组件的构造参数（比如每个问题要带key、label、type这些字段）。

前端请求的示例代码：

async function getFormQuestions() {
  try {
    const res = await fetch('/api/form/questions');
    const rawQuestions = await res.json();
    // 根据问题类型实例化对应的表单组件
    return rawQuestions.map(question => {
      switch(question.type) {
        case 'textbox':
          return new TextboxQuestion(question);
        case 'dropdown':
          return new DropdownQuestion(question);
        // 其他类型（比如单选、多选）同理扩展
        default:
          throw new Error(`不支持的问题类型：${question.type}`);
      }
    });
  } catch (err) {
    console.error('拉取表单问题失败：', err);
    return [];
  }
}

2. 已答问题的回填逻辑 #

这部分是新增的核心——在构建表单组件之前，先拉取当前用户的历史答案，然后把对应问题的答案传给组件构造函数，实现默认填充。

示例代码：

async function buildUserSpecificForm() {
  // 先拉取当前用户的已答数据
  const userAnswers = await fetch('/api/user/answers').then(res => res.json());
  // 拉取基础表单问题
  const rawQuestions = await fetch('/api/form/questions').then(res => res.json());
  
  return rawQuestions.map(question => {
    // 匹配当前问题对应的用户答案
    const matchedAnswer = userAnswers.find(ans => ans.questionKey === question.key);
    // 组装组件配置：如果有已答内容，就加上value和id
    const questionConfig = {
      ...question,
      ...(matchedAnswer ? { value: matchedAnswer.value, id: matchedAnswer._id } : {})
    };
    
    // 实例化对应组件
    switch(question.type) {
      case 'textbox':
        return new TextboxQuestion(questionConfig);
      case 'dropdown':
        return new DropdownQuestion(questionConfig);
      default:
        throw new Error(`不支持的问题类型：${question.type}`);
    }
  });
}

3. 提交表单保存答案 #

用户提交表单时，把所有输入的答案整理成结构化数据，通过POST请求传给后端，后端负责把答案更新或插入到user_answers集合里。

前端提交的示例代码：

async function submitUserAnswers(formValues) {
  try {
    // 整理答案格式，关联问题key和用户输入
    const answers = Object.entries(formValues).map(([key, value]) => ({
      userId: currentLoggedInUserId, // 当前登录用户的ID
      questionKey: key,
      value
    }));
    
    await fetch('/api/user/answers', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ answers })
    });
    
    alert('答案保存成功！');
  } catch (err) {
    console.error('保存答案失败：', err);
    alert('保存失败，请稍后重试');
  }
}

4. 表单组件构造函数示例（以TextboxQuestion为例） #

这里要调整构造函数，支持接收value和id参数，用来实现回填和后续更新：

class TextboxQuestion extends QuestionBase {
  constructor(options) {
    super(options);
    // 如果有传入已答内容，就用这个值初始化，否则为空
    this.value = options.value || '';
    // 存储答案的ID，后续更新时用到
    this.id = options.id || null;
  }
  
  // 原教程里的其他逻辑（比如渲染模板、验证规则等）保持不变
}

三、后端简要说明 #

• 数据库集合：
  • form_questions：存储所有表单问题，字段包括key（唯一标识）、label（问题标题）、type（问题类型）、options（下拉框/单选的选项）
  • user_answers：存储用户答案，字段包括userId、questionKey、value、_id（主键）
• 核心接口：
  • GET /api/form/questions：返回所有表单问题
  • GET /api/user/answers：返回当前登录用户的所有已答数据
  • POST /api/user/answers：接收用户提交的答案，批量执行更新（如果已有答案）或插入（新答案）操作

内容的提问来源于stack exchange，提问作者Felix