低代码编辑平台后台实现

背景

之前做过一个前端低代码编辑平台,可以实现简单的移动端页面组件拖拽编辑:
https://github.com/li-car-fei/react-visual-design

最近基于C++的oatpp框架实现了一下后台。使用oatpp框架做web后台开发时,发现按照官方的示例使用的话,很难在多表多控制视图模式下进行开发,因此修改了一些它的使用方法,以面向对象的方式对各个部分管理,高效开发。

github链接:https://github.com/li-car-fei/oatpp-low-code
求求 star~~

其中,对于低代码平台中核心功能,实现思路如下所述。

主要思路

  • 运用 oatpp++ 搭建后端服务程序

  • Restful API 接口 (Swagger 提供接口示例文档)

  • 将低代码的逻辑通过四个表实现

    • user 表:用户信息,一个用户对应多个project
    • project 表:某个低代码编辑图的基础信息;一个project对应多个component
    • component 表:组件表,储存组件类别、属性、序号等;一个component对应0个或多个childComponnet;
    • childComponent 表:子组件表,存储子组件属性、序号等;
  • 对 oatpp++ CRUD 的改写:

    • 数据 DTO 有共用字段的采用类的继承方式定义
   /**
* 组件记录的 DTO
*/
class ComponentRecordDto : public oatpp::DTO {
 
 DTO_INIT(ComponentRecordDto, DTO)

 DTO_FIELD(Int32, record_id);
 DTO_FIELD(Int32, project_id, "project_id");
 DTO_FIELD(Enum<ComponentType>::AsString, component_type);
 DTO_FIELD(Int32, components_index);
 DTO_FIELD(String, currentDate);
 DTO_FIELD(String, header, "header");
 DTO_FIELD(String, title, "title");
 DTO_FIELD(String, content, "content");
 DTO_FIELD(String, mode, "mode");
 DTO_FIELD(String, src, "src");
 DTO_FIELD(String, link, "link");
 DTO_FIELD(String, label1, "label1");
 DTO_FIELD(String, label2, "label2");
 DTO_FIELD(String, backgroundColor, "backgroundColor");
};

/**
* 组件记录 包括了子组件数组 数据 的 DTO
*/
class ComponentTransferDto : public ComponentRecordDto {
 DTO_INIT(ComponentTransferDto, ComponentRecordDto)

 DTO_FIELD(Vector<oatpp::Object<ChildComponentTranserDto>>, childs, "childs");
};
  • Db 部分,每个表的SQL操作分别定义为一个类,随后挂载到一个总的 Db 类中,使用共享的数据库连接池和语句执行器excuator
/**
 * 总的 DB 类,管理所有的 数据相关操作类
*/
class Db {
public:
    Db(const std::shared_ptr<oatpp::orm::Executor>& executor)
        : userDb(std::make_shared<UserDb>(executor)),
          projectDb(std::make_shared<ProjectDb>(executor)),
          componentDb(std::make_shared<ComponentDb>(executor)),
          childComponentDb(std::make_shared<ChildComponentDb>(executor))
    {
        std::cout << "Db start creating" << std::endl;
        
        oatpp::orm::SchemaMigration migration(executor);
        migration.addFile(1 /* start from version 1 */, DATABASE_MIGRATIONS "/001_init.sql");
        // TODO - Add more migrations here.
        migration.migrate(); // <-- run migrations. This guy will throw on error.

        auto version = executor->getSchemaVersion();
        OATPP_LOGD("Db", "Migration - OK. Version=%lld.", version);

    };

    std::shared_ptr<UserDb> userDb;
    std::shared_ptr<ProjectDb> projectDb;
    std::shared_ptr<ComponentDb> componentDb;
    std::shared_ptr<ChildComponentDb> childComponentDb;
};
  • service 方面;

    • 定义一个基础服务类,存储 Db 与所有服务共用的成员

    • 每个表的服务定义一个service,虚继承基础服务类(保证后续派生类只有一个Db连接);提供每个表自己独立的服务

    • 所有的 service,都继承自基础服务类;即共用一个数据库连接池,共用一套集成好的 SQL 语句接口;

    • 两个表相关的服务,且有层次关系的,如组件和子组件,则采用继承方式实现;使得组件服务可以调用子组件服务;

    • 多个表相关的服务,如整个 project 相关的服务,另外新建一个 service 类,继承所需的服务对应的类实现;

    • 只需直接继承 BaseService 的类是虚继承即可,就可保证所有类中只有一份 Db;

