Вступление
ReactJS — одна из основных библиотек, используемых для создания одностраничных веб-приложений и разработки простых мобильных приложений. React был разработан Джорданом Уолком, инженером-программистом в Facebook; фреймворк в настоящее время поддерживается Facebook. В этой статье мы узнаем, как создавать страницы регистрации и входа пользователей с помощью ReactJS и Web API.
Эта статья охватывает:
- Создать базу данных и таблицу
- Создать проект веб-API
- Создать проект React
- Установите Bootstrap и React ремешок
- Добавить маршрутизацию
Предпосылки
- Базовые знания React.js и веб-API
- Visual Studio
- Visual Studio Code
- SQL Server Management Studio
- Node.js
Вам также может понравиться:
Операции CRUD с использованием ReactJS и ASP.NET Web API
Создать базу данных и таблицу
Откройте SQL Server Management Studio, создайте базу данных с именем « Сотрудники» и в этой базе данных создайте таблицу. Дайте этой таблице такое имя, как EmployeeLogin .
SQL
xxxxxxxxxx
1
CREATE TABLE [dbo]. [EmployeeLogin] (
2
[Id] [ int ] IDENTITY ( 1 , 1 ) НЕ NULL ,
3
[Email] [ varchar ] ( 50 ) NULL ,
4
[Пароль] [ varchar ] ( 50 ) NULL ,
5
[EmployeeName] [ varchar ] ( 50 ) NULL ,
6
[Город] [ Варчар ] ( 50 ) NULL ,
7
[Отдел] [ varchar ] ( 50 ) NULL ,
8
CONSTRAINT [PK_EmployeeLogin] ПЕРВИЧНЫЙ КЛЮЧ КЛАСТЕР
9
(
10
[Id] ASC
11
) С (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON , ALLOW_PAGE_LOCKS = ON ) ON [ПЕРВИЧНЫЙ]
12
) НА [ПЕРВИЧНО]
13
14
ИДТИ
Создать проект веб-API
Откройте Visual Studio и создайте новый проект.
Измените имя на LoginApplication и нажмите «ОК»> «Выберите Web API в качестве шаблона».
Щелкните правой кнопкой мыши папку «Модели» в обозревателе решений и выберите «Добавить» >> «Новый элемент» >> «Данные».
Нажмите кнопку «Модель данных объекта ADO.NET» и нажмите «Добавить». Выберите «EF designer» из базы данных и нажмите кнопку «Далее».
Добавьте свойства соединения, выберите имя базы данных на следующей странице и нажмите OK.
Проверьте флажок таблицы. Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку «Готово».
Теперь наша модель данных успешно создана.
Далее мы добавляем новую папку с именем «VM». Щелкните правой кнопкой мыши на нем и добавьте три класса — Вход, Регистрация и Ответ. Теперь вставьте следующий код в эти классы.
Класс входа
Джава
xxxxxxxxxx
1
публичный класс Войти
2
{
3
открытая строка Email { get ; установить ; }
4
публичная строка Password { get ; установить ; }
5
}
Регистрация класса
Джава
xxxxxxxxxx
1
Публичный класс Регистрация
2
{
3
public int Id { get ; установить ; }
4
открытая строка Email { get ; установить ; }
5
публичная строка Password { get ; установить ; }
6
открытая строка EmployeeName { get ; установить ; }
7
публичная строка City { get ; установить ; }
8
публичный строковый отдел { get ; установить ; }
9
}
Класс ответа
Джава
xxxxxxxxxx
1
Ответ общественного класса
2
{
3
публичная строка Status { set ; получить ; }
4
открытая строка Message { set ; получить ; }
5
6
}
Щелкните правой кнопкой мыши папку «Контроллеры» и добавьте новый контроллер. Назовите его «Контроллер входа» и добавьте следующие пространства имен:
Джава
xxxxxxxxxx
1
используя LoginApplication . Модели ;
2
используя LoginApplication . ВМ ;
Создайте два метода в этом контроллере для вставки и входа. Добавьте следующий код в этот контроллер:
Джава
xxxxxxxxxx
1
используя Систему ;
2
используя систему . Коллекции . Универсальный ;
3
используя систему . Линк ;
4
используя систему . Сеть ;
5
используя систему . Net . Http ;
6
используя систему . Web . Http ;
7
используя LoginApplication . Модели ;
8
используя LoginApplication . ВМ ;
9
10
Пространство имен LoginApplication . Контроллеры
11
{
12
[ RoutePrefix ( «Api / login» )]
13
открытый класс LoginController : ApiController
14
{
15
DB EmployeesEntities = новые EmployeesEntities ();
16
[ Маршрут ( "InsertEmployee" )]
17
[ HttpPost ]
18
открытый объект InsertEmployee ( Register Reg )
19
{
20
пытаться
21
{
22
23
EmployeeLogin EL = новый EmployeeLogin ();
24
если ( EL . Id == 0 )
25
{
26
EL . EmployeeName = Reg . EmployeeName ;
27
EL . Город = Рег . Город ;
28
EL . Email = Рег . Электронная почта ;
29
EL . Пароль = Рег . Пароль ;
30
EL . Отдел = Рег . Отдел ;
31
БД . EmployeeLogins . Добавить ( EL );
32
БД . SaveChanges ();
33
вернуть новый ответ
34
{ Status = "Success" , Message = "Record SuccessFully Saved." };
35
}
36
}
37
поймать ( исключение )
38
{
39
40
бросить ;
41
}
42
вернуть новый ответ
43
{ Status = «Ошибка» , Message = «Неверные данные». };
44
}
45
[ Маршрут ( «Логин» )]
46
[ HttpPost ]
47
Публичный ответ employeeLogin ( Войти, логин )
48
{
49
var log = DB . EmployeeLogins . Где ( x => x . Email . Равно ( логин . Электронная почта ) && x . Пароль . Равно ( логин . Пароль )). FirstOrDefault ();
50
51
if ( log == null )
52
{
53
return new Response { Status = "Invalid" , Message = "Invalid User." };
54
}
55
еще
56
return new Response { Status = " Успешно" , Message = "Вход успешно" };
57
}
58
}
59
}
Теперь давайте включим Cors. Перейдите в Инструменты , откройте диспетчер пакетов NuGet , найдите Cors и установите пакет Microsoft.Asp.Net.WebApi.Cors . Откройте Webapiconfig.cs и добавьте следующие строки:
Джава
xxxxxxxxxx
1
EnableCorsAttribute CORS = новый EnableCorsAttribute ( "*" , "*" , "*" );
2
конфиг . EnableCors ( CORS );
Создать проект React
Теперь создайте новый проект ReactJS с помощью следующей команды.
Джава
xxxxxxxxxx
1
npx создать - reatc - приложение loginapp
Откройте вновь созданный проект в коде Visual Studio и установите Reactstrap и Bootstrap в этом проекте с помощью следующей команды.
Джава
xxxxxxxxxx
1
npm install - сохранить загрузчик
2
НАЯ установка - сохранить reactstrap срабатывает реагировать - РОМ
Используйте следующую команду для добавления маршрутизации в React.
Джава
xxxxxxxxxx
1
NPM установить реагировать - маршрутизатор - дом - сохранить
Теперь перейдите в папку src и добавьте три новых компонента.
- Login.js
- Reg.js
- Dashboard.js
Теперь откройте файл Reg.js и добавьте следующий код:
Джава
xxxxxxxxxx
1
импортировать React , { Component } из 'response' ;
2
import { Button , Card , CardFooter , CardBody , CardGroup , Col , Container , Form , Input , InputGroup , InputGroupAddon , InputGroupText , Row } из 'responsestrap' ;
3
4
Класс Reg расширяет Компонент {
5
6
constructor () {
7
супер ();
8
9
это . состояние = {
10
EmployeeName : '' ,
11
Город : '' ,
12
Email : '' ,
13
Пароль : '' ,
14
Отдел : ''
15
}
16
17
18
это . Email = это . Электронная почта . связать ( это );
19
это . Пароль = это . Пароль . связать ( это );
20
это . EmployeeName = это . EmployeeName . связать ( это );
21
это . Пароль = это . Пароль . связать ( это );
22
это . Отдел = это . Отдел . связать ( это );
23
это . Город = это . Город . связать ( это );
24
это . зарегистрироваться = это . регистр . связать ( это );
25
}
26
27
28
29
Email ( событие ) {
30
это . setState ({ Email : event . target . value })
31
}
32
33
Отдел ( мероприятие ) {
34
это . setState ({ Отдел : событие . цель . значение })
35
}
36
37
Пароль ( событие ) {
38
это . setState ({ Пароль : событие . цель . значение })
39
}
40
Город ( событие ) {
41
это . setState ({ Город : событие . цель . значение })
42
}
43
EmployeeName ( событие ) {
44
это . setState ({ EmployeeName : event . target . value })
45
}
46
47
зарегистрироваться ( событие ) {
48
49
fetch ( 'http: // localhost: 51282 / Api / login / InsertEmployee' , {
50
метод : «пост» ,
51
заголовки : {
52
«Принять» : «приложение / JSON» ,
53
'Content-Type' : 'application / json'
54
},
55
тело : JSON . stringify ({
56
57
58
EmployeeName : это . состояние . EmployeeName ,
59
Пароль : это . состояние . Пароль ,
60
Электронная почта : это . состояние . Электронная почта ,
61
Город : это . состояние . Город ,
62
Отдел : это . состояние . отдел
63
})
64
}). затем (( Ответ ) => Ответ . json ())
65
, then (( Результат ) => {
66
если ( Результат . Статус == «Успех» )
67
это . реквизит . история . нажать ( «/ Панель инструментов» );
68
еще
69
alert ( 'Sorrrrrry !!!! Не аутентифицированный пользователь !!!!!' )
70
})
71
}
72
73
render () {
74
75
возврат (
76
< div className = "app flex-row align-items-center" >
77
< Контейнер >
78
< Row className = "justify-content-center" >
79
< Col md = "9" lg = "7" xl = "6" >
80
< Card className = "mx-4" >
81
< CardBody className = "p-4" >
82
< Форма >
83
< div class = "row" className = "mb-2 pageheading" >
84
< div class = "col-sm-12 btn btn-primary" >
85
Войти вверх
86
</ div >
87
</ div >
88
< InputGroup className = "mb-3" >
89
< Input type = "text" onChange = { this . EmployeeName } placeholder = "Введите имя сотрудника" />
90
</ InputGroup >
91
< InputGroup className = "mb-3" >
92
< Input type = "text" onChange = { this . Email } placeholder = "Введите адрес электронной почты" />
93
</ InputGroup >
94
< InputGroup className = "mb-3" >
95
< Тип ввода = "пароль" onChange = { это . Пароль } placeholder = "Введите пароль" />
96
</ InputGroup >
97
< InputGroup className = "mb-4" >
98
< Input type = "text" onChange = { this . Город } placeholder = "Введите город" />
99
</ InputGroup >
100
< InputGroup className = "mb-4" >
101
< Input type = "text" onChange = { this . Отдел } местозаполнитель = "Войти в отдел" />
102
</ InputGroup >
103
< Button onClick = { это . регистр } color = блок "success" > Создать аккаунт </ Button >
104
</ Form >
105
</ CardBody >
106
</ Card >
107
</ Col >
108
</ Row >
109
</ Container >
110
</ div >
111
);
112
}
113
}
114
115
экспорт по умолчанию Рег ;
Теперь откройте файл Login.js и добавьте следующий код:
Джава
xxxxxxxxxx
1
импортировать React , { Component } из 'response' ;
2
import './App.css' ;
3
import { Button , Card , CardBody , CardGroup , Col , Container , Form , Input , InputGroup , InputGroupAddon , InputGroupText , Row } из 'responsestrap' ;
4
Класс Логин расширяет Компонент {
5
constructor () {
6
супер ();
7
8
это . состояние = {
9
Email : '' ,
10
Пароль : ''
11
}
12
13
это . Пароль = это . Пароль . связать ( это );
14
это . Email = это . Электронная почта . связать ( это );
15
это . Войти = это . Войти . связать ( это );
16
}
17
18
Email ( событие ) {
19
это . setState ({ Email : event . target . value })
20
}
21
Пароль ( событие ) {
22
это . setState ({ Пароль : событие . цель . значение })
23
}
24
логин ( событие ) {
25
отладчик ;
26
fetch ( 'http: // localhost: 51282 / Api / login / Login' , {
27
метод : «пост» ,
28
заголовки : {
29
«Принять» : «приложение / JSON» ,
30
'Content-Type' : 'application / json'
31
},
32
тело : JSON . stringify ({
33
Электронная почта : это . состояние . Электронная почта ,
34
Пароль : это . состояние . пароль
35
})
36
}). затем (( Ответ ) => Ответ . json ())
37
, тогда (( результат ) => {
38
консоль . журнал ( результат );
39
if ( result . Status == 'Invalid' )
40
оповещение ( «Неверный пользователь» );
41
еще
42
это . реквизит . история . нажать ( «/ Панель инструментов» );
43
})
44
}
45
46
render () {
47
48
возврат (
49
< div className = "app flex-row align-items-center" >
50
< Контейнер >
51
< Row className = "justify-content-center" >
52
< Col md = "9" lg = "7" xl = "6" >
53
54
< CardGroup >
55
< Card className = "p-2" >
56
< CardBody >
57
< Форма >
58
< div class = "row" className = "mb-2 pageheading" >
59
< div class = "col-sm-12 btn btn-primary" >
60
Авторизоваться
61
</ div >
62
</ div >
63
< InputGroup className = "mb-3" >
64
65
< Input type = "text" onChange = { this . Email } placeholder = "Введите адрес электронной почты" />
66
</ InputGroup >
67
< InputGroup className = "mb-4" >
68
69
< Тип ввода = "пароль" onChange = { это . Пароль } placeholder = "Введите пароль" />
70
</ InputGroup >
71
< Button onClick = { это . логин } color = блок "success" > логин </ Button >
72
</ Form >
73
</ CardBody >
74
</ Card >
75
</ CardGroup >
76
</ Col >
77
</ Row >
78
</ Container >
79
</ div >
80
);
81
}
82
}
83
84
логин экспорта по умолчанию ;
Откройте файл Dahboard.js и добавьте следующий код:
Джава
xxxxxxxxxx
1
импортировать React , { Component } из 'response' ;
2
import './App.css' ;
3
import { Button , Card , CardBody , CardGroup , Col , Container , Form , Input , InputGroup , InputGroupAddon , InputGroupText , Row } из 'responsestrap' ;
4
Панель инструментов класса расширяет Компонент {
5
render () {
6
7
возврат (
8
< div class = "row" className = "mb-2 pageheading" >
9
< div class = "col-sm-12 btn btn-primary" >
10
Щиток приборов
11
</ div >
12
</ div >
13
);
14
}
15
}
16
17
панель экспорта по умолчанию ;
Откройте файл App.css и добавьте следующие классы CSS:
Джава
xxxxxxxxxx
1
, App {
2
текст - выравнивание : по центру ;
3
}
4
, navheader {
5
поле - верх : 10 пикселей ;
6
цвет : черный ! важно ;
7
фон - цвет : # b3beca ! важный
8
}
9
10
, PageHeading
11
{
12
поле - верх : 10 пикселей ;
13
поле - снизу : 10 пикселей ;
14
цвет : черный ! важно ;
15
}
Откройте файл App.js и добавьте следующий код:
Джава
xxxxxxxxxx
1
импорт React из 'реакции' ;
2
импортировать логотип из ./logo.svg ;
3
import './App.css' ;
4
импортировать логин из './Login' ;
5
импортировать Reg из './Reg' ;
6
импортировать Dashboard из './Dashboard' ;
7
импорт { BrowserRouter , как маршрутизатор , коммутатор , Route , Link } от 'среагировать-маршрутизатор-дом' ;
8
function App () {
9
возврат (
10
< Маршрутизатор >
11
< div className = "container" >
12
< nav className = "navbar navbar-expand-lg navheader" >
13
< div className = "collapse navbar-collapse" >
14
< ul className = "navbar-nav mr-auto" >
15
< li className = "nav-item" >
16
< Link to = { '/ Login' } className = "nav-link" > Логин </ Link >
17
</ li >
18
< li className = "nav-item" >
19
< Ссылка на = { '/ Signup' } Classname = "нав-ссылка" > Зарегистрироваться Up </ Ссылка >
20
</ li >
21
22
</ ul >
23
</ div >
24
</ Нав > < бр />
25
< Switch >
26
< Route точный путь = '/ Login' компонент = { Login } />
27
Компонент < Route path = '/ Registration' = { Reg } />
28
29
</ Switch >
30
< Switch >
31
Компонент < Route path = '/ Dashboard' = { Dashboard } />
32
</ Switch >
33
</ div >
34
</ Router >
35
);
36
}
37
38
приложение по умолчанию для экспорта ;
Теперь запустите проект с помощью команды запуска npm и проверьте результаты.
Введите данные и нажмите кнопку «Создать учетную запись»:
Введите адрес электронной почты и пароль и нажмите кнопку входа.
Дальнейшее чтение
Использование REST API с помощью React.js
Добавить аутентификацию пользователя в ваше приложение React