Python Flask 模板参数传值给 Vue

·  阅读 3370

前言

最近在项目开发中遇到这样一个问题:后端使用的是 Python Flask 框架,渲染方式为后端渲染。而前端使用的 Vue 技术栈。页面的显示通过后端渲染生成的 dist 包中的 index.html 文件来实现。由于项目的历史包袱,后端需要传值给前端,前端需要在某些组件中使用后端渲染传递过来的值。但是有一点略坑:后端渲染时只能识别 vue 生成的 index.html,在 vue 中是无法直接通过 {{ 参数名 }} 的方式直接获取传入参数 。本文对于这个问题给出三种可行的解决方案。

后端如何传值

Python Flask 框架中使用 render_template 函数来渲染对应的模板,该函数的第二个参数就是传入的参数。示例代码如下:

@app.route('/test')
def test_pass_parm():
   	parm_value = 'I am value from backend'
    return render_template('test/dist/index.html', parm_value)

上面代码是一个 Flask 中比较常规的写法。parm_value 是后端要传给 index.html 模板中的值, index.html 是 Vue 中生成的打包文件。在 index.html 中,可以使用 {{ parm_value }} 在模板中展示后端传入的值。

PS: Python Flask 渲染时,可能会因为 {{ }} 符号原因,与 vue 的插值语法有冲突,后端无法识别并正常渲染,需要修改 Vue 的分隔符 delimiters 项来避免后端渲染错误。

Vue 中如何获取

方式一

通过 index.html 中的 title 渲染值,在 vue 组件中通过 document.title 来进行获取。

在 vue 工程中的 index.html 中设置 title 如下:

<head>
    <meta chartset=utf-8>
    <title>{{parm_value}}</title>
</head>

当目标打包文件 index.html 被渲染成功后,param_value 就会被 flask 识别出来,渲染成传入的值。在 vue 组件中,可以进行以下的处理:

mounted(){
	//1. 通过 document.title 获取值
	this.pValue = document.title
	//2. 重新设置 document.title 为正常的网页 title
	document.title = "测试网页标题"
}

在 vue 组件中,pValue 就是后端渲染传入的值了。

方式二

在 index,html 中添加一个与 app 同级的 dom 节点

<html>
    <head>
        <meta>
        <title></title>
    </head>
    <body>
        <input id="test-dom" type="hidden" value="{{parm_value}}">
        <div id="app"></div>
    </body>
</html>

也许你会问一个问题,为什么不将 dom 结点放在 div#app 内部?答案很简单:因为生成的 dom 节点若在 div#app 内,运行时会被替换掉,在 vue 组件中无法获取到对应的 dom 节点。

在 vue 组件中处理:

mounted() {
	// 1. 获取对应的 dom 节点
	let testDom = document.getElementById('test-dom')
	// 2. 获取 dom 节点对应的值
	let pValue = testDom.value
}

方式三

在 index.html 中新增 script 标签进行渲染,通过 window.xxx 进行获取

<html>
    <head>
        <meta>
        <title></title>
    </head>
    <body>
        <input id="test-dom" type="hidden" value="{{parm_value}}">
        <div id="app"></div>
        <script>
        	window.pValue = '{{parm_value}}'
        </script>
    </body>
</html>

在 vue 组件中,通过 window.pValue 直接获取渲染值。

总结

以上,就是 Vue 前端工程中获取后端渲染方式传递值的三种方式。个人推荐第二、三种方式,孰优孰劣,可斟酌使用。由于项目是从后端渲染模板的方式逐渐升级为前后端分离的方式,在此过程中遇到了这个问题,梳理并总结出来,供后续查阅,避免再次入坑。

参考

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改