/**
 * BaseService
 * 声明 Status 后续子类都用于HTTP状态的码的设定
 * 保存 std::shared_ptr<Db> m_database,用于数据库相关操作
 * 直接继承BaseService的类需要是 virtual 继承,则可保证所有相关Service类中都只有一份Db
*/
class BaseService {
    /* protected ,子类可以访问到,外界不可以访问 */
    protected:
        typedef oatpp::web::protocol::http::Status Status;
        std::shared_ptr<Db> m_database;
    
    public:
        BaseService(std::shared_ptr<Db> database) : m_database(database) {};
};

/* 子组件相关服务 */
class ChildComponentService : virtual public BaseService {

public:
    ChildComponentService(std::shared_ptr<Db> database) : BaseService(database) {};

    /* others... */
};

/* 组件相关服务 */
class ComponentService : public ChildComponentService {

public:
    /**
     * 虚继承中,需要由最上层派生类调用基类的构造函数
     * (普通继承则不用,调用直接继承的基类的构造即可)
    */
    ComponentService(std::shared_ptr<Db> database) : 
        BaseService(database), 
        ChildComponentService(database) {};

    /* others... */
};

  • controller 方面,与 service 提供的服务对应起来,定义HTTP接口的信息;

    • 每个 controller 都接收指向 Db 的共享指针,以传给对应的 service 成员;

    • controller 继承自 oatpp++ 提供的对象,需要从环境中找到序列化/反序列化器objectMapper用于其初始化

    • 定义一个将所有controller进行统一管理的 MyController,将所有实例(只需一个)挂载到里面,并对外提供统一的controller相关操作接口,如router配置;

/**
 * 通过一个 MyController 将所有的 数据库相关的 Controller 包含起来,
 * 统一完成 原本在App.cpp 中的 路由的配置
*/

class MyController {
  public:
  /* 构造函数 : 一个database对象构建所有 Controller */
    MyController(std::shared_ptr<Db> database) : 
      userController(UserController::createShared(database)),
      projectController(ProjectController::createShared(database)),
      componentController(ComponentController::createShared(database)),
      childComponentController(ChildComponentController::createShared(database)),
      uploadController(UploadController::createShared())
    {};


  /* 静态函数,MyController 只需要一个实例即可 */
    static std::shared_ptr<MyController> createShared(
      std::shared_ptr<Db> database)
    {
      return std::make_shared<MyController>(database);
    }

  /* 通过 MyController 完成 所有 子Controller 的路由配置 */
  void setRouter(
    oatpp::web::server::api::Endpoints& docEndpoints,
    std::shared_ptr<oatpp::web::server::HttpRouter> router)
  {
    docEndpoints.append(router->addController(userController)->getEndpoints());
    docEndpoints.append(router->addController(projectController)->getEndpoints());
    docEndpoints.append(router->addController(componentController)->getEndpoints());
    docEndpoints.append(router->addController(childComponentController)->getEndpoints());
    docEndpoints.append(router->addController(uploadController)->getEndpoints());
  };


  /* 所有的 Controller */
    std::shared_ptr<UserController> userController;
    std::shared_ptr<ProjectController> projectController;
    std::shared_ptr<ComponentController> componentController;
    std::shared_ptr<ChildComponentController> childComponentController;
    std::shared_ptr<UploadController> uploadController;
};
  • 另外运用oatpp++的文件上传接口提供图片上传,用于AI模型识别;识别后调用projectComplete的服务存储完整低代码视图信息;
ENDPOINT_INFO(upload) {
    info->summary = "upload image to parse";
   }
