Express+Mongoose点击文档实现编辑及base64图片加载优化问题

编辑功能实现方案 #

更推荐你使用data-*自定义属性的方案实现，比直接读取DOM、拼接Handlebars变量到点击事件里更可靠，也能完全复用你现有的新增弹窗结构：

1. 修改Handlebars模板，给编辑按钮绑定数据
   在渲染每一条条目时，把需要用到的字段都存在编辑按钮的自定义属性上，修改后的代码如下：

<section class="get">
    <h3>CONTENT</h3>
    <div>
        {{# each items }}
            <article class="item">
                <div>ID: {{ this._id }}</div>
                <div>Name: {{ this.name }}</div>
                <div>Description: {{ this.description }}</div>
                <div>Price: {{ this.price }}</div>
                <img src="data:image/png;base64, {{this.image}}" alt="{{ this.name }}">
                <!-- 新增自定义属性存字段 -->
                <button class="edit-button" 
                    data-id="{{this._id}}"
                    data-name="{{this.name}}"
                    data-description="{{this.description}}"
                    data-price="{{this.price}}"
                    data-image="{{this.image}}"
                >EDIT</button>
                <button class="delete-button" onclick="openDeleteForm.call(this)">DELETE</button>
            </article>
        {{/each}}
        <button class="open-button" onclick="openForm()">ADD</button>
    </div>
</section>

2. 绑定编辑按钮点击事件
   监听所有编辑按钮的点击，点击时从目标按钮的dataset属性中取出对应字段，填充到你现有的新增弹窗的输入框中即可：

document.querySelectorAll('.edit-button').forEach(btn => {
  btn.addEventListener('click', function() {
    const itemData = this.dataset
    // 填充弹窗输入框，替换成你实际的输入框选择器
    document.querySelector('#name-input').value = itemData.name
    document.querySelector('#desc-input').value = itemData.description
    document.querySelector('#price-input').value = itemData.price
    // 新增隐藏的id输入框，提交编辑时传给后端识别要更新的条目
    document.querySelector('#edit-id-input').value = itemData.id
    // 修改弹窗标题为编辑模式，打开弹窗
    document.querySelector('.form-popup h3').innerText = '编辑条目'
    openForm()
  })
})

3. 新增后端编辑接口
   你可以新增一个/edit的POST接口，接收前端传的id和要更新的字段，调用MenuData.findByIdAndUpdate更新数据库即可，逻辑和现有新增、删除接口类似。

这个方案的优势是：

• 不会因为后续DOM结构调整导致读取字段出错，比直接读DOM内容稳定
• Handlebars会自动转义自定义属性里的特殊字符，不会出现拼接点击事件参数的转义问题
• 完全复用现有新增弹窗的结构，不用额外写重复代码

Base64图片加载优化方案 #

调整图片尺寸确实可以缩短base64的长度，base64字符串长度和原图片的文件大小呈正相关，图片体积越小，base64长度越短，加载速度就越快。但仅调整尺寸优化幅度有限，你还可以搭配以下方案进一步优化：

1. 上传前先压缩处理图片
   上传时先把图片分辨率压缩到你页面实际显示的最大尺寸，不要存原尺寸大图，同时可以把图片转成WebP格式再转base64存储，同画质下WebP比PNG体积小30%以上，能大幅缩短base64长度。
2. 调整存储方式（收益最高）
   base64格式会比原二进制文件大33%左右，且嵌在HTML中无法被浏览器单独缓存，也不能并行加载，会拖慢整个HTML的下载速度。更推荐你把图片文件存在对象存储服务或者本地文件系统，MongoDB仅存储图片的访问URL，页面直接加载URL地址，加载速度会有非常明显的提升。
3. 增加懒加载逻辑
   如果一定要保留base64存储的方案，可以给图片加上懒加载逻辑，只有当图片滚动到可视区域时再加载，减少首屏的加载压力。

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