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

本篇文章分享Vue3学习（二十二）- 保存文档内容，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识

写在前面

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

保存文档内容并显示

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

写在最后

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

文章来源:https://www.cnblogs.com/longronglang/p/18055349
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！