Vue3学习（二十二）- 保存文档内容

时间：2024-03-05 22:21:04

写在前面

前面已经调整了布局，富文本编辑器也能正确显示了，那么接下来就是怎么把数据保存到数据库里了，那么怎么做呢？

保存文档内容并显示

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

写在最后

相对之前的树形数据及菜单显示那部分内容，这个我觉得应该是最简单的了，感兴趣的同学可以自行尝试下！

相关文章