ENDPOINT("POST", "/upload", upload, REQUEST(std::shared_ptr<IncomingRequest>, request)) {

    oatpp::data::stream::FileOutputStream fileOutputStream(UPLOADFILEPATH);
    request->transferBodyToStream(&fileOutputStream); // transfer body chunk by chunk
    return createResponse(Status::CODE_200, "OK");
}

Interceptor Auth 鉴权

JWT 模式,对 header 中的 json web token (userId_ )进行加解密确认;

AuthController 中配置哪些接口不需要鉴权,其余的接口都要增加 JWT 的 Header 参数设置;

请求接口接收后需要 Interceptor 模式进行加解密确认;

接口示例

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/151044.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

氢原子波函数等概率面的绘制

氢原子波函数等概率面的绘制 归一化后的氢原子波函数

高浓度白酒废水处理需要哪些设备

高浓度白酒废水处理需要的设备包括预处理设备、生物反应器、二级处理设备、消毒装置等。 预处理设备&#xff1a;包括格栅、筛网等&#xff0c;用于去除污水中的大颗粒物和杂质。生物反应器&#xff1a;用于进行生物反应&#xff0c;去除污水中的有机物和氨氮等污染物。二级处…

基于平衡优化器算法优化概率神经网络PNN的分类预测 - 附代码

基于平衡优化器算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于平衡优化器算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于平衡优化器优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针…

Linux 系统编程,Binder 学习,文件访问相关的接口

文章目录 Linux 系统编程&#xff0c;Binder 学习&#xff0c;文件访问相关的接口1.概念2.linux文件结构3.文件描述符4.Linux文件系统的两类常用接口&#xff0c;linux系统内置库函数4.1 open4.2 close4.3 read4.4 write 5.标准I/O库函数5.1 fopen Linux 系统编程&#xff0c;B…

IDEA 高分辨率卡顿优化

VM设置优化 -Dsun.java2d.uiScale.enabledfalse 增加该条设置&#xff0c;关闭高分切换 https://intellij-support.jetbrains.com/hc/en-us/articles/115001260010-Troubleshooting-IDE-scaling-DPI-issues-on-Windows​intellij-support.jetbrains.com/hc/en-us/articles/1…

c语言判断链表是否为循环链表

普通链表与循环链表的区别在于&#xff1a;普通链表的最后一个节点指向为NULL&#xff0c;而循环链表最后一个节点指向该链表中的任意一个节点&#xff0c;如同一个环。循环链表问题引出了一个在链表中很重要的概念&#xff1a;快、慢指针。快、慢指针可以帮助我们解决很多经典…

使用jmeter+ant进行接口自动化测试(数据驱动)

本次接着介绍如何利用apache-ant执行测试用例并生成HTML格式测试报告 ①下载安装 apache-ant-1.9.9&#xff0c;配置环境变量 如下方式检验安装成功 ②安装好ant后&#xff0c;把jmeter中extras目录下的ant-jmeter-1.1.1.jar 文件copy到ant安装目录下的lib文件夹中 ③配置ant…

ssm045基于jsp的精品酒销售管理系统+jsp

ssm045基于jsp的精品酒销售管理系统jsp 交流学习&#xff1a; 更多项目&#xff1a; 全网最全的Java成品项目列表 https://docs.qq.com/doc/DUXdsVlhIdVlsemdX 演示 项目功能演示&#xff1a; ————————————————

247:vue+openlayers 根据坐标显示多边形(3857投影),计算出最大幅宽

第247个 点击查看专栏目录 本示例是演示如何在vue+openlayers项目中根据坐标显示多边形(3857投影),计算出最大幅宽。这里先通过Polygon来显示出多边形,利用getExtent() 获取3857坐标下的最大最小x,y值,通过ransformExtent转换坐标为4326, 通过turf的turf.distance和计算…

Vue3清除Echarts图表

一&#xff1a;前言 Vue3是一款流行的JavaScript框架。它提供了丰富的工具和组件&#xff0c;使得开发者可以轻松构建交互式的Web应用程序。而Echarts是一款功能强大的图表库&#xff0c;它可以帮助开发者以直观的方式展示数据。 在使用Vue3和E charts的过程中&#xf…

【数电】IEEE754浮点数

