Fatal编程技术网
  • python/
  • Python 为什么虽然我可以接收数据，但无法正确呈现数据（angularjs和Pi/jinja2）

Python 为什么虽然我可以接收数据，但无法正确呈现数据（angularjs和Pi/jinja2）

python html angularjs

Python 为什么虽然我可以接收数据，但无法正确呈现数据（angularjs和Pi/jinja2）,python,html,angularjs,restful-architecture,flask-restful,Python,Html,Angularjs,Restful Architecture,Flask Restful,我试着调试了大约2个小时，但没有成功 这是我的错误： jinja2.exceptions.UnfinedError jinja2.exceptions.UndefinedError:“项”未定义 我可以正确接收数据（$scope.questions）。 My index.html： <html> <head> </head> <body> <script src="https://ajax.googleapis.com/ajax

我试着调试了大约2个小时，但没有成功

这是我的错误：

jinja2.exceptions.UnfinedError jinja2.exceptions.UndefinedError:“项”未定义

我可以正确接收数据（$scope.questions）。

My index.html：

<html>

<head>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

    <div ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="item in questions">
            {{item.question}}
        </div>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http({
                method: "GET",
                url: "http://127.0.0.1:5000/questions"
            }).then(function mySuccess(response) {
                $scope.questions = response.data;
            }, function myError(response) {
                $scope.myWelcome = response.statusText;
            });
        });
    </script>
</body>

</html>


{{项目.问题}
var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$http）{
$http({
方法：“获取”，
url:“http://127.0.0.1:5000/questions"
}).then（函数mySuccess（响应）{
$scope.questions=response.data；
}，函数myError（响应）{
$scope.myWelcome=response.statusText；
});
});
我的服务器端：

import os

from flask import Flask, request, render_template, Response
from flask_restful import Resource, Api

app = Flask(__name__)
api = Api(app)

question_id_serial = 2
questions = {
    1: {
        'id': 1,
        'question': 'Is this hard?',
    },
    2: {
        'id': 2,
        'question': 'Who is going to win the SuperBowl in 2017?',
    }
}

answer_id_serial = 6
answers = {
    1: {
        'id': 1,
        'question_id': 1,
        'answer': 'Yes',
        'count': 0
    },
    2: {
        'id': 2,
        'question_id': 1,
        'answer': 'No',
        'count': 0
    },
    3: {
        'id': 3,
        'question_id': 2,
        'answer': 'Eagles',
        'count': 0
    },
    4: {
        'id': 4,
        'question_id': 2,
        'answer': 'Patriots',
        'count': 0
    },
    5: {
        'id': 5,
        'question_id': 2,
        'answer': 'Seahawks',
        'count': 0
    },
    6: {
        'id': 6,
        'question_id': 2,
        'answer': 'Broncos'
    }
}


class Answer(Resource):
    def get(self, answer_id):
        return answers[answer_id]

    def put(self, answer_id):
        answer = answers[answer_id]
        data = request.get_json()
        values = {k: data.get(k, v) for k, v in answer.items()}
        answers[answer_id].update(values)
        return values

    def delete(self, answer_id):
        values = answers[answer_id]
        del answers[answer_id]
        return values

class Answers(Resource):
    def get(self):
        return answers.values()

    def post(self):
        global answer_id_serial
        answer_id_serial += 1
        data = request.get_json()
        values = {
            'id': answer_id_serial,
            'answer': data['answer'],
            'count': data.get('count', 0),
            'question_id': data['question_id']
        }

        answers[answer_id_serial] = values
        return values


class Question(Resource):
    def get(self, question_id):
        data = questions[question_id].copy()
        data['answers'] = [ans for ans in answers.values() if ans['question_id'] == question_id]
        return data

    def put(self, question_id):
        question = questions[question_id]
        data = request.get_json()
        data.pop('answers', [])
        values = {k: data.get(k, v) for k, v in question.items()}
        questions[question_id].update(values)
        values['answers'] = [ans for ans in answers.values() if ans['question_id'] == question_id]
        return values

    def delete(self, question_id):
        values = questions[question_id]
        del questions[question_id]
        values['answers'] = [ans for ans in answers.values() if ans['question_id'] == question_id]
        return values


class Questions(Resource):
    def get(self):
        output = []
        for question in  questions.values():
            question = question.copy()
            question['answers'] = [ans for ans in answers.values() if ans['question_id'] == question['id']]
            output.append(question)
        return output

    def post(self):
        global question_id_serial
        question_id_serial += 1
        data = request.get_json()
        values = {
            'id': question_id_serial,
            'question': data['question']
        }
        questions[question_id_serial] = values
        return values

api.add_resource(Questions, '/questions')
api.add_resource(Question,  '/questions/<int:question_id>')
api.add_resource(Answers,   '/answers')
api.add_resource(Answer,    '/answers/<int:answer_id>')

@app.route('/')
def show_page():
    return render_template('index.html')

@app.route('/assets/<path:path>')
def get_resource(path):
    mimetypes = {
        '.css': 'text/css',
        '.html': 'text/html',
        '.js': 'application/javascript'
    }

    content = open(path).read()
    return Response(content, mimetype=mimetypes[os.path.splitext(path)[1]])

