Автор оригинала: Parth Shandilya.
Badgeyay Проект в настоящее время разделен на две части I.e Front-End-Ember JS и Back-End с REST-API, запрограммированным в Python.
После обсуждения мы доработали, чтобы пойти с семантической структурой пользовательского интерфейса, который использует простой, общий язык для частей элементов интерфейса, а также знакомые шаблоны, найденные на естественных языках для описания элементов. Semantic позволяет быстро построить красивые сайты, с Краткий HTML , Интуитивно понятный JavaScript и Упрощенная отладка , помогая сделать внешнее развитие восхитительным опытом.
SEMANTICANES реагирован, что позволяет расширить веб-приложение для масштабирования на нескольких устройствах. Семантическая продукция готова и партнерства с рамочной структурой EMBER, что означает, что мы можем интегрировать его с помощью EMBER Frameworks для организации нашего слоя UI наряду с нашей логикой приложения.
В этом блоге я буду обсуждать, как я добавил вход и регистрацию формы и их проверки, используя семантический интерфейс для Badgeyay Frestend в моем Потяните запрос.
Давайте начнем и понять это шаг за шагом.
Шаг 1:
Создайте компоненты Ember входа в систему и зарегистрируйтесь, используя следующую команду:
$ ember generate component forms/login-form $ ember generate component forms/signup-form
Шаг 2:
Создайте вход и регистрируйте маршрут следующими командами.
$ ember generate route login $ ember generate route signup
Шаг 3:
Создайте вход и зарегистрировать контроллер следующих команд.
$ ember generate controller login $ ember generate controller signup
Шаг 4:
Теперь мы настроили компоненты, маршруты и контроллеры для добавления форм для входа в систему и регистрация. Теперь давайте начнем писать HTML в рулях, добавляя проверки и реализующие проверки для компонентов формы. В этом блоге я буду делиться кодом входа в систему и действия, связанные с входом в систему пользователя. Вы можете проверить весь код мой Потянуть запрос который я сделал для добавления этих форм.
Шаг 4.1: Создание формы входа
Welcome back !
We're happy helping you get beautiful name badges.Or
Login with
Шаг 4.2: Добавление проверки формы
import Component from '@ember/component'; export default Component.extend({ init() { this._super(...arguments); }, actions: { logIn(provider) { let email = ''; let password = ''; if (provider == 'password') { email = this.get('email'); password = this.get('password'); } this.get('login')(provider, email, password); }, logOut() { this.get('session').close(); } }, didRender() { this.$('.ui.form') .form({ inline : true, delay : false, fields : { email: { identifier : 'email', rules : [ { type : 'email', prompt : 'Please enter a valid email address' } ] }, password: { identifier : 'password', rules : [ { type : 'empty', prompt : 'Please enter a password' } ] } } }) ; } });
Шаг 4.3: Добавление действий входа
import Ember from 'ember'; import Controller from '@ember/controller'; const { inject } = Ember; export default Controller.extend({ session: inject.service(), beforeModel() { return this.get('session').fetch().catch(function() {}); }, actions: { login(provider, email, password) { const that = this; if (provider === 'password') { this.get('session').open('firebase', { provider: 'password', email, password }).then(function(userData) { console.log(userData); that.transitionToRoute('/'); }).catch(function(err) { console.log(err.message); }); } else { const that = this; this.get('session').open('firebase', { provider }).then(function(userData) { console.log(userData); that.transitionTo('/'); }).catch(function(err) { console.log(err.message); }); } }, logOut() { this.get('session').close(); } } });
Я сделал форму входа в систему и аналогичным образом, я реализовал форму регистрации и полный код можно увидеть в моем Потянуть запрос Отказ
Теперь мы сделаем с помощью HTML в рулях, добавляя проверки и реализацию проверки для компонентов формы.
Шаг 5:
Теперь запустите сервер, чтобы увидеть реализованные изменения следующей командой.
Это покажет так:
Перейдите к localhost, чтобы увидеть изменения.
Теперь мы все сделаем с настройкой форм входа и регистрации и их валидации, используя семантические пользовательские интерфейсы в репозитории Badgeyay.
Вот как я добавил журнал и формы регистрации и их валидации в моем Потянуть запрос Отказ
Ресурсы:
- Semantic Ui Docs – Ссылка на сайт
- Ember Docs – Ссылка на сайт