阿里出品的表单渲染引擎，生产力必备工具-form-r

阿里出品的表单渲染引擎，生产力必备工具-form-render

绍

form-render是阿里开源的跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面，常用于自定义搭建配置界面生成。

支持 Ant Design 和 Fusion Design 主流的视觉主题

使用 JSON Schema 标准协议描述表单配置，并搭配丰富类型且可扩展的组件

支持 1 排 N、横纵排、支持对象无限嵌套、自定义正则校验、自定义样式组件、列表拖拽等特性

已在淘宝、天猫、飞猪、亚博科技、安全智能、新零售行业工作台、人工智能实验室、安全智能部门等多 BU 多场景使用，简单使用同时支持复杂场景使用

使用上有详细文档，维护上有专人支持

Github

https://alibaba.github.io/form-render/#/

安装

npm i form-render -S

import React from "react";
import ReactDOM from "react-dom";
// 使用 Ant Design 体系
import FormRender from "form-render/lib/antd";

// 使用 Fusion Design 体系
// import "@alifd/next/dist/next.min.css";
// import FormRender from "form-render/lib/fusion";

// propsSchema 使用标准的 JSON Schema 来描述表单结构
const propSchema={
 type: "object",
 properties: {
 dateDemo: {
 title: "时间",
 type: "string"
 }
 }
};

// uiSchema 可以增强展示类型的丰富性，如时间组件
const uiSchema={
 dateDemo: {
 "ui:widget": "date"
 }
};

class App extends React.Component {
 constructor() {
 super();
 this.state={
 formData: {}
 };
 }

 // 数据变化回调
 onChange=value=> {
 this.setState({
 formData: value
 });
 };

 // 数据格式校验回调
 onValidate=list=> {
 console.log(list);
 };

 render() {
 const { formData }=this.state;
 return (
 <FormRender
 propsSchema={propSchema}
 uiSchema={uiSchema}
 formData={formData}
 onChange={this.onChange}
 onValidate={this.onValidate}
 />
 );
 }
}
const rootElement=document.getElementById("root");
ReactDOM.render(<App />, rootElement);

文档API

常用API

不常用API

form-render原理

FormRender 底层引擎用原生 JS 来实现，通过解析 JSON Schema 配置，并支持渲染原生的 HTML 表单，通过 UiSchema 来配置 Widget 组件，在此基础上处理好上层 Ant Design 或 Fusion 组件 Widget 和 Input Format 的对应关系，最后还可以做到无缝接入其他组件体系的好处

使用场景

1. 规范化表单视图的快速生成：写好对应的参数配置，快速生成一个标准表单，省去了使用类 Ant Design 表单的麻烦地方

2.可视化配置界面生成：并可以从代码层面自动生成 JSON Schema，来完成整体流程的打通

3.服务能力配置界面生成：常用于后台字段系统中，接口同学通过吐 JSON Schema 字段给前端界面，渲染出他所想要的界面以及获取用户的输入进行提交给后端，可以起到无需发布就可无缝扩展各种类型的作用

4.作为配置输入和搭建系统配合使用：FormRender 在正常展示的情况下，可以很简单的进行和原主题的适配使用

总结

介绍这样一个表单渲染引擎，是因为目前有很多地方需要用到自定义表单，如果配合上拖拽界面，即可实现一个自定义的智能表单，底层的渲染交给form-render即可，如果你想用它来做一些有意思的东西，不妨尝试一番！

深入Python Web开发的过程中，HTML模板渲染是构建动态Web应用的重要环节。今天将详细探讨如何使用Python中最流行的模板引擎之一——Jinja2来进行高效且灵活的模板渲染。通过具体的代码示例，将了解如何结合Flask框架与Jinja2实现数据与视图的完美分离。

Jinja2简介

Jinja2是一个强大的现代模板引擎，设计用于Python web开发项目，它支持变量替换、控制结构、过滤器和宏等丰富的功能。Flask框架默认集成并推荐使用Jinja2进行模板渲染，使其成为Python Web开发者手中不可或缺的工具。

安装与配置Jinja2（适用于未安装Flask环境）

如果已经安装过Flask，Jinja2通常已随Flask一同安装。若需要单独安装：

pip install Jinja2

基本使用示例

1.创建模板文件

在项目中创建一个名为templates的文件夹，并在其内放置我们的HTML模板文件，例如index.html：

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html渲染示例</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>Welcome to {{ site_name }}!</p>
    <ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
    </ul>
</body>
</html>

在这个模板中，我们用{{ variable }}表示变量占位符，{% %}表示控制结构

2.Flask中加载和渲染模板

在Flask应用中，我们需要导入render_template函数来加载并渲染模板：

from flask import Flask, render_template

app=Flask(__name__)

@app.route('/')
def home():
    # 定义传递给模板的数据
    title='主页'
    site_name='Html模板渲染示例'
    items=['Item 1', 'Item 2', 'Item 3']

    # 渲染模板并将数据传递给模板
    return render_template('index.html', title=title, site_name=site_name, items=items)

if __name__=='__main__':
    app.run(debug=True)

