Эта статья является частью серии под названием "Корпоративное управление в блокчейне".
В Части 1 серии излагаются потенциальные применения блокчейна в корпоративном управлении и рассказывается, как настроить свой проект, чтобы следовать этой серии. Часть 2 описывает всю бизнес-логику смарт-контракта с голосованием акционеров и включает в себя лучшие практики разработки смарт-контрактов.
В Части 3 мы начали работать с пользовательским интерфейсом и научились читать из блокчейна. В Части 4 мы добавили функцию голосования для обоих кандидатов и научились писать в блокчейн.
Эта часть будет заключительной в этой серии. До сих пор мы просто регистрировали результаты в консоли разработчика. В этом блоге мы узнаем, как отображать результаты голосования в пользовательском интерфейсе.
Мы отобразим результаты в виде таблицы, которая будет выглядеть примерно так:
Мы добьемся этого за три простых шага:
- Создайте скрытую кнопку «‹action-button›», которая будет запускаться каждый раз, когда пользователь голосует.
- Создайте таблицу-заполнитель для отображения результатов, аналогичных приведенной выше таблице.
- Измените функцию showResults () для отображения таблицы в пользовательском интерфейсе.
Давайте начнем!
Шаг 1. Создайте скрытую `‹action-button›`
Эта `‹action-button›` будет `скрыта`, чтобы пользователь (избиратель) не мог видеть текущие результаты голосования, прежде чем фактически проголосует.
Создайте этот `‹action-button›` в `dapp-page.js` внутри функции` render () `. Эта кнопка будет заключена в `div` с уникальным идентификатором. Этот div также должен быть скрытым.
В приведенном выше фрагменте кода вы можете видеть, что для свойства «hidden» объекта «‹action-button›« установлено значение «true». Эта кнопка `‹action-button›` также имеет уникальный идентификатор `get-кандидат`. Мы устанавливаем идентификатор на `get-кандидаты`, потому что эта` ‹action-button› `по сути извлекает все данные, относящиеся к кандидатам. Самым важным свойством этого `‹action-button›` является свойство `.click`. При щелчке по этой скрытой `‹action-button›` вызывается метод `getCandidates ()`. Мы позаботимся о том, чтобы нажать эту кнопку, манипулируя DOM. Эта кнопка будет нажата, и метод getCandidates () будет запущен, как только пользователь (избиратель) проголосует.
Давайте создадим метод getCandidates () в dapp-page.js. Эта функция должна быть рядом с другими пользовательскими функциями, такими как `showResults ()`.
Функция getCandidates () извлекает данные из блокчейна, вызывая смарт-контракт. Полученный результат затем представляется в виде таблицы с уникальным идентификатором «ищущий-кандидат». Эта таблица будет создана на шаге 2.
Шаг 2. Создайте таблицу-заполнитель
Нам нужно создать таблицу-заполнитель, чтобы мы могли заполнять ее динамически. Вы можете стилизовать его так, как вам нравится. Мы будем использовать Tailwind CSS.
Мы добавим эту таблицу-заполнитель в div, который мы создали на шаге 1, с идентификатором tally.
Теперь все готово к отображению результатов. Заполняемые данные готовы к загрузке, а заполнитель готов к заполнению. Все, что нам нужно сделать, это отобразить div с идентификатором tally. Нам нужно позаботиться о том, чтобы «скрытая» кнопка ‹action-button› была нажата до загрузки «div».
Шаг 3. Измените функцию showResults ()
До сих пор мы просто записывали результат в консоль разработчика. Теперь давайте поработаем с моделью DOM и отобразим результат в виде таблицы.
В функции `showResults ()` в `dapp-page.js` внесите следующие изменения:
Мы получаем доступ к DOM, захватывая элемент по идентификатору `(elid)`. Сначала мы нажимаем на «hidden» «‹action-button›«, чтобы запустить функцию «getCandidates ()«, а затем мы удаляем класс «hidden» из «div» с идентификатором «tally», чтобы сделать его видимым в ДОМ.
И это все!
Теперь ваше приложение должно успешно отображать текущий подсчет голосов.
Это была последняя функция, которую мы хотели добавить в это приложение для голосования.
Если вы следили за этой серией и дошли до нее, поздравляем! 🎉
Мы надеемся, что вы узнали, как создать приложение для сквозного голосования с полным стеком на блокчейне Ethereum. Мы будем придумывать больше серий с интересными примерами использования для построения блокчейна.
Быть в курсе.
Создавайте с помощью DappStarter.
Получайте лучшие предложения по программному обеспечению прямо в свой почтовый ящик
