form-render是阿里開源的跨組件體系的表單渲染引擎 - 通過 JSON Schema 快速生成自定義表單配置界面,常用于自定義搭建配置界面生成。
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);
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是一個強大的現代模板引擎,設計用于Python web開發項目,它支持變量替換、控制結構、過濾器和宏等豐富的功能。Flask框架默認集成并推薦使用Jinja2進行模板渲染,使其成為Python Web開發者手中不可或缺的工具。
如果已經安裝過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模板,并將定義好的變量替換到相應的位置。
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函數的使用,更加復雜的使用方式還需要時間和實踐,配合業務編寫更加復雜的組件結構!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。