皮皮网

1.基于 VUE3 可视化低代码表单设计器
2.flask-wtf

基于 VUE3 可视化低代码表单设计器

       格子表单/GRID-FORM已在Github开源，自定如能帮到您麻烦给个星点此查看在线文档及演示

       楔子

       大概4年前，义表源码我做了一个简单的单系定义动态表单功能，开发人员通过UI界面配置表单（其实就是统源添加常用的控件，如文本框、码自下拉框等）就能向用户提供数据查询，表单云课堂智慧职教源码怎么用反响不错，系统尤其是设置偏后端开发的小伙伴。

       时至今日，自定上述功能存在以下问题：

       目前书面上已经有不少优秀开源的义表源码同类产品，这里列出可二次开发的单系定义，同时具备表单渲染、统源表单设计的码自工具（截止至年底）

       再造个轮子吧

       同类型的开源产品各有千秋，适合不同的表单应用场景，然而跟我想要的系统千库源码还不够契合。权衡后，还是觉得自己弄一个。技术选型为vue3 + naive UI，使用pnpm进行包管理（monorepo结构）。

       不同于同类型产品的组件拖拽，我采用栅栏布局来堆积组件（实现起来简单，省事，暂不支持容器嵌套、子表单），通过设置组件占据的格子数可以使其独占一行，故取名GRID-FORM（栅栏表单），源码详见Github。

       表单设计器

       得益于VUE的响应式，设计器所见即所得显得尤为丝滑，通信串口源码不然得自己手撸监听配置项变动事件及界面重绘。

       编辑器分为左中右三个区域（这是业内约定俗成的标准设计），有别于兄弟产品，我把左区域用作表单整体的参数编辑。为方便用户自定义组件，设计器对外暴露组件库参数，并封装了常用的组件（诸如输入框、单选/多选框、日期选择）。

       组件分为数据型（对应上图中的输入组件、选择组件）及展示型（上图的展示组件）两类，后者不参与表单提交。

       渲染器组件渲染

       每个组件有唯一编号，渲染函数为一个Object（key即为组件编号），opencv sad源码需要扩展组件时添加对应的渲染函数即可。渲染时属性分为基本信息（名称我用_开头加以区分）及组件层面两类，分别对应了组件渲染函数的两个参数：attrs、props。

       渲染引擎处理完属性后，调用Render函数（不同UI库各自实现，使用者可根据业务需要自行覆写）得到组件实例。此处以文本输入框INPUT为例：

       默认值

       表单项默认值可以填写常量或占位符（在初始化时被模板引擎赋值），占位符格式为${ code}，用户可自行扩展处理函数。

       校验

       此处校验分为非空、内容格式两种

       当表单项勾选是否必填，则在提交前渲染器会对该值进行非空检测；若设置了校验正则，则对非空值进行正则表达式校验。google blockly源码

       事件&钩子函数

       参数说明

       数据联动

       常规的做法是输入类表单项增加事件（如onChange、onBlur、onFocus等），但是这样操作（实现）繁琐（困难），我的做法只需要填写一处代码（直观简单）

       要启用联动需要满足以下条件：

       渲染器初始化后，会对勾选监听值变动的表单项开启监听（没错，是每个表单值有独立的监听）从而获取到新旧值。注意，若在回调函数中对form改动会重新触发onChange事件。

       示例

       适配更多UI库

       目前已实现Naive UI、Vant4的渲染器

       我封装了渲染器的基础框架（组合式API），帮助使用者根据需要快速适配心仪的UI库。

       结语

       因个人能力有限，此工具在设计、实现上存在诸多不足，仅作学习交流。

flask-wtf

       在第四天的学习中，我们探讨了web框架中的表单库，特别是在Flask框架中的应用。简单的HTML表单难以满足安全性需求，因此有了Flask-WTF库的支持，它提供了在模板中渲染表单的便利，同时在验证表单数据和CSRF保护上表现出色。

       使用Flask-WTF时，首先需要安装作为第三方依赖。初始化后，开发人员可以设计自定义表单类，并在HTML模板中渲染它们。通常，表单类设计遵循Flask-WTF的规范，例如使用`FlaskForm`代替`Form`，并确保应用的`secret_key`，以解决CSRF保护问题。

       在表单使用中，有几种常见逻辑：针对GET请求，一般返回模板HTML，而对于POST请求，则验证表单数据。如果验证失败，错误信息会被捕获并在模板中呈现。

       在进行表单验证时，Flask-WTF提供了如`DataRequired`等校验规则。若表单字段未输入值，则提交时会显示错误提示。渲染后的页面在浏览器的开发者工具中可能难以直接查看源代码，这是因为模板中可能缺少全局和body标签，这实际上是一种保护机制，确保页面的HTML结构不会轻易被恶意访问。

       在表单的HTML设计中，`hidden_tag`用于生成CSRF防护的隐藏字段，而`form.csrf_token`也可实现相同功能。此外，`form.num.errors`用于显示特定字段的错误信息，便于在模板中呈现给用户。

       Flask-WTF在表单方面的应用不仅仅局限于基础的表单构成和渲染，它还提供了丰富的表单字段类型和校验函数。例如，文本输入框、下拉列表、文件上传等，这些功能通过WTForms的第三方插件实现。

       实现文件上传功能，通过设计表单字段和定义路由来完成。HTML中添加文件上传功能，使用如`pathlib`中的`join`接口处理路径时，可能会遇到兼容性问题。解决方法是在保存文件时使用相对路径，确保上传文件正确保存至项目根目录下的`upload`文件夹中。

       在使用Flask-WTF进行文件上传时，要注意一些操作细节。例如，正确处理上传路径、使用合适的文件保存位置等。通过实践，可以发现这些细节对于确保应用的稳定性和安全性至关重要。在部署应用时，应特别注意表单处理中的潜在问题，确保应用的健壮性和用户体验。