当用户访问主页时，Flask会调用home函数，其中render_template函数会查找templates目录下的index.html模板，并将定义好的变量替换到相应的位置。

Jinja2高级特性

1. 控制结构

除了简单的循环外，Jinja2还支持条件判断和其他逻辑操作：

<!-- 在模板中添加条件判断 -->
{% if user.is_authenticated %}
    <p>Welcome, {{ user.username }}!</p>
{% else %}
    <p>Please log in.</p>
{% endif %}

2. 过滤器

Jinja2内置了众多过滤器，可以对变量进行处理，如格式化日期、转换大小写等：

<!-- 使用过滤器格式化日期 -->
<p>The date is: {{ current_date|date("Y-m-d") }}</p>

3. 宏

宏允许复用或封装常见的HTML片段，提高代码可读性和维护性：

{# 在一个单独的macros.html模板中定义宏 #}
{% macro render_item(item) %}
    <div class="item">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
    </div>
{% endmacro %}

然后在其他模板中引入并使用该宏：

{% from 'macros.html' import render_item %}

<ul>
{% for item in items %}
    {{ render_item(item) }}
{% endfor %}
</ul>

结语

通过本文，我们已经深入了解了Jinja2模板引擎的基础使用方法以及其高级特性。掌握好Jinja2能够显著提升你的Web应用开发效率，实现更复杂、更美观的动态页面布局。

关注我，手把手带你快速入门Python Web编程！

绍

本篇同样是作为Vue的学习篇，要介绍的是Vue的Render函数，笔者也是初学者，如果遇到不对的或者有好的建议可以到评论区留言分享！

从一个示例开始

我们已经看到了组件及其用法。例如，我们有一个需要在整个项目中重用的内容。我们可以将其转换为组件并使用它。

让我们看一个简单组件的示例，看看render函数在其中的作用：

如下面的屏幕截图所示:

现在，如果我们想重用组件，我们可以通过复制粘贴来完成：

你看到的将是四个一模一样的

但是，现在我们需要对组件进行一些更改。我们不希望打印相同的文本。我们怎样才能改变它？如果我们在组件内部键入内容，是否可以尝试？

让我们尝试以下示例，看看会发生什么？

实际上你看到的结果并没有发生变化，但是组件确实提供了称为插槽（slots）的东西。让我们利用它，看看我们是否得到了预期的结果。现在代码是这样的：

查看浏览器结果：

现在，让我们考虑一下我们想要改变颜色和大小。例如，目前我们使用的是h1标签，我们希望将HTML标签更改为同一组件的p标签或div标签。我们怎样才能灵活地进行这么多改变？我们可以在Render函数的帮助下完成，Render函数通过使组件保持通用并帮助使用相同组件传递参数，帮助组件使用它所需的方式动态化。看下面一段代码：

在上面的代码中，我们使用以下代码更改了组件并使用props属性添加了render函数。

Vue.component('testcomponent',{
 render :function(createElement){
 var a=this.elementtype.split(",");
 return createElement(a[0],{
 attrs:{
 id:a[3],
 style:"color:"+a[1]+";font-size:"+a[2]+";"
 }
 },
 this.$slots.default
 )
 },
 props:{
 elementtype:{
 attributes:String,
 required:true
 }
 }
});

我们定义了一个名为elementtype的属性，它接受string类型的属性字段。另一个 required，标记该字段是必须的。在render函数中，我们使用了elementtype属性，如下面的代码片段所示：

render :function(createElement){
 var a=this.elementtype.split(",");
 return createElement(a[0],{
 attrs:{
 id:a[3],
 style:"color:"+a[1]+";font-size:"+a[2]+";"
 }
 },
 this.$slots.default
 )
}

Render函数将createElement作为参数并返回相同的值。CreateElement以与JavaScript相同的方式创建DOM元素。我们还使用attrs字段中的值在逗号上拆分元素类型。CreateElement将第一个参数作为要创建的元素标签。它使用以下代码传递给组件：

<testcomponent :elementtype="'div,red,25,div1'">Hello Jai</testcomponent>

组件需要采用如上所示的props字段。它以：和props的名称开头。在这里，我们传递元素标签，颜色，fontsize和元素的id。在render函数createElement中，我们在逗号上拆分，因此第一个元素是elementtag，它被赋予createElemet，如下面的代码片段所示：

return createElement(
 a[0],{
 attrs:{
 id:a[3],
 style:"color:"+a[1]+";font-size:"+a[2]+";"
 }
 },
 this.$slots.default
)

a [0]是html元素标记。下一个参数是元素标记的属性。它们在以下代码段中的attr字段中定义。

<testcomponent :elementtype="'div,red,25,div1'">Hello Jai</testcomponent>

我们使用以下代码定义了要在createElement中打印的文本。

this.$slots.default

它采用组件字段中指定的默认值。以下是我们在浏览器中获得的输出：

总结

以上就是通过一个简单的示例来学习Vue render函数的使用，更加复杂的使用方式还需要时间和实践，配合业务编写更加复杂的组件结构！

在线咨询

上一篇：CSS单位详解
下一篇：教你如何把markdown放在浏览器上展示，并选择一

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商