ShacoPage低代码模板开发文档

已于 2022-04-07 19:36:01 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： Vue Shaco-ui 文章标签： 前端 javascript typescript
于 2022-04-07 17:53:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47000305/article/details/124019991
版权

目录

shaco本人参考了了大多数的后台页面的设计，归纳出后台页面常见的模块划分。为满足大多数企业需求抽象出三个主流模块区域，即：headerConfig区域，searchConfig区域，tableConfig区域。

该模版搭配elementPlus组件库并且配置了响应式，更友好的在移动端，PC端展示，根据公司业务来判定是否能使用该模版，切勿盲目使用。

该模版的理念是： less complex logic , more extends config 。少量的复杂逻辑，更多更灵活的配置项

在这里插入图片描述

headerConfig配置项

属性属性介绍类型
title页面标题String
isAdorn标题前缀Boolean
isBottomLineheader区域底部分割线Boolean
adormClass自定义标题前缀class类名String
operationConfig右侧操作按钮配置项Object

operationConfig配置项

右侧操作按钮放在operationConfig的children配置项中 比如新增按钮，可以唤醒Dialog弹窗
具体children配置项如下

属性属性介绍类型
labelbutton名称String
type类型，可选项如：dialog，confirm，link等后续会进一步扩展String
permission按钮展示权限控制String
extendsOptionsbutton扩展项Object
callback接口或者操作函数Function
formConfig表单配置Object
formConfig配置项

formConfig来配置dialog中的Form表单

属性属性介绍类型
colLayOut响应式布局 colLayOut: {xl: 24,lg: 24,md: 24,sm: 24,xs: 24}Object
labelWidth表单label宽度String
labelPosition表单label位置，可选项：‘left’ ， ‘right’ ， ‘top’String
dialogConfigdialog配置Object
formData表单数据配置Object
dialogConfig配置项

具体配置项参见Element-Plus中 Dialog配置项

属性属性介绍类型
titledialog标题String
center是否居中Boolean
widthdialog宽度
formData配置项
属性属性介绍类型
model绑定的model值String
label表单label名称String
type表单项类型，可选：input，password，select，datepicker，image等，需进一步完善String
placeholder表单placeholderString
labelWidth表单label宽度，单独设置String
maxWidth表单项最大宽度，无需加单位String
options当type为select时，选择项配置String
aliasValue当type为select时，value别名String
aliasLabel当type为select时，label别名String
pickerType当type为datepicker时，可以选择datepicker的类型，比如：daterange等详情参见ElementPlusString
format当type为datepicker时，组件显示的时间格式，比如：“YYYY-MM-DD HH:mm:ss”String
valueFormat当type为datepicker时，组件绑定的值的时间格式，当为’x’时代表时间戳String

searchConfig配置项

属性属性介绍类型
labelWidth标签宽度String
labelPosition标签位置String
gutter各个label之间的间隔Number
colLayOut响应式布局 colLayOut: {xl: 24,lg: 24,md: 24,sm: 24,xs: 24}Object
searchText搜索按钮文本内容String
resetText重置按钮文本内容String
searchFunction获取tableData的逻辑函数Function
formData配置项
属性属性介绍类型
model绑定的model值String
label表单label名称String
type表单项类型，可选：input，password，select，datepicker，image等，需进一步完善String
placeholder表单placeholderString
labelWidth表单label宽度，单独设置String
maxWidth表单项最大宽度，无需加单位String
options当type为select时，选择项配置String
aliasValue当type为select时，value别名String
aliasLabel当type为select时，label别名String
pickerType当type为datepicker时，可以选择datepicker的类型，比如：daterange等详情参见ElementPlusString
format当type为datepicker时，组件显示的时间格式，比如：“YYYY-MM-DD HH:mm:ss”String
valueFormat当type为datepicker时，组件绑定的值的时间格式，当为’x’时代表时间戳String

tableConfig配置项

