0

应用程序正在实时接收数据（使用警报检查），同时将其显示在卡上，它给出了错误Internal Server Error

相同的代码作为独立的 html 页面运行良好，但在烧瓶 python 网络应用程序中却没有。 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
          integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
    <title>Cosmos DB Change Feed</title>
    <style>

        .fade-enter-active {
            transition: all 1.5s ease;
        }

        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>
    Welcome new
    <div class="container" id="app">
        <div class="row">
            <div v-for="flight in flights" class="col-md-6 col-lg-4 col-xl-3" style="margin: 16px 0px;">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">{{ flight.from }} <i class="fas fa-plane"></i> {{ flight.to }}</h4>
                        <transition name="fade" mode="out-in">
                            <h4 class="card-subtitle mb-2" :key="flight.price">${{ flight.price }}</h4>
                        </transition>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/@aspnet/signalr@1.0.2/dist/browser/signalr.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

        const apiBaseUrl = 'http://localhost:7071'
        const axiosConfig = {}
        const data = {
            flights: []
        }
        const app = new Vue({
            el: '#app',
            data: data
        })
        getFlights().then(function (flights) {
            flights.forEach(flightUpdated)
        }).then(getConnectionInfo).then(function (info) {
            let accessToken = info.accessToken
            const options = {
                accessTokenFactory: function () {
                    if (accessToken) {
                        const _accessToken = accessToken
                        accessToken = null
                        return _accessToken
                    } else {
                        return getConnectionInfo().then(function (info) {
                            return info.accessToken
                        })
                    }
                }
            }

            const connection = new signalR.HubConnectionBuilder()
                .withUrl(info.url, options)
                .build()

            connection.on('flightUpdated', flightUpdated)

            connection.onclose(function () {
                console.log('disconnected')
                setTimeout(function () { startConnection(connection) }, 2000)
            })
            startConnection(connection)

        }).catch(console.error)

        function startConnection(connection) {
            console.log('connecting...')
            connection.start()
                .then(function () { console.log('connected!') })
                .catch(function (err) {
                    console.error(err)
                    setTimeout(function () { startConnection(connection) }, 2000)
                })
        }

        function getFlights() {
            return axios.post(`${apiBaseUrl}/api/GetFlights`, null, axiosConfig)
                .then(function (resp) { return resp.data })
                .catch(function () { return {} })
        }

        function getConnectionInfo() {
            return axios.post(`${apiBaseUrl}/api/SignalRInfo`, null, axiosConfig)
                .then(function (resp) { return resp.data })
                .catch(function () { return {} })
        }

        function flightUpdated(updatedFlight) {
            const flight = data.flights.find(f => (f.to === updatedFlight.to && f.from === updatedFlight.from))
            //const flight = data.flights.find(f =>f.id === updatedFlight.id)
            if (flight) {
               // alert(updatedFlight.price);
                //Vue.set(flight, 'from', updatedFlight.from)
                //  Vue.set(flight, 'to', updatedFlight.to)
                Vue.set(flight, 'price', updatedFlight.price)
            } else {
               //  alert(updatedFlight.price);
                data.flights.push(updatedFlight)
            }
        }
    </script>
</body>
</html>

预期结果是卡片格式的航班详细信息（从、到、价格）。我相信这是由于{{flight.to}}语法，我不知道如何替换它。

4

1 回答 1

0

如果应用程序出现内部服务器错误，您可能正在生产模式下运行它。在您的开发机器上，如果您正在使用 app.run 到应用程序，请更改

app.run()

至

app.run(debug=True)

但是，如果您正在使用

flask run

然后，根据您的系统，您需要添加一个环境变量，有关它的信息在其他配置中得到了很好的解释。

Flask 环境配置

当您启用调试模式时，内置的调试器会准确地告诉您它在哪里遇到了问题。

于 2019-04-16T12:45:59.807 回答