Блог

Раньше я создавал приложения Microsoft Excel с использованием VBA и таких событий, как _Change, _Click,… Сначала я переключился на JavaScript и фреймворки, но я заблудился с асинхронной стороной. Итак, я перешел на Python и Flask, и мне это очень нравится. Но когда я создаю интерфейс, сложно создавать динамические формы, потому что я не нахожу собственные теги (document.getElementsBy в JavaScript) и события (onChange, onClick и другие события) Я использовал с VBA.

Например, вчера я хотел обновить параметры в SelectField в зависимости от значения, введенного пользователем в текстовое поле. Я не смог сделать это только с помощью Flask и Python, мне нужно было добавить тег и фрагменты JavaScript:

     <script>

    //Get the controllers:
    let train_number = document.getElementsByClassName('train-number');
    let stops_list = document.getElementsByClassName('stops-list');

    //Add a listener:
    train_number[0].onkeyup = (e) => {
        //Clear stops_list:
        if (train_number[0].value == '') {
            stops_list[0].options.length = 0;
        }
        //If alphanumeric character:
        let charStr = String.fromCharCode(e.which || e.keyCode);
        if (/[a-z0-9]/i.test(charStr)) {
            //Clear stops_list:
            stops_list[0].options.length = 0;
            searched_train = train_number[0].value;
            //Requests for stations:
            fetch('/train/'   searched_train).then((response) => {
                response.json().then((data) => {
                    for (var i = 0; i < data.length; i  ) {
                        //Create new option element
                        var opt = document.createElement('option');
                        // create text node to add to option element (opt)
                        opt.appendChild( document.createTextNode(data[i]) );
                        //Set value property of opt
                        opt.value = data[i]; 
                        //Add opt to end of select box (sel)
                        stops_list[0].add(opt); 
                    }
                })
            })
        }
    }

</script>
  

Мой вопрос: есть ли способ создавать динамические формы и представления только с помощью Flask или лучше перейти на другой фреймворк? Если лучше сменить фреймворк, какой из них вы посоветуете (простой, легкий, удобный для пользователя, быстрый в освоении и, по возможности, синхронный)?

Вам в значительной степени нужен JavaScript. (Технически, если вам не нужна поддержка Internet Explorer, WebAssembly также является опцией в наши дни, но я не думаю, что он пока хорошо работает с Python.)

Совет не входит в компетенцию Stack Overflow, но одним из возможных вариантов фреймворка является Vue, если вы хотите что-то, что претендует на меньшую сложность.

Чтобы узнать о функциях JavaScript на основе событий, доступных в браузере, ознакомьтесь с разделом «Документы» на странице обзора событий MDN.

В моем ограниченном понимании, Node.js это серверная (т.Е. Серверная) технология, а Express — это фреймворк, который можно использовать с ней, чтобы помочь с маршрутизацией, среди прочего (см.: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs ). Если вы хотите создать одностраничное приложение, которое обрабатывает маршрутизацию во внешнем интерфейсе (т.Е. На стороне клиента), то здесь может пригодиться что-то вроде Vue, React или Angular (например, см.: https://www.educative.io/blog/react-angular-vue-comparison .)