如何在MVC中绑定多组文本框并将关联的公司与员工信息存储到数据库？

嘿，我来帮你一步步搞定这个需求，从数据库设计、前端绑定到后端存储，都给你理清楚：

你提到已经创建了对应字段的数据表，但为了更合理地实现「同一家公司同一年对应多名员工」的关联关系，建议采用一对多的表结构（比单表重复存储公司年份更规范）：

• 主表：company_year，字段：id（主键，自增）、company_name、year —— 用来存储唯一的「公司+年份」组合，避免重复数据。
• 从表：employees，字段：id（主键）、company_year_id（外键，关联company_year.id）、emp_name、email、phone_no —— 每条员工记录通过外键绑定到对应的公司年份。

如果你已经用了单表，也能实现，但同一家公司同一年的companyName和year会重复存储，后续维护起来不如分表方便。

要实现用户输入一次公司年份，就能添加多名员工的功能，前端需要做这些：

• 把companyName和year设为全局输入框（放在表单顶部），不用每个员工重复输入。
• 做一个「添加员工」按钮，点击后动态生成empname、email、phoneno的输入组，支持批量录入多名员工。
• 提交时，把所有员工信息和当前的companyName、year打包发给后端。

给你个原生JS的简单示例：

<!-- 公司年份输入区 -->
<div class="company-section">
  <label>公司名称：</label>
  <input type="text" id="companyName" placeholder="比如HCL">
  <label>年份：</label>
  <input type="number" id="year" placeholder="比如2017">
</div>

<!-- 员工列表输入区 -->
<div id="employeeList">
  <!-- 初始默认一个员工输入组 -->
  <div class="employee-item">
    <input type="text" class="empname" placeholder="员工姓名">
    <input type="email" class="email" placeholder="邮箱">
    <input type="tel" class="phoneno" placeholder="手机号">
  </div>
</div>
<button onclick="addNewEmployee()">添加员工</button>
<button onclick="submitAllData()">提交数据</button>

<script>
// 动态添加员工输入组
function addNewEmployee() {
  const listContainer = document.getElementById('employeeList');
  const newItem = document.createElement('div');
  newItem.className = 'employee-item';
  newItem.innerHTML = `
    <input type="text" class="empname" placeholder="员工姓名">
    <input type="email" class="email" placeholder="邮箱">
    <input type="tel" class="phoneno" placeholder="手机号">
  `;
  listContainer.appendChild(newItem);
}

// 收集数据并提交
function submitAllData() {
  const companyName = document.getElementById('companyName').value;
  const year = document.getElementById('year').value;
  const employeeItems = document.querySelectorAll('.employee-item');

  // 把数据打包成后端能识别的格式
  const submitData = {
    companyName: companyName,
    year: year,
    employees: Array.from(employeeItems).map(item => ({
      empname: item.querySelector('.empname').value,
      email: item.querySelector('.email').value,
      phoneno: item.querySelector('.phoneno').value
    }))
  };

  // 用fetch发送请求到后端接口
  fetch('/api/save-employees', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(submitData)
  })
  .then(res => res.json())
  .then(() => alert('数据保存成功！'))
  .catch(err => console.error('保存失败：', err));
}
</script>

后端需要接收前端传来的数据包，先处理「公司+年份」的关联，再批量存储员工信息：

1. 先检查当前的companyName和year组合是否已存在于company_year表中：
   • 如果存在，直接获取对应的id；
   • 如果不存在，插入新记录并获取id。
2. 把每个员工的信息和这个company_year_id绑定，批量插入到employees表。

示例代码：

from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

# 获取数据库连接
def get_db_conn():
    conn = sqlite3.connect('company_employees.db')
    conn.row_factory = sqlite3.Row
    return conn

@app.route('/api/save-employees', methods=['POST'])
def save_employees():
    data = request.get_json()
    company_name = data['companyName']
    year = data['year']
    employees = data['employees']

    conn = get_db_conn()
    cursor = conn.cursor()

    # 检查公司年份是否已存在
    cursor.execute('SELECT id FROM company_year WHERE company_name = ? AND year = ?', (company_name, year))
    company_year_record = cursor.fetchone()

    if company_year_record:
        company_year_id = company_year_record['id']
    else:
        # 插入新的公司年份记录
        cursor.execute('INSERT INTO company_year (company_name, year) VALUES (?, ?)', (company_name, year))
        company_year_id = cursor.lastrowid

    # 批量插入员工数据
    for emp in employees:
        cursor.execute('''
            INSERT INTO employees (company_year_id, emp_name, email, phone_no)
            VALUES (?, ?, ?, ?)
        ''', (company_year_id, emp['empname'], emp['email'], emp['phoneno']))

    conn.commit()
    conn.close()

    return jsonify({'status': 'success', 'message': '所有员工信息已保存'})

if __name__ == '__main__':
    app.run(debug=True)

如果需要查询后输出「公司年份只显示一次，下面跟着员工列表」的格式，可以在后端做组装：

@app.route('/api/get-employees/<company_name>/<year>', methods=['GET'])
def get_formatted_employees(company_name, year):
    conn = get_db_conn()
    # 获取公司年份信息
    company_year = conn.execute('SELECT * FROM company_year WHERE company_name = ? AND year = ?', (company_name, year)).fetchone()
    if not company_year:
        return jsonify({'error': '该公司年份不存在'})
    
    # 获取关联的所有员工
    employees = conn.execute('''
        SELECT emp_name, email, phone_no FROM employees
        WHERE company_year_id = ?
    ''', (company_year['id'],)).fetchall()

    conn.close()

    # 组装成你要的格式
    formatted_output = f"Company Year\n{company_name} {year}\n"
    for emp in employees:
        formatted_output += f"{emp['emp_name']} {emp['email']} {emp['phone_no']}\n"

    return jsonify({'formatted_result': formatted_output})

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