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,期待你的加入!!
欢迎关注我的微信公众号:软件测试君

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2017-03-05 解决报错SAXNotRecognizedException: Feature 'http://javax.xml.XMLConstants/feature/secure-processing' not recognized