阿里出品的表單渲染引擎，生產力必備工具-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小時內與您取得聯系。

整合營銷服務商