uniapp DIY 視覚化ツール コントロール ドラッグ アンド ドロップ ツールの開発方法
回答: (**ドラッグ アンド ドロップ ライブラリ**) (**テンプレート エンジン**) コードを自動的に生成する必要があります
Python にはどのようなテンプレート エンジンがありますか?
- Jinja2は、小さいながらも高速で使いやすい、純粋な Python で書かれたスタンドアロンのテンプレート エンジン (主にテンプレート) です。
- Chameleon は、初回使用時にテンプレートを Python バイトコードにコンパイルする TAL および Genshi 構文の高速実装です。
- ClearSilver は、Python/C/Perl 用のテンプレート フレームワークであり、Google グループなどで使用されるテンプレート システムです。
- Mako は、完全に書き直され更新された API と構文に蒸留された Myghty の最高のアイデアを表すまったく新しいテンプレート エンジンです。
- Ophelia (0.3 2007-07-06 リリース) は、TAL テンプレートから XHTML ページを生成します。これにより、コードの重複が回避され、サイト コンテンツをデータベースではなくファイル システムに常駐できるようになり、Python スクリプトでコンテンツを動的にできるようになります。
- JonsPythonModules ( 1.06、2004年 4 月 11 日にリリース)、Python 用のシンプルかつ強力なマルチスレッド オブジェクト指向 CGI/FastCGI/mod_python/html テンプレート モジュールのセット
- Cheetah - Cheetah は、Python を利用したテンプレート エンジンおよびコード ジェネレーターです。スタンドアロン ユーティリティとして使用することも、他のツールと組み合わせて使用することもできます。
- Genshiは、HTML、XML、またはその他のテキスト コンテンツを解析、生成、処理して Web 上に出力を生成するためのコンポーネントの統合セットを提供する Python ライブラリです。
フロントエンドにはどのようなテンプレート エンジンがありますか?
- Mustache: フロントエンドとバックエンド間でテンプレートを共有するためのシンプルな言語。
- Handlebars: より多くの制御構造と機能を提供する Mustache に基づく言語。
- EJS: JavaScript 構文をサポートする単純なテンプレート言語。
- Jade: HTML コードを生成するための Node.js ベースのテンプレート言語。
- Underscore: は、豊富なテンプレート エンジン機能を提供する JavaScript ライブラリです。
- React JSX: JSX は、HTML タグを直接使用して React アプリケーションのコンポーネントを記述できるようにする JavaScript 言語拡張機能です。
- Vue.js: Vue.js は、独自のテンプレート構文を提供する進歩的な JavaScript フレームワークです。
これらは、フロントエンド テンプレート エンジンの一般的なタイプの一部にすぎません。AngularJS、Ember.js、Backbone.js など、他にも多くのテンプレート エンジンがあります。使用するテンプレート エンジンの選択は、プロジェクトのニーズによって異なります。個人の好み。
vue にはどのようなドラッグ アンド ドロップ ライブラリがありますか?
- Vue ドラッガブル - Vue ドラッガブル コンポーネントの王様
- Vue のドラッグ サイズ変更 - 軽量、依存関係なし、スケーラブル
- Vue スムーズ DND - シンプルなアニメーション、ドラッグ アンド ドロップの並べ替え、複数のシーンをカバー
- V-drag - 最もシンプルなドラッグ アンド ドロップ実行ソリューション
- Vue Easy DnD - シンプルかつ高速で、上下のドラッグ シーンに適しています
- Awe dnd - vue 2.x ベースのドラッグ アンド ドロップ並べ替えコンポーネント。要素や画像のドラッグに汎用
jinja2を使用したPython
Jinja2 は、デザイナーにとって使いやすい最新の Python 用テンプレート エンジンです。
Django テンプレートをモデルにした言語
1どうやってインストールするの？
python -m インストール Jinja2==2.11.2
2 インストールされているか確認してください。
Python -m pipフリーズ | grep 神社 2
Jinja2==2.11.2
ここの作成者は Jinja2==2.11.2 バージョンを使用していることに注意してください。最新バージョンでエラーが報告された場合は、このバージョンに切り替えてください。エラーは報告されません。
test1.py
from jinja2 import Template
template=Template("T am a {
{ name }} ")
result=template.render(name="wenlong")
print(type(result),result)
# 当前jinja2版本 2.11.2
test2.py
from jinja2 import FileSystemLoader,Environment
# 从文件系统加载模板文件路径
loader=FileSystemLoader(['templates'],encoding="utf-8")
# 核心组件 配合FileSystemLoader 一起使用
enviroment=Environment(loader=loader)
# 传入模板文件名称
tpl=enviroment.get_template('one.tpl')
# 可将参数传到前端模板进行渲染
data={'ip':'1.1.1.1'}
output=tpl.render(data=data)
print(output)
# 写入文件方法1
# with open("测试.vue",'w') as f:
# f.write(tpl.render(data=data))
# 写入文件方法2
tpl.stream(data=data).dump("1.vue")
# 当前jinja2版本 2.11.2
test3.py
one.tpl ファイル
<template>
{
{data.name}}
</template>
<script>
export default {
data() {
return {
};
},
onShow() {
},
onLoad(option) {
},
methods: {
{
{data.method}}
}
};
</script>
<style lang="scss" scoped>
</style>
from jinja2 import FileSystemLoader, Environment
# 从文件系统加载模板文件路径
loader = FileSystemLoader(['templates'], encoding="utf-8")
# 核心组件 配合FileSystemLoader 一起使用
enviroment = Environment(loader=loader)
# 传入模板文件名称
tpl = enviroment.get_template('one.tpl')
# 可将参数传到前端模板进行渲染
name = "文龙"
data = {
'name': '<view>' + name + '</view>',
'method': """
async init() {},
chooseWxavatar(e) {
const { avatarUrl } = e.detail;
let baseavatarUrl = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(avatarUrl, 'base64');
this.wxavatar = baseavatarUrl;
},
""",
}
output = tpl.render(data=data)
print(output)
# 写入文件方法1
# with open("测试.vue",'w') as f:
# f.write(tpl.render(data=data))
# 写入文件方法2
tpl.stream(data=data).dump("1.vue")
# 当前jinja2版本 2.11.2