if __name__ == '__main__':
    app.run(debug=True)

导入操作系统
从烧瓶导入烧瓶、请求、呈现模板、响应
来自restful导入资源Api
app=烧瓶（名称）
api=api（应用程序）
问题_id_serial=2
问题={
1: {
“id”：1，
‘问题’：‘这难吗？’，
},
2: {
“id”：2，
‘问题’：‘谁将赢得2017年的超级碗？’，
}
}
答案\u id\u serial=6
答案={
1: {
“id”：1，
“问题id”：1，
回答：“是的”，
“计数”：0
},
2: {
“id”：2，
“问题id”：1，
回答：不，
“计数”：0
},
3: {
"id":3,，
“问题编号”：2，
‘答案’：‘老鹰’，
“计数”：0
},
4: {
“id”：4，
“问题编号”：2，
回答:"爱国者",，
“计数”：0
},
5: {
“id”：5，
“问题编号”：2，
‘答案’：‘海鹰’，
“计数”：0
},
6: {
“id”：6，
“问题编号”：2，
回答：“野马”
}
}
课堂答案（资源）：
def get（自我，答案id）：
返回答案[答案id]
def put（自我，应答id）：
答案=答案[答案id]
data=request.get_json（）
value={k:data.get（k，v）表示answer.items（）中的k，v
答案[答案id]。更新（值）
返回值
def delete（自我，答案id）：
值=答案[答案id]
del answers[答案]
返回值
课堂答案（资源）：
def get（自我）：
返回答案。值（）
def post（自我）：
全局应答\u id\u序列
答案_id_serial+=1
data=request.get_json（）
值={
“id”：回答\u id\u序列号，
“答案”：数据[“答案”]，
“count”：data.get（'count'，0），
“问题id”：数据[“问题id”]
}
应答[应答id\U序列]=值
返回值
课堂提问（资源）：
def get（自我，问题编号）：
数据=问题[question_id]。复制（）
数据['answers']=[answers.values（）中ans的ans，如果ans['question\u id']==question\u id]
返回数据
def put（自我，问题编号）：
问题=问题[问题编号]
data=request.get_json（）
data.pop（'answers'，[]）
value={k:data.get（k，v）for k，v in problem.items（）}
问题[question\u id]。更新（值）
values['answers']=[answers.values（）中ans的ans['question\u id']==question\u id]
返回值
def删除（自我，问题编号）：
值=问题[问题编号]
删除问题[问题编号]
values['answers']=[answers.values（）中ans的ans['question\u id']==question\u id]
返回值
课堂提问（资源）：
def get（自我）：
输出=[]
对于问题中的问题。值（）：
question=question.copy（）
问题['answers']=[answers.values中的ans的ans（），如果ans['question\u id']==question['id']]
output.append（问题）
返回输出
def post（自我）：
全局问题\u id\u序列号
问题_id_serial+=1
data=request.get_json（）
值={
“id”：问题编号，
“问题”：数据[“问题”]
}
问题[question\u id\u serial]=值
返回值
api.add_资源（问题，“/问题”）
api.添加资源（问题“/questions/”）
api.add_资源（答案，“/Answers”）
api.add_资源（答案“/answers/”）
@应用程序路径（“/”）
def show_page（）：
返回渲染模板（'index.html'）
@app.route（“/assets/”）
def get_资源（路径）：
mimetypes={
“.css”：“text/css”，
“.html”：“text/html”，
“.js”：“应用程序/javascript”
}
内容=打开（路径）.read（）
返回响应（内容，mimetype=mimetypes[os.path.splitext（path）[1]]
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
app.run（debug=True）
是来自
呈现模板（'index.html'）的html

如果是这样，则不能使用Flask渲染模板，然后尝试使用Angular再次渲染它

基本上，您的
ng repeat
不起作用，Flask无法识别
{{item}}
，因此出现错误。

将{%raw%}和{%endraw%}添加到模板后，它现在可以正常工作了

我附上了工作模板，希望这将有助于未来使用Flask Restapi和AngularJS的开发人员：

{% raw %}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

    <div ng-app="myApp" ng-controller="myCtrl">

        <h1 ng-repeat="question in questions">{{question.question}}</h1>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http({
                method: "GET",
                url: "http://127.0.0.1:5000/questions"
            }).then(function mySuccess(response) {
                $scope.questions = response.data;
            }, function myError(response) {
                $scope.myWelcome = response.statusText;
            });
        });
    </script>
</body>

</html>
{% endraw %}

{%raw%}
{{问题.问题}
var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$http）{
$http({
方法：“获取”，
url:“http://127.0.0.1:5000/questions"
}).then（函数mySuccess（响应）{
$scope.questions=response.data；
}，函数myError（响应）{
$scope.myWelcome=response.statusText；
});
});
{%endraw%}
“是来自render_模板（'index.html'）的html。”。对有没有解决这个错误的建议？我从不使用flaskrestapi。我是