前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >测试也会开发 - 保存文档功能开发

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

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

写在前面

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

保存文档内容并显示

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 归档