首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >测试也会开发 - 保存文档功能开发

测试也会开发 - 保存文档功能开发

作者头像
软件测试君
发布2024-03-13 12:50:14
发布2024-03-13 12:50:14
2650
举报
文章被收录于专栏:测试人生测试人生

写在前面

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

保存文档内容并显示

1、任务拆解

前端获取输入富文本框的html内容

改造保存接口,增加内容参数,保存时同时保存文档内容

2、改造保存接口,增加内容参数

增加一个字段content,示例代码如下:

代码语言:javascript
复制
@NotNull(message = "【内容】不能为空")
private String content;

接口改造,示例代码如下:

代码语言:javascript
复制
/*
 * @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即可,这里要注意下版本,示例代码如下:

代码语言:javascript
复制
editor.txt.html();
4、效果

写在最后

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 软件测试君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写在前面
  • 保存文档内容并显示
    • 1、任务拆解
    • 2、改造保存接口,增加内容参数
    • 3、前端改造
    • 4、效果
  • 写在最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档