Bmob后端云备忘录项目迭代：实现笔记置顶，解决笔记列表信息杂乱问题

自己在开发Web备忘录Demo时遇到一个很典型的产品痛点：笔记持续新增后，重要记录会被新内容不断压到列表下方。每次查找高频使用的笔记，都需要反复滚动翻阅，体验很差。

很多成熟笔记工具都提供置顶能力，本次基于Bmob后端云，给项目增加笔记置顶功能，不是前端临时排序，而是云端持久化存储置顶状态，刷新页面、切换明暗主题，置顶标记都不会丢失。

需求与设计思路

数据表新增布尔字段 is_top，用来标记笔记是否置顶
列表查询排序规则：优先置顶笔记靠前，同状态下按创建时间倒序
交互：单条笔记设置/取消置顶，点击后实时刷新列表
数据持久化：置顶状态保存到Bmob云数据库，多端访问保持一致

后端核心代码（Python）

csharp 复制代码

# 更新笔记置顶状态
def update_note_top(note_id, is_top):
    table = bmob.Table("Note")
    data = {
        "is_top": is_top
    }
    table.update(note_id, data)
    return {"code":0, "msg":"更新成功"}

# 查询笔记列表，置顶优先排序
def get_note_list():
    table = bmob.Table("Note")
    # 先按is_top降序，再按创建时间倒序
    res = table.query.order_by("-is_top","-createdAt").get()
    return res

前端核心代码（JavaScript）

php 复制代码

// 切换笔记置顶状态
async function toggleTop(noteId, currentTopStatus) {
  const newTop = !currentTopStatus;
  const res = await fetch("/api/updateTop", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      noteId: noteId,
      is_top: newTop
    })
  })
  const result = await res.json();
  if(result.code === 0) {
    loadNoteList(); // 更新列表
  }
}

踩坑记录

一开始只做前端排序，刷新页面置顶效果消失，必须把状态存入数据库持久化
排序语句顺序不能颠倒，is_top 作为第一排序条件，置顶笔记才会固定在顶部
状态切换后要重新拉取列表，避免前端缓存导致界面和数据库不一致

效果总结

✅ 重要笔记一键置顶，固定在列表顶部
✅ 云端存储，页面刷新、主题切换置顶状态不丢失
✅ 轻量化改造，对原有项目性能影响很小
✅ 优化笔记管理逻辑，从单纯记录升级为内容管理