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

写在最后

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

热门相关:混在三国当军阀   君归矣   士子风流   名门贵妻:暴君小心点   唐朝小官人