优维低代码实践:模板

这篇具有很好参考价值的文章主要介绍了优维低代码实践:模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

优维低代码实践:模板,低代码,低代码技术,低代码开发平台

 优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

优维低代码实践连载第⑥期

《模板》

Visual Builder 提供模板能力,您可以将单个或多个构件进行排列组合,组装成您想要的模板,并在需要的地方引入;模板通常被认为是一种具有通用性,并带有一定复用能力的构件;使用模板,让我们不用每次编排都需要从头零开始编排,不需要每次都创建一堆之前已经创建过的实例,减少了重复劳动的工作,并且可以提高程序的健壮性。

下面我们将讲解它是如何使用的。

进入到我们的工程项目中,现在我们收到一个需求,我们需要将新建,编辑任务详情从弹窗编辑的形式做成新的独立页面编辑,在新的页面中也要使用到这个表单,并且结构完全一致;这个时候,我们可以选择将其转化为模板,这样的话,其他页面就可直接引用这个模板并快速使用啦,那么我们要怎么做呢?跟着我的步骤往下操作吧~

一、模板创建

1.1 构件转化为子模板

优维低代码实践:模板,低代码,低代码技术,低代码开发平台

优维低代码实践:模板,低代码,低代码技术,低代码开发平台 

 点击确认后会自动跳转至新创建的模板页面,如下:

优维低代码实践:模板,低代码,低代码技术,低代码开发平台

 

然后在构件树上点击 tpl-task-form, 看到右侧参数面板,将代理设置改成如下:

1.2 tpl-task-form 模板代理设置修改

# 模板代理,可代理属性,事件,方法,插槽
# 模板等同于一个黑盒,对外只暴露特定接口字段
# 需要通过 ref 指向构件,并且构件需要配置相应的 ref,才能够正确代理出去
# 下面的含义为, 代理ref等于form的构件,
# 代理其事情: validate.error, validate.success
# 代理其方法: setInitValue, validate
# 这个,我们就可以在模板对这个构件进行监听,也可以在外层执行它里面构件的方法
# 具体使用在下面教程会讲述
events:
  validate.error:
    ref: form
    refEvent: validate.error
  validate.success:
    ref: form
    refEvent: validate.success
methods:
  setInitValue:
    ref: form
    refMethod: setInitValue
  validate:
    ref: form
    refMethod: validate

1.3 DATA 数据新增

# 模板的属性,如同构件的属性一样,需要通过外层传入,模板才能正确使用
# 与页面不同,页面的变量存储在 CTX 中,而模板的变量存储在 STATE 中,
# 获取方式不一样,这里
数据名称: isEdit
类型: Value
Value: false


# ======= 分割线 ========
数据名称: staticValues
类型: Value

1.4 Form 编排修改

属性面板-属性:
  # 删除ID,在模板内尽量不要使用ID
  # 因为同个页面,可能使用到多个相同目标,这将导致页面中存在多个相同ID的元素
  # 导致匹配不精准
  layout: horizontal
事件面板-事件:
  # 清空
设置面板:
  # 重点: Ref 为模板内构件的特殊字段, 模板内代理的唯一标识
  # 可以理解为模板内的ID
  Ref: form

在一切修改完之后,记得点击 build & push 按钮哟~

二、编排修改

2.1 新增路由

基于UI8.0 空白页创建两个路由页面,分别是:

别名: 新增任务
path: APP.homepage/task/add
别名: 新增任务
path: APP.homepage/task/:instanceId/edit

2.2 新增任务页面编排修改

在 general-card 构件下新增 tpl-task-form(tips: 刚刚新增的模板) 构件,属性如下:

属性面板-属性:
  id: form
事件面板-事件:
  validate.success:
    - useProvider: providers-of-cmdb.instance-api-create-instance
      args:
        - TASK_FOR_VB_LESSON
        - |-
          <%
            {
              ...EVENT.detail,
              state: "待研发",
            }
          %>
      callback:
        success:
          - action: message.success
            args:
              - 任务创建成功
            # 页面回退
          - action: history.goBack
        error:
          - action: handleHttpError

在 general-card 下面新增 forms.general-form 构件,在其底下新增构件 forms.general-buttons,属性如下:

属性面板-属性:
  cancelText: 取消
  showCancelButton: true
  submitText: 提交
事件面板-事件:
  cancel.button.click:
    # 页面回退
    action: history.goBack
  submit.button.click:
    # 点击确定按钮,调用表单校验方法
    - target: '#form'
      method: validate

回到任务列表,找到添加按钮, 修改其属性:

事件面板-事件:
  general.button.click:
    # 点击添加任务按钮,跳转路由,到添加任务页面
    - action: history.push
      args:
        - '<% `${APP.homepage}/task/add` %>'

2.3 编辑任务页面编排修改

在 general-card 构件下新增 tpl-task-form(tips: 刚刚新增的模板) 构件,属性如下:

属性面板-属性:
  id: form
  isEdit: true
