preface

I recently encountered a problem in the development of the project: the Python Flask framework was used for the back end, and the rendering method was back-end rendering. While the front end uses the Vue technology stack. The display of the page is achieved through the index. HTML file in the dist package generated by the back-end rendering. Because of the historical baggage of the project, the back end needs to pass values to the front end, and the front end needs to use the values passed from the back end to render in some components. However, there is a bit of a problem: the back-end rendering can only recognize the index. HTML generated by vUE, in vUE is not directly through {{parameter name}} way to directly get the passed parameters. This paper presents three possible solutions to this problem.

How does the backend pass values

The Python Flask framework uses the render_template function to render the corresponding template. The second parameter to this function is the parameter passed in. The example code is as follows:

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

The above code is a more general Flask writing method. Parm_value is the value to be passed by the back end to the index. HTML template, which is the package file generated in Vue. In index.html, you can use {{parm_value}} to display the value passed in from the back end in the template.

PS: In Python Flask rendering, it may conflict with vue’s interpolation syntax due to {{}} symbols, and the backend cannot recognize and render normally. Therefore, vue’s delimiters need to be modified to avoid back-end rendering errors.

How to obtain Vue

Methods a

The value is rendered by title in index. HTML and obtained by document.title in the Vue component.

In the vue project index.html set the title as follows:

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

When the target package file index.html is rendered successfully, param_value is recognized by Flask and rendered as the value passed in. In the VUE component, the following processes can be performed:

Mounted (){this.pvalue = document.title //2. Document. title = "Test the title of the page"}Copy the code

In the vue component, pValue is the value passed in by the back-end rendering.

Way 2

Add a DOM node that is the same class as the app in the index, HTML

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

One question you might be asking is, why not put the dom node inside the div#app? The answer is simple: because the generated dom node is inside the div#app, it will be replaced at runtime, and the vue component will not get the corresponding dom node.

Handled in the VUE component:

Let testDom = document.getelementById ('test-dom') // 2. Let pValue = testdom.value}Copy the code

Methods three

Add a script tag in index.html for rendering, and get it through 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>
Copy the code

In the Vue component, window.pvalue is used to get the render value directly.

conclusion

The above are the three ways to obtain the value passed by the back-end rendering mode in Vue front-end engineering. Personally recommend the second, three ways, which is better, can be used. Since the project was gradually upgraded from the back-end rendering template to the front and back end separation, this problem was encountered in the process, which was combed and summarized for subsequent reference to avoid entering the pit again.

reference

  • Python Flask summary and some of the various value passing issues

  • Flask passes multiple or all of the local parameters to the template