后端给前端提供渲染组件

本文探讨了在特定情况下,后端如何为前端提供组件渲染的实现思路。通过后端定义组件,可以减少前端对不同类型组件的维护,提高通用性。举例说明,如在展示不同类型people时,后端定义各种配置,前端直接获取并渲染。
摘要由CSDN通过智能技术生成

缘由

一般意义上前端的组件具体内容(如输入框、纯文本、复选框、下拉框等)均由前端自行定义渲染,但在某些时候,为了日后或当前已有的过多类型的通用性,我们也可以将某一部分的可配置组件交由后端定义,如此各类型下的可配置属性仅需后端一方维护;前端则可以直接获取到该类型下的一系列组件定义后直接渲染即可

实现思路

例如,某项目下有多种不同类型的 ”people“ 需要进行基本信息及可配置的信息展示,不同类型 people 的基本信息相同,均包括姓名、性别、年龄等;同时,根据身份的不同,需要对各个类型配置一些不同的其他信息。例如对学生需要配置下拉框单选学习级别、下拉复选框配置已选课程、checkbox配置是否已毕业等;而对老师需要输入框配置工作签名、下拉框配置教授课程、下拉框配置职称等

此时,不同于传统的创建父类 people ,子类 student、teacher,再根据各自属性设定相应的特征字段,同时前端根据获取到的数据类型,做出不同的组件渲染,我们可以采用由后端定义组件的方式,将所有类型的 people 抽象成单一的具备一个称作 setting 字段的 people 类

举个栗子

{
   "nodeType": "学生",
   "iconName": "图标名称",
   "name": "这是学生的名字",
   "info": "学生的介绍信息",
   "setting": 
    [{
        "defaultValue": "options 中的默认值",
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值