Работа с Vue - SevenLines/university-map GitHub Wiki

Работа с событиями

Допустим нам надо привязать реакцию на клик по аудитории. Так как у нас все разбито на независимые компоненты будем работать в файле client\src\components\Auditory.vue

Imgur

далее внутри класса Auditory надо определить сам метод

@Component
export default class Auditory extends Vue {
        // ...

        // метода вызываемый по клику на аудиторию
        onAuditoryClick() {
            // так как мы в этом файлике ничего не заем о внешних компонентах
            // мы просто вызываем событие на шине событий
            // шина событий это просто отдельный экземпляр Vue который общий для всех файлов
            // короче если что-то отправить в него из одного файла, то оно автоматически может быть 
            // перехвачено в других файлах
            EventBus.$emit("auditoryClicked", {
                id: this.id, // это текстовый идентификатор аудитории
                auditory: this.auditory // а это уже непосредственно аудитория
            });
        }

        // ...
}

кстати сама аудитория, которая this.auditory расcчитывается по this.audId в свойстве

get auditory(): AuditoryItem | null {
    return this.auditories[this.audId];
}

а this.audId рассчитывается по свойству this.regexMatch который уже в свою очердь расчитывается по this.id

Вся прелесть Vue что достаточно определить как что по чему рассчитывается, а фреймвор уже запустит сам пересчет как какое-то из свойств изменится.

Теперь идем на основу интерфейса которая описана в client\src\App.vue

Там в методе create мы подключаем обработчик события к шине EventBus

created() {
    this.fetchAuditories();
    this.fetchTeachers();
    this.updateAuditoryOccupationDate({date: new Date()});
    
    // отключаем все события на всякий пожарный
    EventBus.$off("auditoryClicked");
    // слушаем событие auditoryClicked, подключаем к нему обработчик onAuditoryClicked
    EventBus.$on("auditoryClicked", this.onAuditoryClicked)
}

ну и логично добавить собственно сам обработчик метода

// метода который будет вызываться по событию auditoryClicked
// так как тут используется TypeScript то надо указывать тип,
// чтобы не мучаться с типами можно просто указывать any
onAuditoryClicked(data: any) {
    // чтобы вывести в консоли содержимое data
    console.log(data)
    if (data.auditory) {
        // вывод алерта
        alert(`Hello auditory ${data.id} with database id=${data.auditory.id} and name=${data.auditory.title}`);
    }
}

собственное добавил это тут https://github.com/SevenLines/university-map/commit/f54366870a2d9b65e15e16857043ca48b7b46a84

Работа с разметкой

В vue если хочется чтобы что-то менялось в разметка надо создавать свойства и значения этих свойств выводить. Например я хочу чтобы у меня по клику на аудиторию в левом верохнем углу выводилось название аудитории. Делаю я это так.

  1. Создадим свойство clickedAuditory
export default class App extends Vue {
    // ...
    teacherFilter: string = "";

    // создали свойство, указываем:
    // название: допустимые типы (AuditoryItem или null) = начальное значение
    clickedAuditory: AuditoryItem | null = null;
    // ...
}
  1. Теперь в разметке укажем где его отображать
<template>
    <div id="app" style="height: 100%;">
        <div style="display: flex; flex-direction: column; height: 100%">
            <div style="display: flex; padding: 0.5em 1em">
                <div style="display: flex">
                    <!-- добавил вывод значения поля, заодно проверяю что оно не null -->
                    <div v-if="clickedAuditory">
                        {{clickedAuditory.title}}
                    </div>
                    <!-- ... -->
                </div>
                <!-- ... -->
            </div>
            <!-- ... -->
        </div>
    </div>
</template>
  1. Ну и собственно добавим изменение значения, для этого отредактируем метод реакции клика на аудиторию
onAuditoryClicked(data: any) {
    // просто при клике меням значение свойства
    this.clickedAuditory = data.auditory;
}

Обращение к flask серверу

Для отправки запроса на сервер надо использовать библиотчеку axios

  1. Сначала надо подключить вверху
import axios from 'axios';

там где все импорты идут

  1. Далее можно сформировать запрос и отправить его как реакцию на клик
onAuditoryClicked(data: any) {
    // при клике меням значение свойства
    axios.get("/api/auditories/statistic", {
        params: {
            auditory_id: data.auditory.id,
        }
    }).then(r => {
        // выведим результат в коносль, консоль открывается через F12
        console.log(r.data);
        console.log(r.data[0].count)
        console.log(r.data[0].para)
    })
}

увидим что-то в этом роде

Imgur

Таким образом мы можем привязать результат к какой-нибудь новое переменной и что-нибудь с ним поделать

⚠️ **GitHub.com Fallback** ⚠️