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、结果
https://img2024.cnblogs.com/blog/718867/202403/718867-20240305221750669-1181386240.png
写在末了
相对之前的树形数据及菜单显示那部分内容，这个我觉得应该是最简单的了，感爱好的同砚可以自行尝试下！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]