{"repo":"ahyiru/web-design","free":true,"listed":false,"github":"https://github.com/ahyiru/web-design","clone":"git clone https://github.com/ahyiru/web-design.git","description":"Low-Code development platform.","language":"JavaScript","stars":178,"topics":["dashboard","hooks","low-code","react","webgl","webpack","jsonschema","express","full-stack","mongoose"],"license":"MIT","category":"workflow-automation","readme_excerpt":"低代码（low-code）简单实践 Web Design 是一个简单的低代码开发平台，用于快速搭建项目、开发页面、配置接口等。 Web Design 使用可视化操作生成页面描述 json schema ，然后通过自定义规则将 json schema 渲染成目标页面来实现页面可视化开发。 Web Design 基于 huxy-admin 模板创建。除了提供页面可视化搭建，还包含了工程化配置、主题设计、Layout 设计、API 配置、权限和 i18n 配置等。 详细功能介绍：系统功能 理解 低代码就是尽量 少写代码 ，定义好业务组件，通过可视化操作实现开发工作。它主要受众是开发者。 无代码（no-code）即不需要写代码就能完成开发，更加偏向业务层的定制。 解决了什么？ 提效降本、质量保障、降低开发门槛。 低代码可以提升开发效率，保障系统稳定性，也降低了开发门槛，可以直接可视化开发。 可能存在的问题 - 不灵活。适用于通用业务领域，对定制化需求不友好。 - 不可控。业务拓展性、可维护性较低。 - 不好用。开发不想用，业务不会用。 低代码或许可以降低开发门槛，但复杂度并不会降低。可视化开发的自由度越高，组件粒度就越细，配置复杂度就越高。 简单实践 前端低代码开发不仅是界面开发，应该还包含工程化、项目管理、api 接口、权限控制等一些列的开发提效。 设计 一个页面其实就是一棵树，所以不管是拖拽还是配置，最终完成的就是一棵数据树。所以我们可以通过 json schema 来进行页面设计。 实现 基础搭建 工程化、layout 设计、权限和 i18n、API 管理 这些都是一些管理平台的基础设施，前面也讲过，大家可以去看看。 页面设计 schema 设计 - type：标签名或组件名。组件可以是 UI 组件或业务组件，先注册再使用。 - props：属性配置。组件的属性可根据组件库或自定义组件使用文档去配置。如果属性里面含有组件，可依照 schema 渲染原则执行。 - children：子节点。可以是文本节点，组件，或子元素列表。 custom render - components：我们注册的组件。 - formatProps、formatChildren：将 props 或 children 转换为我们需要的运行时的值。主要用于我们自定义的组件。props 或 children 可以是函数，可以传递我们需要的参数 params，最终返回我们需要的数据。 - render：通过 react 的 createElement(type,props,...children) 渲染。 属性解析 可使用自定义函数，组件内部数据作为参数，来获取属性值。或直接使用全局 configs。 例如： 通过 {code} 将 code 字符串转换为运行时代码。 判断并提取字符串代码 执行字符串代码 str2code 会直接执行并返回结果，如果返回的是函数会执行函数并返回结果。如果我们需要返回函数，就要包裹一层函数。例如： onClick ， {()= e= alert('hello')} 。 路由设置 路由配置可直接在页面配置，存入后台，使用时获取路由配置即可。 如果整个系统都是通过 schema 数据配置生成的，那么我们只需一个渲染器，通过路由 id 获取到 shcema 数据，然后渲染成当前路由页面。所以只需一个渲染文件即可。 根据 projectId 、 routerId 获取路由页面数据。 通过设置路由 loadData 来提前请求数据，页面直接获取即可。详细使用见","default_branch":null,"files":null,"tree":[],"storefront":"/r/ahyiru","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/ahyiru/web-design/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}