# low-code项目1.0|青训营笔记

化作孤岛
118 阅读3分钟

low-code项目|青训营

这是我参与「第四届青训营 」笔记创作活动的的第5天

一、项目介绍

项目核心信息：本项目旨在开发一个供运营、产品快速搭建网站的可视化平台，利用可视化的拖拽与属性配置完成构建和日常运营，而开发只进行平台的维护、业务组件的新增和迭代。
项目服务地址-必须：http://116.62.226.254/
gitee地址：low-code: 青训营低代码学习案例，仅供学习 (gitee.com)

三、项目实现

3.1 技术选型与相关开发文档

可以补充场景分析环节，明确要解决的问题和前提假设，比如按当前选型和架构总体预计需要xxx存储空间，xxx台服务器......。

Vue3+Sass+jsx+Webpack

选择Vue的考虑：

  • 体积小，复杂度低

    • Vue 的体积小，网络性能角度相比 React 更适合移动端
    • 移动端一般巨型项目很少，从代码结构上来讲，使用 Vue 实现更符合我们的场景复杂度， React 更适合大型相对更复杂的 SPA

  • 上手成本和迁移成本低

    • Vue 的学习和上手成本相对更低，团队成员对于 Vue 的认可度和热情也比较高

  • 组件内双向绑定、数据依赖收集

    • 组件内支持双向绑定，更方便的去进行组件内的数据响应与交互
    • 独有的数据依赖收集模式使其默认的数据响应和渲染效率都要比 React 高一些

组件库:

elmentplus

统一规范:

  • 主要就是操作json配置文件l;渲染区 使用json文件动态渲染成对应的组件
​
{
  "label": "button",   
  "icon": "icon-button", 
  props: {
      "text":...
      "type":...
      "size":...
  }
}

一旦进入我们就通过解析**「JSON」，获取组件信息。然后我们开发一个与组件相对应的「属性配置器」**，传入组件信息中的属性数据，通过属性配置器生成属性控制面板

属性控制面板生成过程

属性控制面板生成过程
所以我们需要用规则来标准化JSON。 解决办法就是通过JSON Schema协议来约束JSON，让它根据我们定的标准来编写。
「Schema协议」,是我们「平台规范」的工具,也就是我们可视化开发平台的核心。

3.2 架构设计

可视化搭建平台主要有三块：

  • 物料区的构建
  • 编辑区的构建
  • 属性区的构建

image.png

3.3 项目代码介绍

组件结构

基本上

registerConfig.register({
    label: '按钮',
​
    resize: {
        width: true,
        height: true
    },
    preview: () => <i className="iconfont icon-anniu"></i>,
    render: ({ props, size }) => <ElButton style={{ height: size.height + 'px', width: size.width + 'px' }} type={props.type} size={props.size}>{props.text || '渲染按钮'}</ElButton>,
    key: 'button',
    props: {
​
        text: createInputProp('按钮内容'),
        type: createSelectProp('按钮类型', [
            { label: 'primary', value: 'primary' },
            { label: 'success', value: 'success' },
            { label: 'warning', value: 'warning' },
            { label: 'danger', value: 'danger' },
​
        ]),
        size: createSelectProp('按钮尺寸', [
            { label: '默认', value: '' },
            { label: '大', value: 'large' },
            { label: '小', value: 'small' },
        ])
    }
})
​

两个关键变量：

  • componentList: 物料组件的集合，用于渲染编辑器左侧物料的数据源；
  • componentMap: 是一个 map 映射关系，根据 type 字段进行映射，有了它，就可以在画布中通过 Schema 数据去匹配物料组件来渲染画布视图。

有了数据，我们就可以通过 map 渲染左侧区物料组件：

​
​
​

后端

稍后

​

四、测试结果

建议从功能测试和性能测试两部分分析，其中功能测试补充测试用例，性能测试补充性能分析报告、可优化点等内容。

五、Demo 演示视频 （必填）

稍后

六、项目总结与反思

  1. 目前仍存在的问题
  1. 已识别出的优化项
  1. 架构演进的可能性
  1. 项目过程中的反思与总结

七、其他补充资料（选填）

稍后 未完待续。。。

avatar
文章
阅读
粉丝