Сайт Vue.js не выполняет GET-запрос каждый раз, когда находится в режиме отладки. - PullRequest
Новая
       22

Сайт Vue.js не выполняет GET-запрос каждый раз, когда находится в режиме отладки.

0 голосов
/ 21 июня 2019

Я настраиваю новый веб-интерфейс Vue.js для взаимодействия с бэкэнд-сервисом Python (Flask). Внешний интерфейс Vue.js в настоящее время представляет собой одну страницу, которая пытается отобразить результаты запроса HTTP GET на внутренний сервер.

При значительном изменении страницы Vue.js, например при удалении переменной в цикле и последующей ее замене, список отображается правильно:

working

Однако, когда я обновляю страницу или команда NPM serve выполняет горячую перезагрузку, странице не удается выполнить этот запрос get, и вместо этого отображается пустой список.

Broken

Отладка выполняется в Jetbrains WebStorm с использованием встроенного шаблона сервера NPM, который запускает команду: 

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

Веб-сервер всегда успешно возвращает результаты запроса get в виде документа JSON. Выполнение запроса get на http://localhost:5000/api/getFileTypes возвращает следующее: 

[{"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>
...