Эта статья является частью серии, называемого корпоративным управлением на Блокчане.
Часть 1 Из серии намерены потенциальные применения блокчана в корпоративном управлении и проходят через то, как создать свой проект, чтобы следовать этой серии. Часть 2 Обрисовывает всю бизнес-логику Акционерного голосования Smart Contract и включает в себя лучшие практики для развития интеллектуального контракта.
В Часть 3 Мы начали плетение в интерфейсе UI и научились читать из блокчана. В Часть 4 Мы добавили функциональность голосования как для кандидатов, так и научились писать в блокчане.
Эта часть будет заключительной частью этой серии. До сих пор мы просто регистрировали результаты на консоли разработчиков. В этом блоге мы узнаем, как отобразить результаты голосования на UI.
Мы покажим результаты в виде таблицы, которая будет выглядеть что-то подобное:
Мы достигнем этого на три простых шага:
- Создать скрытый
<кнопка действий>Это будет увольнено каждый раз, когда пользователь голосует. - Создайте таблицу заполнителя, чтобы отобразить результаты, похожие на вышеуказанную таблицу.
- Изменить
ShowResults ()Функция для отображения таблицы на UI.
Давайте начнем!
Шаг 1: Создайте скрытую <кнопку действий>
Это <кнопка действий> будет скрытый так что пользователь (избиратель) не может видеть текущие результаты голосов, прежде чем фактически бросить голос.
Создать это <кнопка действий> в Dapp-Page.js в пределах Визуализация () функция. Эта кнопка будет завернута в Div с уникальным идентификатором. Это Div также должно быть скрытый Отказ
В приведенном выше фрагменте кода вы можете увидеть, что скрытый Собственность <кнопка действий> установлен на правда Отказ Это <кнопка действий> также имеет уникальный идентификатор Получить кандидатов Отказ Мы устанавливаем удостоверение личности на Получить кандидатов Потому что это <кнопка действий> по сути получает все данные, относящиеся к кандидатам. Самое важное свойство этого <кнопка действий> это .Компин свойство. Когда это скрыто <кнопка действий> нажал, getCandidates () Способ называется. Мы позаботимся о нажатии на эту кнопку, манипулируя домом. Эта кнопка будет нажата и getCandidates () Метод будет уволен, как только пользователь (избиратель) бросит свой голос.
Давайте создадим getCandidates () Метод внутри Dapp-Page.js Отказ Эта функция должна быть рядом с другими пользовательскими функциями, такими как ShowResults () Отказ
Функция getCandidates () Выбирает данные из блокчана, вызывая умный контракт. Полученный результат затем представлен в виде таблицы с уникальным ID Кандидат - поиск Отказ Эта таблица будет создана на шаге 2.
Шаг 2: Создайте таблицу заполнителя
Нам нужно создать таблицу заполнителя, чтобы мы могли динамически заполнить его. Вы можете стиль это в любом случае, вам нравится. Мы будем использовать CSS Castwind.
Мы добавим этот стол заполнителя в девочка Мы создали на шаге 1 с ID Tally Отказ
Теперь мы все настроены, чтобы отобразить результаты. Данные, которые будут заполнены, готовы к загрузке, а заполнитель готов к заполнению. Все, что нам нужно сделать, это отобразить Div с идентификацией вполне . Нам нужно позаботиться о том, чтобы скрытый <кнопка действий> нажал перед Div загружен.
Шаг 3: Изменить ShowResults () функция
До сих пор мы просто регистрировали результат в консоли разработчиков. Теперь давайте манипулируем домом и отобразим результат в виде таблицы.
В ShowResults () Функция в Dapp-Page.js Составьте следующие изменения:
Мы получаем доступ к DOM, захватив элемент по ID (ELID) Отказ Во-первых, мы нажимаем на скрытый <кнопка действий> стрелять getCandidates () функция И тогда мы удаляем скрытый класс от Div с идентификацией Tally сделать это видимым в доме.
И это было все!
Теперь ваш DAPP должен успешно отображать текущее голосование.
Это была окончательная функция, которую мы хотели добавить в это голосование DAPP.
Если вы следуете за этой серией и сделали его до здесь, поздравляю! 🎉
Мы надеемся, что вы узнали, как сделать сквозной полное голосование Dapp на блокчане Ethereum. Мы будем приходить с более серией с интересными случаями использования, чтобы построить на блокчане.
Быть в курсе.
Построить с Dappstarter.
Оригинал: “https://dev.to/niharrs/how-to-display-voting-results-on-ui-3hmk”