IEEE754浮点数 1.组成及分类2.计算(1)符号位(2)阶码(3)尾码(4)实际计算公式 1.组成及分类 &#xff08;1&#xff09;组成 IEEE754浮点数由三部分组成&#xff1a;符号位、阶码和尾码。 &#xff08;2&#xff09;分类 根据数据位宽分为三类&#xff1a;短浮点数、长浮点数和…

【ArcGIS处理】行政区划与流域区划间转化

【ArcGIS处理】行政区划与流域区划间转化 引言数据准备1、行政区划数据2、流域区划数据 ArcGIS详细处理步骤Step1&#xff1a;统计行政区划下子流域面积1、创建批量处理模型2、添加批量裁剪处理3、添加计算面积 Step2&#xff1a;根据子流域面积占比均化得到各行政区固定值 参考…

双点重发布路由策略实验

任务&IP分配如下&#xff1a; 双点重发布实验 第一步&#xff1a;配置IP地址&环回地址 以R1为例&#xff0c;R2、R3、R4同理 interface GigabitEthernet 0/0/0 ip address 12.0.0.1 24 interface GigabitEthernet 0/0/1 ip address 13.0.0.1 24 interface LookBack …

AdaBoost 算法:理解、实现和掌握 AdaBoost

一、介绍 Boosting 是一种集成建模技术&#xff0c;由 Freund 和 Schapire 于 1997 年首次提出。从那时起&#xff0c;Boosting 就成为解决二元分类问题的流行技术。这些算法通过将大量弱学习器转换为强学习器来提高预测能力 。 Boosting 算法背后的原理是&#xff0c;我们首先…

ruoyi若依前端请求接口超时,增加响应时长

问题&#xff1a; 前端查询请求超时 解决&#xff1a; 找到request.js的timeout属性由10秒改成了20秒&#xff0c;因为默认是10秒&#xff0c;请求肯定是超出了10秒 祝您万事顺心&#xff0c;没事点个赞呗&#xff0c;关注一下也行啊&#xff0c;有啥要求您评论哈

北大腾讯打造多模态15边形战士!语言作“纽带”,拳打脚踢各模态,超越Imagebind

AI4Happiness 投稿 量子位 | 公众号 QbitAI 北大联合腾讯打造了一个多模态15边形战士&#xff01; 以语言为中心&#xff0c;“拳打脚踢”视频、音频、深度、红外理解等各模态。 具体来说&#xff0c;研究人员提出了一个叫做LanguageBind的多模态预训练框架。 用语言作为与其…

Python中的时间序列分析模型ARIMA

大家好&#xff0c;时间序列分析广泛用于预测和预报时间序列中的未来数据点。ARIMA模型被广泛用于时间序列预测&#xff0c;并被认为是最流行的方法之一。本文我们将学习如何在Python中搭建和评估用于时间序列预测的ARIMA模型。 ARIMA模型 ARIMA模型是一种用于分析和预测时间…

华为ensp防火墙虚拟系统在网络中的部署

首先我们要知道虚拟系统是啥&#xff0c;干什么用的&#xff0c;解决什么问题的&#xff0c;说白话就是&#xff0c;我没钱&#xff0c;买不起两台墙&#xff0c;我买一台墙通过虚拟系统的方式逻辑变成两台墙&#xff0c;学过高级路由的都知道vpn&#xff0c;vpn是将路由器器逻…

Spring6(六):提前编译AOT

文章目录 提前编译&#xff1a;AOT1. AOT概述1.1 JIT与AOT的区别1.2 Graalvm1.3 Native Image 2. 演示Native Image构建过程2.1 GraalVM安装&#xff08;1&#xff09;下载GraalVM&#xff08;2&#xff09;配置环境变量&#xff08;3&#xff09;安装native-image插件 2.2 安装…

内存泄漏、new、delete

1. 内存泄漏 内存泄漏&#xff1a;指针被销毁&#xff0c;指针指向的空间依旧存在 2. new过程 与内存分配、构造函数有关 1&#xff09;分配空间&#xff1a;void* mem operator new( sizeof( ) )&#xff0c;内部调用malloc 2&#xff09;static_cast<目标类型>(mem) …