Question

我正在设置一个新的Vue.js Web前端，以便与Python（Flask）后端服务进行交互。 Vue.js前端目前是一个页面，正在尝试向后端服务器显示HTTP GET请求的结果。

当我以主要方式修改Vue.js页面时（例如在循环中删除变量然后替换它），列表将正确显示：

working

但是，当我刷新页面或NPM serve命令执行热重载时，页面无法运行此get请求，而是显示一个空列表。

Broken

使用内置的NPM Server模板在Jetbrains WebStorm中运行调试，该模板运行以下命令：

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run serve --scripts-prepend-node-path=auto

Web服务器始终成功地将get请求的结果作为JSON文档返回。对http://localhost:5000/api/getFileTypes运行get请求将返回以下内容：

[{"FileType": "csv", "Description": "Comma Separated Values (CSV) file.", "CreatedDate": "2019-06-15T14:30:51", "CreatedByIp": null, "LastUpdatedDate": "2019-06-15T14:30:51", "LastUpdatedIp": null}, {"FileType": "json", "Description": "JavaScript Object Notation (JSON) files.", "CreatedDate": "2019-06-16T01:15:08.998360", "CreatedByIp": null, "LastUpdatedDate": "2019-06-16T01:15:08.998360", "LastUpdatedIp": null}, {"FileType": "xlsx", "Description": "Excel based file formats", "CreatedDate": "2019-06-16T01:15:08.998360", "CreatedByIp": null, "LastUpdatedDate": "2019-06-16T01:15:08.998360", "LastUpdatedIp": null}]

在调试过程中，没有任何内容写入浏览器或节点控制台。 Python控制台确实记录了GET请求： 2019/06/21 13:04:01 (_log): 127.0.0.1 - - [21/Jun/2019 13:04:01] "GET /api/getFileTypes HTTP/1.1" 200 -

下面是我当前的代码分为文件和组件

main.js

import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'axios'
import VueRouter from 'vue-router'

Vue.use(VueRouter);
Vue.use(BootstrapVue);

Vue.config.productionTip = false;
Vue.config.devtools = true;

new Vue({
  render: h => h(App),
}).$mount('#app');

App.vue

<template>
    <div>
        <h2>
            File Upload
        </h2>
        <div class="d-flex align-items-center justify-content-center">
            <upload></upload>
        </div>
    </div>
</template>

<script>
    import upload from './components/upload.vue'

    export default {
        name: 'app',
        components: {
            'Navigation': NavBar,
            'Upload': upload
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Upload.vue

<template>
    <div>
        <!-- Styled -->
        <b-form-file placeholder="Choose a file..." drop-placeholder="Drop file here..."></b-form-file>
        <ul id="file_types">
            <li v-for="ft in this.AcceptedTypes.data" v-bind:key="ft.FileType">{{ft.FileType}}</li>
        </ul>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "upload",
        data() {
            return this.AcceptedTypes = {};
        },
        methods: {
            getFileTypes: function()
            {
                const path = `http://localhost:5000/api/getFileTypes`;
                axios
                    .get(path)
                    .then(response => (this.AcceptedTypes = response))
            }
        },
        mounted: function() {
            // Run the functions once when mounted
            this.getFileTypes();
        }
    }
</script>

<style scoped>

</style>

在调试模式下，Vue.js网站不会每次都运行GET请求

0 个答案: