Vue3學習（二十二）- 保存文檔內容

寫在前面

前面已經調整了佈局，富文本編輯器也能正確顯示了，那麼接下來就是怎麼把數據保存到數據庫裏了，那麼怎麼做呢？

保存文檔內容並顯示

1、任務拆解

前端獲取輸入富文本框的html內容

改造保存接口，增加內容參數，保存時同時保存文檔內容

2、改造保存接口，增加內容參數

增加一個字段content，示例代碼如下：

@NotNull(message = "【內容】不能爲空")
private String content;

接口改造，示例代碼如下：

/*
 * @decription 保存
 * @author longrong.lang
 * @date 2024/2/4 19:43
 * @param docSaveReq
 * @return void
 */
public void save(DocSaveReq docSaveReq){
    Doc doc=CopyUtil.copy(docSaveReq,Doc.class);
    Content content=CopyUtil.copy(docSaveReq, Content.class);
    if (ObjectUtils.isEmpty(docSaveReq.getId())){
        //數據庫中沒查到,走新增方法
        doc.setId(snowFlake.nextId());
        docMapper.insert(doc);
        content.setId(doc.getId());
        contentMapper.insert(content);
    }else {
        //數據庫中查到，有該條信息，走編輯操作
        docMapper.updateByPrimaryKey(doc);
        int count=contentMapper.updateByPrimaryKeyWithBLOBs(content);
        if (count == 0){
            contentMapper.insert(content);
        }
    }
}

3、前端改造

前端獲取輸入富文本框的html內容，使用統一官方api即可，這裏要注意下版本，示例代碼如下：

editor.txt.html();

4、效果

寫在最後

相對之前的樹形數據及菜單顯示那部分內容，這個我覺得應該是最簡單的了，感興趣的同學可以自行嘗試下！