推荐
关注
TOP
Message

在FastAPI中 如何既使用JinJa2模版 又使用Vue?

前言

如果你在 FastAPI 中使用 Jinja2 模板引擎,默认使用了 {% ... %} 和 {{ ... }} 这样的标记语法。
如果你需要在模板中使用 Vue.js 或其他类似的前端框架,可以通过修改 Jinja2 的标记语法避免冲突。

Jinja2 支持自定义标记语法,你可以在 FastAPI 中进行配置以修改默认的标记语法。以下是一种可行的方法

方法1:修改fastapi

由于本人用的fastapi-amis-admin框架,
下面的例子默认也使用这个框架的

from fastapi_amis_admin.admin import admin
from jinja2 import Environment, FileSystemLoader, select_autoescape
from fastapi.templating import Jinja2Templates


class MyJinja2Templates(Jinja2Templates):
    def __init__(self, directory: str) -> None:
        super().__init__(directory)

        # 配置 Jinja2 环境
        env = Environment(
            loader=FileSystemLoader(directory),
            autoescape=select_autoescape(['html', 'xml'])
        )
        env.block_start_string = '<%'
        env.block_end_string = '%>'
        env.variable_start_string = '<<'
        env.variable_end_string = '>>'

        self.env = env


class Jinja2Admin(admin.TemplateAdmin):
    templates = MyJinja2Templates(directory="templates")

将标记语法的起始和结束字符串分别修改为 <% 和 %>,并将变量插值的起始和结束字符串分别修改为 << 和 >>。然后在模板文件中使用了新的标记语法。

这样就避免了 Jinja2 和 Vue.js 的标记语法冲突,可以正常使用 Vue.js 的语法了。

方法2: 修改vue

这里提供两种方案
1:

 const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            delimiters: ['[[', ']]']
        });
const app = Vue.createApp(...)
app.config.compilerOptions.delimiters = ['[[', ']]']
app.mount("#app")
posted @ 2023-12-15 11:13  始識  阅读(89)  评论(0编辑  收藏  举报