事件面板:
  事件:
    validate.success:
      - useProvider: providers-of-cmdb.instance-api-update-instance
        args:
          - TASK_FOR_VB_LESSON
          - <% PATH.instanceId %>
          - |-
            <%
              _.pick(EVENT.detail, [
                "name",
                "state",
                "assignee",
                "reporter",
                "time",
                "description",
              ])
            %>
        callback:
          success:
            - action: message.success
              args:
                - 任务修改成功
            - action: history.goBack
          error:
            - action: handleHttpError
  生命周期:
    onPageLoad:
      # 在页面加载后,请求获取实例详情的接口
      - useProvider: providers-of-cmdb.instance-api-get-detail
        args:
          - TASK_FOR_VB_LESSON
          - <% PATH.instanceId %>
        callback:
          success:
            # 数据回来后,设置表单的初始值
            - target: '#form'
              method: setInitValue
              args:
                - <% EVENT.detail %>
          error:
            - action: handleHttpError

新增构件 forms.general-form 构件,在其底下新增构件 forms.general-buttons,具体属性同 2.2 一致。

回到任务列表页面,在 table 下定位到编辑按钮,属性修改如下:

事件面板-事件:
  general.button.click:
    # 点击事件,跳转到编辑页面
    - action: history.push
      args:
        - <% `${APP.homepage}/task/${DATA.rowData.instanceId}/edit` %>

三、结语

由于我们在本章节中学习并使用了模板的能力,因此我们在新建页面时,可以快速使用模板进行页面的编排,这大大加快了我们的页面编排速度。

本章节中讲解了构件如何转化成子模板,以及相应的编排修改,另外我们也可以自己不通过构件转化,可以直接新建模版,添加构件,这里就不做展开了;可以自己查看相应文档进行学习,那么模板章节就到此结束啦,下节课我们讲解下菜单的配置使用以及面板屑的配置。文章来源地址https://www.toymoban.com/news/detail-595798.html

到了这里,关于优维低代码实践:模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 优维低代码实践:统计视图

      优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。 优维低代码实践连载第⑩期 《统计视图》

    2024年02月16日
    浏览(64)
  • 优维低代码实践:对接数据

    优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。 优维低代码实践连载第13期 《对接数据》 ▽

    2024年02月14日
    浏览(44)
  • 优维低代码实践:权限设置

     优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。 优维低代码实践连载第⑨期 《权限设置》 ▽

    2024年02月15日
    浏览(36)
  • 优维低代码实践:Context / State

     优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。 优维低代码实践连载第12期 《Context / State》

    2024年02月13日
    浏览(38)
  • 优维低代码实践:面包屑配置以及菜单配置

     优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。 优维低代码实践连载第⑦期 《面包屑配置以

    2024年02月10日
    浏览(44)
  • 从技术创新到应用实践,百度智能云发起大模型平台应用开发挑战赛!

    大模型已经成为未来技术发展方向的重大变革,热度之下更需去虚向实,让技术走进产业场景。在这样的背景下,百度智能云于近期发起了“百度智能云千帆大模型平台应用开发挑战赛”。 在不久前的演讲中,百度创始人、董事长兼首席执行官李彦宏表示,AI 原生应用要能解

    2024年02月07日
    浏览(53)
  • 关于表单快速开发低代码技术平台的内容介绍

    运用什么样的表单快速开发软件平台可以实现高效率创收?随着科技的进步和飞速发展,专业的低代码技术平台已经走入了很多企业的办公职场中,它们灵活、轻量级、优质、高效、易维护等优势特点,可以高效助力广大企业提质增效,并且利用数据资源,实现流程化办公。

    2024年02月07日
    浏览(61)
  • 【云原生技术】高效、灵活、易于使用的低代码快速开发平台源码

    PaaS低代码快速开发平台是一种快速开发应用系统的工具,用户通过少量代码甚至不写代码就可以快速构建出各种应用系统。 随着信息化技术的发展,企业对信息化开发的需求正在逐渐改变,传统的定制开发已经无法满足企业需求。低代码开发平台,让开发者可以基于平台快

    2024年02月14日
    浏览(51)
  • 讯飞开放平台--星火认知大模型--开发技术文档--js实例代码详解

            之前调用写过调用百度的文心一言写网站,讯飞的星火认知模型开放了,这次尝试一下使用流式来进行用户的交互。 平台简介 | 讯飞开放平台文档中心 星火认知大模型Web文档 | 讯飞开放平台文档中心         本文章主要开发的是一个web应用。 值得一提的是官网

    2024年02月09日
    浏览(53)
  • 【AI大模型应用开发】【LangFuse: LangSmith平替,生产级AI应用维护平台】0. 快速上手 - 基本功能全面介绍与实践(附代码)

    大家好,我是同学小张,日常分享AI知识和实战案例 欢迎 点赞 + 关注 👏, 持续学习 , 持续干货输出 。 +v: jasper_8017 一起交流💬,一起进步💪。 微信公众号也可搜【同学小张】 🙏 本站文章一览: 前面我们介绍了LangChain无缝衔接的LangSmith平台,可以跟踪程序运行步骤,提

    2024年03月21日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包