我来帮你解决这个问题！核心问题很明确：你现在只是在前端修改了内存中的数据，但没有把这些变更同步到后端数据库，所以刷新页面后又会从数据库读取原始数据。咱们分前后端两部分来修改，实现真正的数据持久化。

首先，你需要新增一个接口来接收前端发送的修改数据，并更新数据库。另外，当前的根路由逻辑有点混乱，我们拆分出专门的查询和更新接口：

先安装跨域依赖（因为前后端端口不同，浏览器会阻止跨域请求）：

pip install flask-cors

修改后的Flask代码：

from flask import Flask, jsonify, request
import MySQLdb
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 启用跨域支持

# 获取所有学生数据的接口（GET请求）
@app.route('/', methods=['GET'])
def get_students():
    db = MySQLdb.connect("localhost", "root", "test123", "test")
    try:
        with db:
            cursor = db.cursor()
            sql = "SELECT * FROM geninfo1"
            cursor.execute(sql)
            rows = cursor.fetchall()
            student_list = []
            for row in rows:
                student_list.append({
                    'id': row[0],
                    'Name': row[1],
                    'Roll': row[2],
                    'Class': row[3],
                    'Town': row[4]
                })
            return jsonify(student_list)
    finally:
        db.close()

# 更新单个学生数据的接口（PUT请求，符合REST规范）
@app.route('/api/update/<int:student_id>', methods=['PUT'])
def update_student(student_id):
    data = request.get_json()
    if not data:
        return jsonify({'error': '未提供修改数据'}), 400
    
    # 提取修改后的字段
    name = data.get('Name')
    roll = data.get('Roll')
    town = data.get('Town')
    class_ = data.get('Class')

    db = MySQLdb.connect("localhost", "root", "test123", "test")
    try:
        with db:
            cursor = db.cursor()
            # 执行数据库更新
            sql = "UPDATE geninfo1 SET Name=%s, Roll=%s, Town=%s, Class=%s WHERE id=%s"
            cursor.execute(sql, (name, roll, town, class_, student_id))
            db.commit()
            return jsonify({'success': True, 'message': '学生信息更新成功'})
    except Exception as e:
        db.rollback()
        return jsonify({'error': f'更新失败：{str(e)}'}), 500
    finally:
        db.close()

if __name__ == '__main__':
    app.run(host="10.2.10.55", port=5000, debug=True)

关键修改点：

• 拆分了查询和更新接口，职责更清晰
• 添加了CORS支持，解决跨域请求被拦截的问题
• 使用request.get_json()接收前端JSON格式的修改数据（AngularJS默认发送JSON）
• 新增事务处理，更新失败时回滚数据库，保证数据一致性

你的前端存在两个主要问题：表格结构不规范（按钮直接放在<tr>下）、没有绑定单个学生的编辑状态，也没有提交修改的逻辑。修改如下：

<div ng-app="djangoApp" ng-controller="siaMyCtrl"> 
  <table class="table"> 
    <thead> 
      <th>操作</th>
      <th>Name</th> 
      <th>Roll</th> 
      <th>Town</th> 
      <th>Class</th> 
    </thead> 
    <tr ng-repeat="student in contacts | filter:query">
      <td>
        <button ng-hide="student.editMode" ng-click="toggleEdit(student)">Edit</button>
        <button ng-show="student.editMode" ng-click="toggleEdit(student)">Done</button> 
      </td>
      <td>
        <span ng-hide="student.editMode">{{ student.Name }}</span>
        <input ng-show="student.editMode" ng-model="student.Name"> 
      </td> 
      <td>
        <span ng-hide="student.editMode">{{ student.Roll }}</span>
        <input ng-show="student.editMode" ng-model="student.Roll"> 
      </td> 
      <td>
        <span ng-hide="student.editMode">{{ student.Town }}</span>
        <input ng-show="student.editMode" ng-model="student.Town">
      </td> 
      <td>
        <span ng-hide="student.editMode">{{ student.Class }}</span>
        <input ng-show="student.editMode" ng-model="student.Class">
      </td> 
    </tr> 
  </table> 
</div>

<script>
var module = angular.module("djangoApp", []) 
module.controller("siaMyCtrl", siaMyCtrl) 

function siaMyCtrl($scope, $http) { 
  // 初始化学生列表
  $http.get('http://10.2.10.55:5000/') 
    .then(successCallback, errorCallback) 
  
  function successCallback(response) { 
    // 给每个学生添加独立的编辑状态属性
    $scope.contacts = response.data.map(item => ({...item, editMode: false}));
  } 
  
  function errorCallback(error) { 
    console.error('获取学生数据失败：', error);
  } 

  $scope.toggleEdit = function (student) { 
    student.editMode = !student.editMode;
    
    // 如果是退出编辑模式（点击Done），提交修改
    if (!student.editMode) {
      $http.put(`http://10.2.10.55:5000/api/update/${student.id}`, student)
        .then(function(res) {
          console.log(res.data.message);
        })
        .catch(function(err) {
          console.error(err.data.error);
          // 更新失败时重新拉取最新数据，避免前端显示错误内容
          $http.get('http://10.2.10.55:5000/').then(res => {
            $scope.contacts = res.data.map(item => ({...item, editMode: false}));
          });
        });
    }
  } 

  $scope.addDetails = function () { 
    // 如需实现新增功能，可参考更新逻辑发送POST请求到后端
  }
}
</script>

关键修改点：

• 修复表格结构，把按钮放到<td>标签内
• 给每个学生对象添加独立的editMode属性，实现单行编辑（原来的全局editMode会导致所有行同时编辑）
• 在点击Done时发送PUT请求，把修改后的学生数据提交到后端更新接口
• 添加了请求失败的回滚逻辑，重新拉取数据库最新数据，避免前端展示不一致

1. 重启Flask后端服务
2. 打开前端页面，点击某一行的Edit按钮修改数据，再点击Done
3. 刷新页面，修改后的内容会从数据库加载，不会恢复原始值

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