В первой части серии руководств вы узнали, как начать создавать веб-приложение на Angular. Вы узнали, как настроить приложение, и создали компонент Login.
В этой части серии вы пойдете дальше и запишите REST API, необходимый для взаимодействия с банком MongoDB. Вы также создадите компонент Home который будет отображаться после успешного входа пользователя.
Начиная
Давайте начнем с клонирования исходного кода из первой части серии руководств.
|
1
|
git clone https://github.com/royagasthyan/AngularBlogApp-Login AngularBlogApp-Home
|
Перейдите в каталог проекта и установите необходимые зависимости.
|
1
2
|
cd AngularBlogApp-Home/client
npm install
|
После установки зависимостей перезапустите сервер приложений.
|
1
|
npm start
|
Укажите в браузере http: // localhost: 4200, и приложение должно быть запущено.
Создание Login REST API
В папке проекта AngularBlogApp-Home создайте еще одну папку с именем server . Вы будете писать API REST, используя Node.js.
Перейдите в папку на server и инициализируйте проект.
|
1
2
|
cd server
npm init
|
Введите необходимые данные, и вы должны инициализировать проект.
Вы будете использовать Express Framework для создания сервера. Установите Express используя следующую команду:
|
1
|
npm install express —save
|
После установки Express создайте файл с именем app.js Это будет корневой файл для вашего сервера Node.js.
Вот как app.js файл app.js :
|
1
2
3
4
5
6
7
8
|
const express = require(‘express’)
const app = express()
app.get(‘/api/user/login’, (req, res) => {
res.send(‘Hello World!’)
})
app.listen(3000, () => console.log(‘blog server running on port 3000!’))
|
Как видно из приведенного выше кода, вы импортировали express в app.js Используя express , вы создали приложение- app .
Используя app , вы выставили конечную точку /api/user/login которая будет отображать сообщение. Запустите сервер Node.js, используя следующую команду:
|
1
|
node app.js
|
Укажите в браузере http: // localhost: 3000 / api / user / login, и у вас должно появиться сообщение.
Вы будете делать POST запрос от службы Angular на сервер с параметрами username и password . Поэтому вам нужно проанализировать параметры запроса.
Установите body-parser , который является промежуточным программным обеспечением для синтаксического анализа тела Node.js, для анализа параметров запроса.
|
1
|
npm install body-parser —save
|
После того, как он установлен, импортируйте его в app.js
|
1
|
const bodyParser = require(‘body-parser’)
|
Добавьте следующий код в файл app.js
|
1
2
|
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended : false}))
|
Вышеупомянутые два параметра body-parser возвращают промежуточное программное обеспечение, которое анализирует только тела json и urlencoded и просматривает только те запросы, в которых заголовок Content-Type соответствует параметру type .
Вы будете использовать Mongoose для взаимодействия с MongoDB из Node.js. Так что установите Mongoose с помощью Node Package Manager (npm).
|
1
|
npm install mongoose —save
|
После установки mongoose импортируйте его в app.js
|
1
|
const mongoose = require(‘mongoose’);
|
Определите URL базы данных MongoDB в app.js
|
1
|
const url = ‘mongodb://localhost/blogDb’;
|
Давайте использовать Mongoose для подключения к базе данных MongoDB. Вот как это выглядит:
|
1
2
3
4
5
6
|
app.post(‘/api/user/login’, (req, res) => {
mongoose.connect(url, function(err){
if(err) throw err;
console.log(‘connected successfully, username is ‘,req.body.username,’ password is ‘,req.body.password);
});
})
|
Если соединение установлено, сообщение регистрируется вместе с username и password .
Вот как app.js файл app.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
const express = require(‘express’)
const bodyParser = require(‘body-parser’)
const app = express()
const mongoose = require(‘mongoose’);
const url = ‘mongodb://localhost/blogDb’;
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended : false}))
app.post(‘/api/user/login’, (req, res) => {
mongoose.connect(url, function(err){
if(err) throw err;
console.log(‘connected successfully, username is ‘,req.body.username,’ password is ‘,req.body.password);
});
})
app.listen(3000, () => console.log(‘blog server running on port 3000!’))
|
Перезапустите Node-сервер, используя следующую команду:
|
1
|
node app.js
|
Чтобы подключиться к Node-серверу из приложения Angular, вам необходимо установить прокси. Создайте файл с именем proxy.json в папке client/src . Вот как это выглядит:
|
1
2
3
4
5
6
|
{
«/api/*»: {
«target»: «http://localhost:3000»,
«secure»: «false»
}
}
|
Измените файл client package.json чтобы запустить приложение с использованием файла прокси.
|
1
|
«start»: «ng serve —proxy-config proxy.json»
|
Сохраните изменения и запустите клиентский сервер.
|
1
|
npm start
|
В браузере укажите http: // localhost: 4200 и введите имя пользователя и пароль. Нажмите кнопку входа, и вы должны зарегистрировать параметры в консоли Node.
Подтверждение логина пользователя
Чтобы взаимодействовать с MongoDB с помощью Mongoose, вам нужно определить схему и создать модель. Внутри папки server создайте папку с именем model .
Создайте файл с именем user.js внутри папки model . Добавьте следующий код в файл user.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
const mongoose = require(‘mongoose’);
const Schema = mongoose.Schema;
// create a schema
const userSchema = new Schema({
username: { type: String, required: true, unique: true },
password: { type: String, required: true },
name: { type: String }
}, { collection : ‘user’ });
const User = mongoose.model(‘User’, userSchema);
module.exports = User;
|
Как видно из приведенного выше кода, вы импортировали mongoose в user.js Вы создали userSchema используя schema mongoose, и создали модель User используя модель mongoose .
Импортируйте файл user.js внутри файла app.js
|
1
|
const User = require(‘./model/user’);
|
Прежде чем обращаться к коллекции user MongoDB, вам необходимо создать коллекцию. Перейдите в оболочку MongoDB, набрав mongo . Создайте user коллекции с помощью следующей команды:
|
1
|
db.createCollection(‘user’)
|
Вставьте запись, к которой вы будете обращаться.
|
1
2
3
4
5
|
db.user.insert({
name: ‘roy agasthyan’,
username: ‘roy’,
password: ‘123’
})
|
Теперь, когда mongoose подключится к MongoDB, вы найдете запись из базы данных, используя переданные username и password . Вот как выглядит API:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
app.post(‘/api/user/login’, (req, res) => {
mongoose.connect(url,{ useMongoClient: true }, function(err){
if(err) throw err;
User.find({
username : req.body.username, password : req.body.password
}, function(err, user){
if(err) throw err;
if(user.length === 1){
return res.status(200).json({
status: ‘success’,
data: user
})
} else {
return res.status(200).json({
status: ‘fail’,
message: ‘Login Failed’
})
}
})
});
})
|
Как видно из приведенного выше кода, после получения ответа из базы данных вы возвращаете его на стороне клиента.
Сохраните вышеуказанные изменения и попробуйте запустить клиент и сервер. Введите имя пользователя как roy и пароль как 123 и вы сможете увидеть результат в консоли браузера.
Перенаправление на домашний компонент
После успешной проверки пользователя вам необходимо перенаправить пользователя на Home компонент. Итак, начнем с создания компонента Home .
Создайте папку с именем Home внутри папки src/app . Создайте файл с именем home.component.html и добавьте следующий HTML-код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<header class=»header clearfix»>
<nav>
<ul class=»nav nav-pills float-right»>
<li class=»nav-item»>
<a class=»nav-link active» href=»#»>Home <span class=»sr-only»>(current)
</li>
<li class=»nav-item»>
<a class=»nav-link» href=»#»>Add</a>
</li>
<li class=»nav-item»>
<a class=»nav-link» href=»#»>Logout</a>
</li>
</ul>
</nav>
<h3 class=»text-muted»>Angular Blog App</h3>
</header>
<main role=»main»>
<div class=»jumbotron»>
<h1 class=»display-3″>Lorem ipsum</h1>
<p class=»lead»>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p><a class=»btn btn-lg btn-success» href=»#» role=»button»>Read More …</a></p>
</div>
<div class=»row marketing»>
<div class=»col-lg-6″>
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus.
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class=»col-lg-6″>
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus.
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
</main>
<footer class=»footer»>
<p>©
</footer>
|
Создайте файл с именем home.component.css и добавьте следующий стиль CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
.header,
.marketing,
.footer {
padding-right: 1rem;
padding-left: 1rem;
}
/* Custom page header */
.header {
padding-bottom: 1rem;
border-bottom: .05rem solid #e5e5e5;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem;
}
/* Custom page footer */
.footer {
padding-top: 1.5rem;
color: #777;
border-top: .05rem solid #e5e5e5;
}
/* Customize container */
@media (min-width: 48em) {
.container {
max-width: 46rem;
}
}
.container-narrow > hr {
margin: 2rem 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: .05rem solid #e5e5e5;
}
.jumbotron .btn {
padding: .75rem 1.5rem;
font-size: 1.5rem;
}
/* Supporting marketing content */
.marketing {
margin: 3rem 0;
}
.marketing p + h4 {
margin-top: 1.5rem;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 48em) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 2rem;
}
.jumbotron {
border-bottom: 0;
}
}
|
Создайте файл компонента с именем home.component.ts и добавьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
|
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styleUrls: [‘./home.component.css’]
})
export class HomeComponent {
}
|
Как видно из приведенного выше кода, вы только что создали @Component декоратор @Component и указав selector , templateUrl и styleUrls .
Добавьте NgModules к NgModules в app.module.ts .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { ROUTING } from ‘./app.routing’;
import { FormsModule } from ‘@angular/forms’;
import { HttpClientModule } from ‘@angular/common/http’;
import { RootComponent } from ‘./root/root.component’;
import { LoginComponent } from ‘./login/login.component’;
import { HomeComponent } from ‘./home/home.component’;
@NgModule({
declarations: [
RootComponent,
LoginComponent,
HomeComponent
],
imports: [
BrowserModule,
ROUTING,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [RootComponent]
})
export class AppModule { }
|
Импортируйте HomeComponent в app.routing.ts и определите маршрут для home .
|
01
02
03
04
05
06
07
08
09
10
11
12
|
import { RouterModule, Routes } from ‘@angular/router’;
import { ModuleWithProviders } from ‘@angular/core/src/metadata/ng_module’;
import { LoginComponent } from ‘./login/login.component’;
import { HomeComponent } from ‘./home/home.component’;
export const AppRoutes: Routes = [
{ path: », component: LoginComponent },
{ path: ‘home’, component: HomeComponent }
];
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
|
В методе validateLogin в файле login.component.ts при успешной проверке перенаправьте пользователя на HomeComponent . Для перенаправления вам необходимо импортировать Angular Router .
|
1
|
import { Router } from ‘@angular/router’;
|
Если ответ на вызов API будет успешным, вы перейдете к HomeComponent с помощью углового Router .
|
1
2
3
4
5
|
if(result[‘status’] === ‘success’) {
this.router.navigate([‘/home’]);
} else {
alert(‘Wrong username password’);
}
|
Вот как login.component.ts файл login.component.ts :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
import { Component } from ‘@angular/core’;
import { LoginService } from ‘./login.service’;
import { User } from ‘../models/user.model’;
import { Router } from ‘@angular/router’;
@Component({
selector: ‘app-login’,
templateUrl: ‘./login.component.html’,
styleUrls: [‘./login.component.css’],
providers: [ LoginService ]
})
export class LoginComponent {
public user : User;
constructor(private loginService: LoginService, private router: Router) {
this.user = new User();
}
validateLogin() {
if(this.user.username && this.user.password) {
this.loginService.validateLogin(this.user).subscribe(result => {
console.log(‘result is ‘, result);
if(result[‘status’] === ‘success’) {
this.router.navigate([‘/home’]);
} else {
alert(‘Wrong username password’);
}
}, error => {
console.log(‘error is ‘, error);
});
} else {
alert(‘enter user name and password’);
}
}
}
|
Сохраните вышеуказанные изменения и перезагрузите сервер. Войдите в приложение, используя существующее имя пользователя и пароль, и вы будете перенаправлены на HomeComponent .
Завершение
В этом руководстве вы увидели, как написать конечную точку API REST для входа пользователя. Вы узнали, как использовать Mongoose для взаимодействия с MongoDB из Node. После успешной проверки вы увидели, как использовать Angular Router для перехода к HomeComponent .
Как ваш опыт научился писать приложение Angular и его бэкэнд? Дайте нам знать ваши мысли и предложения в комментариях ниже.
Исходный код из этого урока доступен на GitHub .