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

写在前面

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

1、任务拆解

前端获取输入富文本框的html内容
改造保存接口，增加内容参数，保存时同时保存文档内容
2、改造保存接口，增加内容参数

增加一个字段content，示例代码如下：

1. @NotNull(message = "【内容】不能为空")
2. private String content;

复制代码

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

1. /*
2. * @decription 保存
3. * @author longrong.lang
4. * @date 2024/2/4 19:43
5. * @param docSaveReq
6. * @return void
7. */
8. public void save(DocSaveReq docSaveReq){
9.     Doc doc=CopyUtil.copy(docSaveReq,Doc.class);
10.     Content content=CopyUtil.copy(docSaveReq, Content.class);
11.     if (ObjectUtils.isEmpty(docSaveReq.getId())){
12.         //数据库中没查到,走新增方法
13.         doc.setId(snowFlake.nextId());
14.         docMapper.insert(doc);
15.         content.setId(doc.getId());
16.         contentMapper.insert(content);
17.     }else {
18.         //数据库中查到，有该条信息，走编辑操作
19.         docMapper.updateByPrimaryKey(doc);
20.         int count=contentMapper.updateByPrimaryKeyWithBLOBs(content);
21.         if (count == 0){
22.             contentMapper.insert(content);
23.         }
24.     }
25. }

复制代码

3、前端改造

前端获取输入富文本框的html内容，使用统一官方api即可，这里要注意下版本，示例代码如下：

1. editor.txt.html();

复制代码

4、结果

写在末了

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。