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

最新推荐文章于 2024-05-07 10:10:08 发布

会飞的尼古拉斯

最新推荐文章于 2024-05-07 10:10:08 发布

阅读量2.9k

点赞数 1

分类专栏： Python

本文链接：https://blog.csdn.net/weixin_43632687/article/details/118155505

版权

Python 专栏收录该内容

127 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用axios从Flask API获取数据，并探讨了两种数据绑定方式的更改。通过实例展示了如何在WanmaitFlask中禁用Jinja2模板的默认绑定并改用Vue的[[...]]语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>