python渲染模板时与vue发生冲突

  • A+
所属分类:程序开发

python使用的模板引擎为flask中的jinja2,在渲染模板的数据时候与vue的分隔符发生冲突

错误信息

[2019-10-24 09:48:42,782] ERROR in app: Exception on / [GET]
Traceback (most recent call last):
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\app.py", line 2446, in wsgi_app
    response = self.full_dispatch_request()
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\app.py", line 1951, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\app.py", line 1820, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\_compat.py", line 39, in reraise
    raise value
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\app.py", line 1949, in full_dispatch_request
    rv = self.dispatch_request()
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\app.py", line 1935, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "photo_view/main.py", line 8, in index
    return render_template('index.html')
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\templating.py", line 140, in render_template
    ctx.app,
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\flask\templating.py", line 120, in _render
    rv = template.render(context)
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\jinja2\asyncsupport.py", line 76, in render
    return original_render(self, *args, **kwargs)
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\jinja2\environment.py", line 1008, in render
    return self.environment.handle_exception(exc_info, True)
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\jinja2\environment.py", line 780, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\jinja2\_compat.py", line 37, in reraise
    raise value.with_traceback(tb)
  File "F:\APP\gitee\photo_view\photo_view\./public/template/index.html", line 135, in top-level template code
    <span>{{ props.row.name }}</span>
  File "C:\Users\guo5z\.virtualenvs\photo_view-LolT592W\lib\site-packages\jinja2\environment.py", line 430, in getattr
    return getattr(obj, attribute)
jinja2.exceptions.UndefinedError: 'props' is undefined

导致错误原因

由于vue渲染数据时使用的分隔符为{{}}和jinja2的分隔符是一样的,这样就导致了它们在渲染数据时发生冲突。

解决方法

我们修改vue的分隔符或着修改jinja2的分隔符都可以解决这个问题

修改vue分隔符

new Vue({
    delimiters: ['${', '}'],//修改分隔符
    el: '#app',
    //……
})

修改jinja2分隔符

app = Flask(__name__, template_folder='./public/template/')
# 修改模板分隔符
app.jinja_env.variable_start_string = '<{'
app.jinja_env.variable_end_string = '}>'
  • 公众号
  • 扫一扫
  • weinxin
  • 打赏
  • 扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: