自己在开发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作为第一排序条件,置顶笔记才会固定在顶部 - 状态切换后要重新拉取列表,避免前端缓存导致界面和数据库不一致
效果总结

- ✅ 重要笔记一键置顶,固定在列表顶部
- ✅ 云端存储,页面刷新、主题切换置顶状态不丢失
- ✅ 轻量化改造,对原有项目性能影响很小
- ✅ 优化笔记管理逻辑,从单纯记录升级为内容管理
后续计划继续迭代笔记检索、分类等功能,持续打磨这个Web备忘录项目。