笔记网页‘X’删除按钮无响应，请求协助实现删除功能

1. HTML按钮事件属性错误 #

原代码中按钮使用了错误的事件属性on-click，HTML标准事件属性应为onclick，这会导致点击按钮无法触发deleteNote函数。

修复后的按钮代码：

<button type="button" class="close" onclick="deleteNote({{ note.id }})">&times;</button>

2. JavaScript请求参数与路径不匹配 #

• 请求路径错误：前端请求的/delete-node与后端路由delete-note不一致，需统一为/delete-note
• 请求体键名不匹配：前端传递的键是nodeId，但后端读取的是noteId，需统一命名
• 缺少Content-Type请求头：后端解析JSON时需要明确请求内容类型，否则可能解析失败
• 增加错误捕获：方便调试时查看请求异常

修复后的JavaScript代码：

function deleteNote(noteId) {
  fetch('/delete-note', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ noteId })
  }).then((_res) => {
    window.location.href = "/";
  }).catch(err => console.error(err));
}

3. Flask后端路由与逻辑缺陷 #

• 路由路径缺少开头斜杠：Flask路由必须以/开头，否则会导致路径匹配失败
• 简化JSON解析：Flask内置request.get_json()方法，无需手动解码request.data
• 补充异常响应：当笔记不存在、用户无权限或参数缺失时，需返回对应状态码和提示，避免前端收到空响应
• 增加参数校验：防止因缺少noteId导致的报错

修复后的后端代码：

@pages.route('/delete-note', methods=["POST"])
def delete_Note():
    note_req_file = request.get_json()
    print(note_req_file)
    
    noteId = note_req_file.get('noteId')
    if not noteId:
        return jsonify({"error": "缺少noteId参数"}), 400
    
    note = Note.query.get(noteId)
    if not note:
        return jsonify({"error": "笔记不存在"}), 404
    
    if note.user_id != current_user.id:
        return jsonify({"error": "无权限删除该笔记"}), 403
    
    db.session.delete(note)
    db.session.commit()
    return jsonify({}), 200

4. 数据库模型校验 #

当前的User与Note模型的一对多关联配置正确，无需修改。

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