python flask jinja2使用Vue,并解决jinja2和vue冲突

最新推荐文章于 2024-09-21 08:42:44 发布

转载最新推荐文章于 2024-09-21 08:42:44 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43632687/article/details/118155505

文章标签：

#flask #vue.js #python

Python 同时被 2 个专栏收录

100 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

本文展示了如何在Vue.js应用中利用Axios库进行HTTP请求，从Flask后端获取数据。通过修改模板变量以避免与Vue.js的默认绑定冲突，实现了数据的动态加载和展示。同时，还提供了备选方案，使用jQuery的getJSON方法达到相同效果。

http://www.axios-js.com/zh-cn/docs/
axios官网

方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <select >
            <option v-for="item in selects" :value="item">[[item]]</option>
        </select>
        <h2>{{item}}</h2>
        <div v-for="udata in userData">
            [[ udata.name ]]
            </div>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            delimiters: ["[[", "]]"],
            data:{
                selects:['enu','cha'],
                userData:[]
            },
            created: function() {
                var self = this
                axios.get('/api/tasks')
                .then(function (response) {
                    self.userData = (response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
            // $.getJSON('/api/tasks', function(data) {
            //     console.log(data);
            //     self.userData = data;
            //     console.log(self.userData);
                
            // })
        }
        })
        </script>
</body>

</html>

WanmaitFlask这种方式是直接disable掉jinjia2的

from flask import Flask
from flask import render_template
from flask import jsonify

class WanmaitFlask(Flask):
    jinja_options = Flask.jinja_options.copy()
    jinja_options.update(dict(variable_start_string='%%',
                              # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
                              variable_end_string='%%',))
app=WanmaitFlask(__name__)


@app.route("/test")
def test():
    return render_template("test.html",item=[123,345])

@app.route("/api/tasks")
def tasks():
    lists=[{"name":"123"},{"name":"123"},{"name":"123"},{"name":"123"}]
    return jsonify(lists)

if __name__ == '__main__':
    app.run("0.0.0.0",8888,debug=True)

https://www.jb51.net/zt/jquerydown.htm
这是js 路径

方法2 更改vue的数据绑定方式

from flask import Flask
from flask import render_template
from flask import jsonify

# class WanmaitFlask(Flask):
#     jinja_options = Flask.jinja_options.copy()
#     jinja_options.update(dict(variable_start_string='%%',
#                               # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
#                               variable_end_string='%%',))
app=Flask(__name__)


@app.route("/test")
def test():
    return render_template("test.html",item=[123,345])




@app.route("/api/tasks")
def tasks():
    lists=[{"name":"123"},{"name":"123"},{"name":"123"},{"name":"123"}]
    return jsonify(lists)

if __name__ == '__main__':
    app.run("0.0.0.0",8888,debug=True)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <select >
            <option v-for="item in selects" :value="item">[[item]]</option>
        </select>
        <h2>{{item}}</h2>
        <div v-for="udata in userData">
            [[ udata.name ]]
            </div>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            delimiters: ["[[", "]]"],
            data:{
                selects:['enu','cha'],
                userData:[]
            },
            created: function() {
                var self = this
                axios.get('/api/tasks')
                .then(function (response) {
                    self.userData = (response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
            // $.getJSON('/api/tasks', function(data) {
            //     console.log(data);
            //     self.userData = data;
            //     console.log(self.userData);
                
            // })
        }
        })
        </script>
</body>

</html>