属性属性介绍类型
callback初始化table数据的回调Function
datasName后端接口返回的table数据的别名String
totalCountAlias后端返回数据的总条数，一般用于表格的分页Number
extendOption表格的属性，参考element-plus中表格的属性Object
isShowIndex是否展示表格index列Boolean
isShowSection是否展示表格section列Boolean
tablePropstableItem每一项的配置Object
tableProps配置项
属性属性介绍类型
proptable数据展示的字段名称String
label表头名称String
align每一项的排列方式String
minWidth表格内容的最小宽度String
width表格固定宽度String
fixed固定表格的哪一列，比如：true / ‘left’ / ‘right’String
formatConfig表格内容处理configObject
operationConfig表格操作项配置，同headerConfig中的operationConfigObject
formatConfig配置项
属性属性介绍类型
typetable数据展示的类型，默认是text类型，可选：“text” “button” “link” “image” “tag”String
format处理数据的回调函数Function
extendsOptions灵活的可扩展项，详情参见ElementPlus的button，link，image，tag配置Object

案例展示

页面效果：

在这里插入图片描述

<template>
  <div class="container">
    <shacoPage :config="config"></shacoPage>
  </div>
</template>

<script lang="tsx">
import { defineComponent, ref } from "vue";
import shacoPage from "@/components/shacoPage/index.vue";
import IForm from "@/components/shacoPage/type";
import { spaceData, spaceDataAdd, spaceDatadel } from "@/api/space";
export default defineComponent({
  name: "HomeView",
  components: {
    shacoPage,
  },
  setup() {
    const config = ref({} as IForm);
    config.value = {
      headerConfig: {
        title: "我的心意",
        isAdorn: true,
        isBottomLine: true,
        adormClass: "adormClass",
        operationConfig: {
          chlidren: [
            {
              label: "新增",
              type: "dialog",
              permission: "la128",
              extendsOptions: {
                // plain: true,
                // type: "primary",
              },
              callback: spaceDataAdd,
              formConfig: {
                colLayOut: {
                  xl: 24,
                  lg: 24,
                  md: 24,
                  sm: 24,
                  xs: 24,
                },
                labelWidth: "150",
                labelPosition: "right",
                dialogConfig: {
                  title: "新增素材",
                  center: true,
                  width: "600px",
                },
                formData: [
                  {
                    model: "material_name",
                    label: "素材名称",
                    type: "datepicker",
                    placeholder: "请输入素材名称",
                    extendOption: {},
                    maxWidth: "300",
                  },
                  {
                    model: "material_type",
                    label: "素材类型",
                    type: "select",
                    placeholder: "请选择",
                    options: [
                      { id: "#", name: "全部" },
                      { id: "PIC", name: "图片" },
                      { id: "VDO", name: "视频" },
                    ],
                    aliasValue: "id",
                    aliasLabel: "name",
                    maxWidth: "300",
                  },
                  {
                    model: "project_id",
                    label: "关联项目",
                    type: "select",
                    placeholder: "请选择",
                    options: [
                      { code: "#", label: "全部" },
                      { code: "8", label: "1昊楼" },
                      { code: "10", label: "ztz002" },
                    ],
                    aliasValue: "code",
                    aliasLabel: "label",
                    maxWidth: "300",
                  },
                  {
                    model: "position",
                    label: "关联位置",
                    type: "select",
                    placeholder: "请选择",
                    options: [
                      { code: "#", label: "全部" },
                      { code: "SY", label: "首页" },
                    ],
                    aliasValue: "code",
                    aliasLabel: "label",
                    maxWidth: "300",
                  },
                  {
                    model: "material_url",
                    label: "图片",
                    type: "input",
                    maxWidth: "300",
                  },
                ],
              },
            },
          ],
        },
      },
      searchConfig: {
        labelWidth: "80",
        labelPosition: "right",
        gutter: 10,
        colLayOut: {
          xl: 6,
          lg: 6,
          md: 12,
          sm: 24,
          xs: 24,
        },
        searchText: "查询",
        resetText: "重置",
        searchFunction: (val: any) => {
          // 这里做一些 获取tableData的逻辑
          console.log(val);
        },
        formData: [
          {
            model: "keyword",
            label: "素材名称",
            type: "input",
            placeholder: "请输入素材名称",
            extendOption: {},
          },
          // {
          //   model: "status",
          //   label: "我的选择",
          //   type: "select",
          //   placeholder: "请选择",
          //   options: [
          //     { code: "#", label: "全部" },
          //     { code: "WCL", label: "待处理" },
          //     { code: "FU", label: "跟进中" },
          //     { code: "EN", label: "完结" },
          //   ],
          //   aliasValue: "code",
          //   aliasLabel: "label",
          // },
          {
            model: "type",
            label: "素材类型",
            type: "select",
            placeholder: "请选择",
            options: [
              { code: "#", label: "全部" },
              { code: "PIC", label: "图片" },
              { code: "VDO", label: "视频" },
            ],
            aliasValue: "code",
            aliasLabel: "label",
          },
          {
            model: "project_ids",
            label: "关联项目",
            type: "select",
            placeholder: "请选择",
            options: [
              { code: "#", label: "全部" },
              { code: "8", label: "1昊楼" },
              { code: "10", label: "ztz002" },
            ],
            aliasValue: "code",
            aliasLabel: "label",
          },
          {
            model: "position",
            label: "关联位置",
            type: "select",
            placeholder: "请选择",
            options: [
              { code: "#", label: "全部" },
              { code: "SY", label: "首页" },
            ],
            aliasValue: "code",
            aliasLabel: "label",
          },
          // {
          //   model: "password",
          //   label: "我的密码",
          //   type: "password",
          //   placeholder: "请输入密码",
          // },
          // {
          //   model: "keyword",
          //   label: "搜索关键词",
          //   type: "input",
          //   placeholder: "请输入搜索关键词",
          // },
          // {
          //   model: "select",
          //   label: "我的选择",
          //   type: "select",
          //   placeholder: "请选择",
          //   options: [
          //     { code: 1, label: "张三" },
          //     { code: 2, label: "莉丝" },
          //   ],
          //   aliasValue: "code",
          //   aliasLabel: "label",
          // },
          // {
          //   model: "date",
          //   label: "时间选择器",
          //   type: "datepicker",
          //   placeholder: "请选择时间",
          //   pickerType: "date",
          //   labelWidth: "100",
          //   format: "YYYY-MM-DD HH:mm:ss",
          //   valueFormat: "x",
          //   maxWidth: "300",
          // },
          // {
          //   model: "date2",
          //   label: "我的选择器",
          //   type: "datepicker",
          //   placeholder: "请选择时间2",
          //   pickerType: "daterange",
          //   labelWidth: "100",
          //   format: "YYYY-MM-DD HH:mm:ss",
          //   valueFormat: "x",
          //   startPlaceholder: "我是开始的placeholder",
          //   endPlaceholder: "我是结束的placeholder",
          // },
        ],
      },
      tableConfig: {
        callback: spaceData,
        datasName: "datas",
        totalCountAlias: "totalCount",
        extendOption: {
          border: true,
          stripe: true,
        },
        isShowIndex: true,
        isShowSection: true,
        tableProps: [
          {
            prop: "url",
            label: "图片",
            align: "center",
            minWidth: "200",
            formatConfig: {
              type: "image",
              extendsOptions: {
                "hide-on-click-modal": true,
              },
            },
          },
          {
            prop: "name",
            label: "素材名称",
            minWidth: "200",
            align: "center",
            formatConfig: {
              type: "link",
              // extendsOptions: {
              //   type: "primary",
              //   target: "_blank",
              //   href: "https://www.baidu.com",
              // },
              // format: (val: any, allVal: any) => {
              //   return val + "link";
              // },
            },
          },
          {
            prop: "typeVal",
            label: "素材类型",
            minWidth: "200",
            align: "center",
            // formatConfig: {
            //   type: "tag", // "text" "button" "link" "image" "tag"
            //   extendsOptions: {
            //     target: "_blank",
            //     href: "https://www.baidu.com",
            //   },
            //   format: (val: any, allVal: any) => {
            //     let arr = [];
            //     for (let i = 0; i < val.length; i++) {
            //       if ((i + 1) % 2 == 0) {
            //         arr.push(val[i]);
            //       }
            //     }
            //     return arr;
            //   },
            // },
          },

          {
            prop: "positionVal",
            label: "素材位置",
            align: "center",
            minWidth: "200",
          },
          {
            prop: "linkTypeVal",
            label: "链接类型",
            align: "center",
            minWidth: "200",
          },
          {
            prop: "linkUrl",
            label: "链接",
            align: "center",
            minWidth: "200",
          },
          {
            prop: "statusVal",
            label: "关联项目",
            align: "center",
            minWidth: "200",
            // formatConfig: {
            //   format: (val: any) => {
            //     return val + "123";
            //   },
            // },
          },
          {
            prop: "createTime",
            label: "创建时间",
            align: "center",
            minWidth: "200",
            formatConfig: {
              // type: "button",
              // extendsOptions: {
              //   type: "primary",
              //   size: "small",
              //   plain: true,
              // },
              format: (val: any) => {
                console.log(val, "val");
                let date = new Date(val);
                return (
                  date.getFullYear() +
                  "-" +
                  (date.getMonth() * 1 + 1) +
                  "-" +
                  date.getDate() +
                  " " +
                  date.getHours() +
                  ":" +
                  date.getMinutes() +
                  ":" +
                  date.getSeconds()
                );
              },
            },
          },
          // {
          //   prop: "status",
          //   label: "状态",
          //   align: "center",
          //   minWidth: "200",
          //   formatConfig: {
          //     type: "button",
          //     extendsOptions: {
          //       type: "primary",
          //       size: "small",
          //       plain: true,
          //     },
          //     format: (val: any, allVal: any) => {
          //       return val + "999";
          //     },
          //   },
          // },
          {
            label: "操作",
            align: "center",
            width: "150",
            fixed: "right",
            operationConfig: {
              chlidren: [
                {
                  label: "编辑",
                  type: "dialog",
                  permission: "la123",
                  callback: spaceDataAdd,
                  formConfig: {
                    colLayOut: {
                      xl: 24,
                      lg: 24,
                      md: 24,
                      sm: 24,
                      xs: 24,
                    },
                    labelWidth: "150",
                    labelPosition: "right",
                    dialogConfig: {
                      title: "编辑素材",
                      center: true,
                      width: "600px",
                    },
                    editInitKey: [
                      "name",
                      "type",
                      "projectId",
                      "position",
                      "url",
                    ],
                    formData: [
                      {
                        model: "material_name",
                        label: "素材名称",
                        type: "input",
                        placeholder: "请输入素材名称",
                        extendOption: {},
                        maxWidth: "300",
                      },
                      {
                        model: "material_type",
                        label: "素材类型",
                        type: "select",
                        placeholder: "请选择",
                        options: [
                          { code: "#", label: "全部" },
                          { code: "PIC", label: "图片" },
                          { code: "VDO", label: "视频" },
                        ],
                        aliasValue: "code",
                        aliasLabel: "label",
                        maxWidth: "300",
                      },
                      {
                        model: "project_id",
                        label: "关联项目",
                        type: "select",
                        placeholder: "请选择",
                        options: [
                          { code: "#", label: "全部" },
                          { code: "8", label: "1昊楼" },
                          { code: "10", label: "ztz002" },
                        ],
                        aliasValue: "code",
                        aliasLabel: "label",
                        maxWidth: "300",
                      },
                      {
                        model: "position",
                        label: "关联位置",
                        type: "select",
                        placeholder: "请选择",
                        options: [
                          { code: "#", label: "全部" },
                          { code: "SY", label: "首页" },
                        ],
                        aliasValue: "code",
                        aliasLabel: "label",
                        maxWidth: "300",
                      },
                      {
                        model: "material_url",
                        label: "图片",
                        type: "input",
                        maxWidth: "300",
                      },
                    ],
                  },
                },
                {
                  label: "删除",
                  type: "dialog",
                  permission: "la124",
                  callback: (val: any) => {
                    return spaceDatadel({ id: val.id });
                  },
                },
              ],
            },
          },
        ],
      },
    };

    return {
      config,
    };
  },
});
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
}
</style>
小张很嚣张～
关注
专栏目录
DevEco低代码开发文档
坚果的博客
08-18 4191
DevEco低代码（Web版）开发元服务DevEco低代码
微搭低代码小程序模板体验
低代码布道师的博客
12-16 852
最近学习低代码貌似成果不太明显，光是从模板中心学习感觉不成体系，琢磨了一下还是学习一下商用的模板，有一套完整的解决方案更利于理解低代码的概念。 如何下手呢？先从入口开始，进入模板，选择我的模板 点击购买模板，从商城里找一套自己喜欢的安装 看了一下，觉得宠物店这个不错，贴近生活，我们选择试用7天 试用之后就会将模板安装到你自己的环境中，点击安装 安装完毕之后我们就可以看到应用里多了一个小程序 打开应用后就可以看到我们购买的小程序了 我们可以实时预览一下在浏览器查看一下效果 模板安装好之后我们就可
优维低代码：Custom Templates 自定义模板
EasyOps_DevOps的博客
08-09 512
在内部构件的属性中引用 TPL.* 时，只能在构件初始时拿到其初始值，此时该属性变量相当于一个常量，当模板实例的对应属性在运行时重新赋值时，该内部构件的属性不会发生变化。Custom Templates 可以代理内部构件的属性、事件、插槽和方法，以此实现将 Storyboard 上为该模板配置的属性和事件等映射到模板内部的指定构件上。当使用 mergeProperty 时，属性是从模板到内部构件单向流动的，即如果直接更改内部构件的相关属性，无法影响直接从模板读取的属性。...
低代码平台系统设计详解
最新发布
lssffy的博客
08-10 848
低代码平台是为快速构建应用程序而设计的开发工具，旨在减少编码需求并简化开发流程。通过直观的可视化界面，用户可以使用拖放式操作创建应用程序，并利用预构建的组件库和自动化工具显著提高开发效率。自定义组件开发允许用户根据自身需求扩展低代码平台的功能。平台应支持用户创建、分享和复用自定义组件，以满足特定的业务需求。低代码平台正在快速成为企业数字化转型的重要工具。通过降低开发门槛、提升开发效率，低代码平台使得企业能够更快地响应市场变化和业务需求。
带你一步步实现低代码开发平台——低代码配置模块视图配置功能详解
学海无涯，行者无疆
05-25 2653
对于大多数业务实体管理，在系统中有个功能菜单对应，最常见的情况就是一个列表页面，如接口平台模块下的应用管理功能，如下图所示该页面对应着列表视图，包括了常见的查询、新增、修改、查看页面（删除功能不是一个页面，而仅是一个功能按钮，位于列表页面）,对应着新增视图、修改视图和查看视图。列表视图是最常用，也是最复杂的，下面具体来说一下。对于自关联的实体，如组织机构，实际数据是有层次，会展示为一棵树。该视图通过实体模型属性中的是否上级就可以自动处理，无需额外配置。
前端低代码平台H5-Dooring使用文档
gallonyin的博客
07-04 4379
H5-Dooring使用文档 本文档旨在帮助开发人员快速入门H5-Dooring低代码开发平台。H5-Dooring是一款功能强大，高可扩展的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。 所见即所得，无需编程，简单拖拽可视化模板或组件，即可生成精美H5页面。代码可移植，平台生成的H5前端代码，可植入任何系统，且支持二次开发。自动云同步，在线制作H5，登录账号同步保存，无需下载客户端。...
无代码系统搭建平台 低代码快速开发平台 3.4.5 版本开发框架源码部署文档入门说明
2301_76205806的博客
02-20 205
内置了强大的表单引擎、流程引擎、报表引擎，通过自动化业务机器人Q-Robot进行串联，并且提供了丰富的拓展插件以及开放接口，“乐高式”的操作体验让你的想法立刻成为现实。企业信息化，有轻流就够了。通过业务流程自动化，积累大量业务数据。设置可实时查看的报表、仪表盘 让你从各方面一目了然业务现状，工作效率成倍提升。丰富的插件组合，让轻流深入您工作的方方面面，我们正努力推出更多的插件，不断拓展轻流的能力边界 为企业的业务效率赋能。创新强悍的工作流引擎，为业务高效流转提供了坚实的技术支持。
低代码开发，手写一款代码生成工具
千里之行，始于足下
08-11 1611
低代码平台的一个核心就是，使用可视化的操作，生成项目系统中的非核心代码，从而大大降低了重复代码的编写工作，使开发者们可以更加专注于核心代码和业务功能的设计和开发工作。
低代码开发文档
zouyang920的博客
04-24 259
JeecgBoot还独创在线开发模式（No代码概念）：在线表单配置（表单设计器）、移动配置能力、工作流配置（在线设计流程）、报表配置能力、在线图表配置、插件能力（可插拔）等等！Shiro、MyBatis、Thymeleaf）主要目的让开发者注重专注业务，降低技术难度，从而节省人力成本，缩短项目周期，提高软件安全质量。代码下载：https://gitee.com/y_project/RuoYi。版本日志： http://www.jeecg.com/doc/log。
低代码开发平台文档更新
hyz792901324的博客
04-05 480
hyz (hyz79) - Gitee.com
低代码平台快速开发小程序.docx
02-19
低代码平台快速开发小程序
【低代码】1655- 百度开源的低代码前端框架，支持网页和移动端页面开发
pingan8787
04-16 530
amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂npm、webpack、react/vue，必须熟悉ES6语法，最好还了解状态管理，比如Redux，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的生态，相关的库有...
腾讯云低代码开发实战教程-需求分析
低代码布道师的博客
02-28 823
低代码技术简介 低代码平台作为2021年新的技术热点领域，越来越得到技术界的关注，那什么是低代码，低代码平台又能带来哪些好处呢？ 低代码平台是一种在线可视化拖拽开发的工具，改变了以往开发需要程序员在本地写代码的方式然后再部署到服务器上的模式。通过拖拽开发，所见即所得，对于业务交互也可以写少量的代码。 低代码平台首先降低了开发门槛，无技术开发经验的普通人经过学习也能掌握，人人都能开发应用。其次因为是在线开发，可以保护客户的既有投资，可以快速地响应客户的需求。依托于云计算新的发展，如k8s、severless，
java组建式开发_Java web 如何搭建低代码开发模式或架构？
weixin_36350504的博客
02-25 645
低代码开发和无代码开发的产品出来不久了，比如简道云这种，但是这些是基于第三方，数据也在第三方服务器中。我不放心，我自己也想搭建一个低代码开发应用，主要的目的为自己是以后开发一些简单或常用的业务模块想省一点时间，比如表单提交，增删改查的表格，数据统计，单文件上传等把这些常用的操作界面抽象化模板，甚至是前端写数据库查询操作语句或数据验证 js 代码，并通过鼠标点点点与 ui 控件的事件进行绑定等。目前...
天画项目-低代码平台-总体设计与实现
程序男的专栏
12-27 5672
一、背景&需求 1.1 总体背景 我在业余时间构建了一个租房平台，采用springboot微服务的架构模式，同时结合服务化思想进行代码实践，但是由于存在很多重复且低效的变更导致业余时间对这个租房平台的进度产生影响。作为开发人员长期维护一个业余项目产生了很多进度延迟和效率问题会导致项目项目被遗弃的概率增大，对开发者来说也是一个非常沮丧的事情。为了避免这种事情发生，我一方面鼓励自己尽量每天贡献代码，并在合适的时间构建提高开发效率的使用平台。另一方面也是为了借助这个租房平台进行微服务+分库分表+DDD
前端低代码工具amis使用文档
gallonyin的博客
05-30 9925
amis使用文档 本文档旨在帮助开发人员快速入门amis低代码开发平台。amis 是一个百度出品的低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。安装node.js。单击组件栏，选择功能中的增删改查并拖动到内容区中。
Web前端低代码介绍的ppt大纲
Edwardyd的博客
03-27 778
低代码开发概述低代码开发指的是一种采用可视化界面、拖拽式编排和少量编程的开发方式，使得企业的业务部门和非专业开发人员能够快速地创建和发布应用程序。与传统的编程模式相比，低代码开发的核心思想在于将大量繁琐的开发工作交由平台自动化完成，而开发人员则能够集中精力进行业务逻辑的设计和功能实现，从而大幅度提高开发效率和软件质量。低代码开发的特点可视化编排：低代码开发平台通常会提供可视化的界面设计器，让开发人员通过拖拽、组件配置等方式，快速搭建界面和功能模块，从而提高开发效率。自动化代码生成。
带你一步步实现低代码开发平台——低代码配置模块视图功能总体设计
学海无涯，行者无疆
05-22 3410
上一篇介绍了整合接口平台，架构优化，使用低代码配置模块、实体、模型，今天接着上篇继续写，重点介绍下视图整体的设计。 视图，实际上也就是前端web页面，这部分超级复杂。根据用途不同，将视图进行了分类，建模产生以下类型的视图 - 列表视图 - 新增视图 - 修改视图 - 查看视图 - 树视图 - 树表视图 - 参照视图 - 树参照视图 - 树表参照视图 - 主从视图（待实现） - 自定义视图（待实现）
带你一步步实现低代码开发平台——概述、实现模式、整体框架
热门推荐
学海无涯，行者无疆
04-24 1万+
当下，低代码与无代码的概念正炙手可热，市面上涌现了众多相关平台。客观而言，低代码开发平台确实通过配置化的方式显著提升了开发效率，降低了成本，并缩短了项目周期。同时，这种开发方式也降低了对开发人员的技能要求，所生成的代码更为标准化，有效减少了低级错误，间接提升了软件质量。然而，低代码开发并非是一个全新的概念，其历史可追溯至较早时期。在一个软件系统中，许多功能具有共性，这些功能可以通过抽象建模和标准化来简化开发流程。例如，单实体（如计量单位）对应单张数据表，展示和操作方式相对简单；
低代码热度分析
低代码布道师的博客
02-18 423
我们利用百度指数分析一下目前低代码的技术热度 搜索指数 关键词我们选取了小程序、简道云、明道云、氚云、宜搭，总体看小程序的热度还是高的，第二位是简道云，其余三位基本一致 需求图谱 小程序的话商城小程序的热度在上升，总体看还是集中在微信小程序上 其余几家其实是互相关联的，大部分在无代码和低代码这个技术领域里 人群画像 基本上这个技术栈还是集中在沿海的省份，内陆很少 人群的话主要集中在20-29岁之间，当然30-39也比较多，性别的话关注的男性居多 总结 通过几个关键词的对比分析，目前无论是小程序还
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小张很嚣张～

支持一下小老弟吧～

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值