uniapp DIY可视化工具控件拖拽工具怎么开发/拖拽库/模板引擎

王家视频教程图书馆

已于 2023-05-20 05:15:51 修改

阅读量777

点赞数

分类专栏：已解决文章标签：前端

于 2023-05-19 20:04:48 首次发布

本文链接：https://blog.csdn.net/qq_35622606/article/details/130773228

版权

已解决专栏收录该内容

62 篇文章 1 订阅

订阅专栏

uniapp DIY可视化工具控件拖拽工具怎么开发

答：需要 (**拖拽库**) （**模板引擎**）代码自动生成

python有哪些模板引擎

Jinja2是一个小型但快速且易于使用的以纯python编写的独立模板引擎（最主要的模板）
Chameleon是TAL和Genshi语法的快速实现，可在首次使用时将模板编译为python字节码。
ClearSilver是适用于Python / C / Perl的模板框架，该模板系统用于Google网上论坛和...
Mako是全新的模板引擎，代表Myghty的最佳创意，这些创意被提炼为完全重写和更新的API和语法。
Ophelia（0.3发布于2007-07-06）从TAL模板生成XHTML页面。这样可以避免重复的代码，允许站点内容驻留在文件系统中而不是数据库中，并允许Python脚本使内容动态化。
JonsPythonModules（1.06，2004-04-11发布），一组简单但功能强大的多线程面向对象的CGI / FastCGI / mod_python / html-tempulation用于Python的模块
Cheetah -Cheetah是Python驱动的模板引擎和代码生成器。它可以用作独立实用程序，也可以与其他工具组合使用。
Genshi是一个Python库，它提供了一组集成的组件，用于解析，生成和处理HTML，XML或其他文本内容，以在Web上生成输出。

前端有哪些模板引擎

Mustache: 一种简单的语言，用于在前端和后端之间共享模板。
Handlebars: 基于 Mustache 的语言，提供了更多的控制结构和功能。
EJS: 一种简单的模板语言，支持 JavaScript 语法。
Jade: 一种基于 Node.js 的模板语言，用于生成 HTML 代码。
Underscore: 是一个 JavaScript 库，提供了丰富的模板引擎功能。
React JSX: JSX 是一种 JavaScript 语言的扩展，可以在 React 应用中直接使用 HTML 标签来描述组件。
Vue.js: Vue.js是一个渐进式的JavaScript框架，提供了自己的模板语法。

这些只是前端模板引擎中的一些常见类型，还有许多其他的模板引擎，如 AngularJS, Ember.js, Backbone.js, 选择使用哪种模板引擎取决于项目的需求和个人偏好。

vue有哪些拖拽库

Vue Draggable - Vue 拖拽组件王者
Vue drag resize - 轻量级，无依赖，可缩放
Vue smooth dnd - 简单动效，上下拖拽排序，涵盖多场景
V-drag - 最简单的可拖拽执行方案
Vue Easy DnD - 简洁快捷，上下拖拽场景适用
Awe dnd - 基于 vue 2.x 拖放排序组件，元素和图片拖拽通用

python 使用 jinja2

Jinja2是一个现代的，设计者友好的，是python流行的模板引擎

仿照Django模板的语言

1如何安装？

python -m install Jinja2==2.11.2

2查看是否安装？

python -m pip freeze | grep Jinja2

Jinja2==2.11.2

注意这里笔者使用的是Jinja2==2.11.2版本,如果最新版本报错请切换到这个版本下就不报错了

测试1.py

from jinja2 import Template

template=Template("T am a {{ name }} ")

result=template.render(name="wenlong")

print(type(result),result)

# 当前jinja2版本 2.11.2

测试2.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

测试3.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