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、效果
写在最后
相对之前的树形数据及菜单显示那部分内容,这个我觉得应该是最简单的了,感兴趣的同学可以自行尝试下!
优秀不够,你是否无可替代
软件测试交流QQ群:721256703,期待你的加入!!
欢迎关注我的微信公众号:软件测试君
![](https://www.cnblogs.com/images/cnblogs_com/longronglang/1061549/o_QQ%E6%88%AA%E5%9B%BE20190728134401.jpg)