Vue3學習（二十二）- 儲存文件內容

久曲健發表於2024-03-05
Vue

寫在前面

前面已經調整了佈局，富文字編輯器也能正確顯示了，那麼接下來就是怎麼把資料儲存到資料庫裡了，那麼怎麼做呢？

儲存文件內容並顯示

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、效果

寫在最後

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

相關文章