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

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

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

需求与设计思路

  1. 数据表新增布尔字段 is_top,用来标记笔记是否置顶
  2. 列表查询排序规则:优先置顶笔记靠前,同状态下按创建时间倒序
  3. 交互:单条笔记设置/取消置顶,点击后实时刷新列表
  4. 数据持久化:置顶状态保存到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(); // 更新列表
  }
}

踩坑记录

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

效果总结

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

后续计划继续迭代笔记检索、分类等功能,持续打磨这个Web备忘录项目。

相关推荐
用户033307413956 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
daisychey6 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端
IT_陈寒7 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
大龄秃头程序员7 小时前
iOS冷启动监控Demo
前端
光影少年7 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
掘金酱8 小时前
[稀土掘金 × 火山引擎] AI用量周榜冲刺赛|获奖名单公示
前端·人工智能·后端
泡泡oO8 小时前
“如果你还在用Superpowers,那我不要和你说话”
前端·后端·全栈
维克兜率天8 小时前
趋势过滤:避免被“假突破“反复打脸
前端
8年区块链老兵9 小时前
一篇文章教会你:用区块高度读懂比特币链上的每一笔交易
前端
xixichensh9 小时前
前端转做AI程序员第一步——开发一个AI流式对话Demo
前端