如何在Flask与Vue.js中保存表单（form）数据？

我正在完成一项使用不熟悉工具的简单作业，需要将表单数据保存至文本文件（这是最优选择），或至少序列化为JSON以便后续展示。目前已有相关代码，但未实现数据保存功能，希望获得入门指导方向，实现类似指定示例的数据保存效果。

现有代码片段 #

HTML #

<form class="add-new" @submit="add" >
  <label >Nickname</label><br>
  <input type="text" v-model="nickname" ref="new"  autofocus name="nick" required><br>
  <span class="error" v-if="!nickname.match(/^[A-Za-z0-9]+$/) || nickname.length <= 2 || nickname.length >= 8">  {{message}}</span>

  <br></br>

  <label for="lname" required>Can you swim</label><br>
  <input type="radio" value="Yes" v-model="can_Swim" id="lname" name="je_plavec" required><br><br>

  <label >Your partner</label><br>
  <input type="text" v-model="partner" ref="new"  autofocus name="partner" >
  <br>
  <span class="error" v-if="!partner.match(/^[A-Za-z0-9]+$/) || partner.length <= 2 || partner.length >= 20"> {{message}}</span>
  <br><br>

  <section>
    <input  type="submit" value="submit">
    <a href="/index.html">
      <span>Back</span>
    </a>
  </section>
</form>

<transition-group name="student" tag="ul" >
  <li class="student" v-for="(student, index) in students" :key="index">
    <article :class="{faded: student.nickname.length > 1}" >
     {{student.nickname}}
      <br>
      <span>
        {{student.partner}}
      </span>
      <br>
      <span>
        {{student.can_Swim}}
      </span>
      <br>
    </article>
  </li>
</transition-group>

Vue.js 代码 #

<script>
  const vueApp  =  new Vue({
  el: '#app',
  data: {
    nickname:'',
    can_Swim:'',
    partner:'',
    message:"error",
    students:[]
  },
  methods:{
    add(e){
      e.preventDefault()
      this.students.push({
                    nickname:this.nickname,
                    can_Swim:this.can_Swim,
                    partner:this.partner
                })
                this.nickname = ''
                this.partner = ''
                this.can_Swim = false,
                this.$refs.new.focus()
    },
  },
})
</script>

Python (Flask) 代码 #

@app.route("/registrace", methods=['GET'])
def reg_form():
    return render_template('registration.html')

入门实现方向 #

核心思路 #

当前代码仅在前端Vue实例中临时存储数据，刷新页面就会丢失。要实现持久化保存，需要前端把数据提交到后端Flask服务，由后端负责写入文件/JSON。

具体步骤及代码修改 #

1. 前端Vue修改：添加数据提交逻辑

在add方法中，添加AJAX请求（用原生fetch即可，无需额外库），将新学生数据发送到后端：

methods:{
  add(e){
    e.preventDefault()
    const newStudent = {
      nickname: this.nickname,
      can_Swim: this.can_Swim,
      partner: this.partner
    }
    this.students.push(newStudent)

    // 发送数据到后端
    fetch('/registrace', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newStudent),
    })
    .then(response => response.json())
    .then(data => {
      console.log('数据保存成功');
    })
    .catch(error => {
      console.error('保存失败:', error);
    });

    // 重置表单
    this.nickname = ''
    this.partner = ''
    this.can_Swim = ''
    this.$refs.new.focus()
  },
}

2. 后端Flask修改：处理POST请求并保存数据

更新路由支持POST方法，接收前端传来的JSON数据，写入文本文件（每行一条JSON，便于后续读取）：

import json
from flask import request, jsonify

@app.route("/registrace", methods=['GET', 'POST'])
def reg_form():
    if request.method == 'POST':
        # 解析前端传来的JSON数据
        new_student = request.get_json()
        # 写入文本文件（追加模式）
        with open('students.txt', 'a', encoding='utf-8') as f:
            json.dump(new_student, f)
            f.write('\n')  # 每行一条数据，方便后续读取
        # 返回成功响应
        return jsonify({"status": "success"})
    # GET请求时返回表单页面
    return render_template('registration.html')

3. 可选：保存为完整JSON数组

如果需要把所有数据存为一个标准JSON数组，可以修改后端保存逻辑：

@app.route("/registrace", methods=['GET', 'POST'])
def reg_form():
    if request.method == 'POST':
        new_student = request.get_json()
        # 读取现有数据（如果文件存在）
        try:
            with open('students.json', 'r', encoding='utf-8') as f:
                students = json.load(f)
        except FileNotFoundError:
            students = []
        # 添加新数据
        students.append(new_student)
        # 写入文件
        with open('students.json', 'w', encoding='utf-8') as f:
            json.dump(students, f, indent=2)  # indent让JSON更易读
        return jsonify({"status": "success"})
    return render_template('registration.html')

验证效果 #

启动Flask服务后，提交表单，检查项目目录下是否生成students.txt或students.json文件，文件中应包含提交的表单数据。

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