Создание приложения для блоггинга с использованием Angular и MongoDB: Отображение списка анонсов постов

22.03.2018

Создание приложения для блоггинга с использованием Angular и MongoDB: Отображение списка анонсов постов

От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». В предыдущей части мы рассмотрели, как написать конечную точку REST API для входа пользователя в систему. Мы использовали Mongoose для взаимодействия с MongoDB от Node. После успешной валидации мы использовали Angular Router для перенаправления пользователя к HomeComponent. В этой части серии мы создадим компонент для того, чтобы выводить список анонсов постов на главной странице.

Приступим. Давайте начнем с клонирования исходного кода из последней части серии.

git clone https://github.com/royagasthyan/AngularBlogApp-Home AngularBlogApp-Post

Перейдите в каталог проекта и установите необходимые зависимости.

cd AngularBlogApp-Post/client
npm install
cd AngularBlogApp-Post/server
npm install

После установки зависимостей перезапустите клиентское и серверное приложение.

cd AngularBlogApp-Post/client
npm start
cd AngularBlogApp-Post/server
node app.js

Откройте в браузере адрес http://localhost:4200, и вас должно запуститься приложение.

Создание приложения для блоггинга с использованием Angular и MongoDB: Отображение списка анонсов постов

Создание компонента Show Post

После входа пользователя в приложение он перенаправляется к компоненту HomeComponent. HomeComponent выполняет роль компонента оболочки для всех компонентов, отображаемых внутри него. В нем мы будем отображать список постов блога, добавленных пользователем в HomeComponent.

Чтобы отобразить посты блога, давайте создадим новый компонент под названием ShowPostComponent. Создайте в папке src/app папку с именем show-post. В папке show-post создайте файл show-post.component.html и добавьте в него следующий код HTML:

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a>
</div>

Создайте файл show-post.component.ts, который будет содержать класс ShowPostComponent. Вот как он должен выглядеть:

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-show-post', templateUrl: './show-post.component.html'
})
export class ShowPostComponent implements OnInit { constructor() { } ngOnInit(){ } }

Импортируйте ShowPostComponent в файл app.module.ts.

import { ShowPostComponent } from './show-post/show-post.component';

Добавьте ShowPostComponent в NgModule в файле app.module.ts.

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';
import { ShowPostComponent } from './show-post/show-post.component'; @NgModule({ declarations: [ RootComponent, LoginComponent, HomeComponent, ShowPostComponent ], imports: [ BrowserModule, ROUTING, FormsModule, HttpClientModule ], providers: [], bootstrap: [RootComponent]
})
export class AppModule { }

Измените файл home.component.html, чтобы включить в него селектор ShowPostComponent.

<app-show-post></app-show-post>

Вот как будет выглядеть измененный файл home.component.html:

<header class="header clearfix"> <nav> <ul class="nav nav-pills float-right"> <li class="nav-item"> <button type="button" class="btn btn-primary"> Home </button> </li> <li class="nav-item"> <button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal"> Add </button> </li> <li class="nav-item"> <button type="button" class="btn btn-link"> Logout </button> </li> </ul> </nav> <h3 class="text-muted">Angular Blog App</h3>
</header> <main role="main"> <app-show-post></app-show-post>
</main> <footer class="footer"> <p>&copy; Company 2017</p>
</footer>

Сохраните указанные выше изменения и обновите клиентское приложение. Теперь при входе в приложение вы сможете просматривать записи в блоге.

Создание приложения для блоггинга с использованием Angular и MongoDB: Отображение списка анонсов постов

Создание службы Show Post Component

Данные, отображаемые в службе ShowPostComponent, отображаются с помощью статического кода. Вам понадобится служба для запроса списка постов блога из базы данных MongoDB. Давайте создадим службу для ShowPostComponent. Создайте файл show-post.service.ts в папке src/app/show-post и добавьте в него следующий код:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; @Injectable()
export class ShowPostService { constructor(private http: HttpClient){ } }

Внутри ShowPostService создайте метод getAllPost, который будет обеспечивать вызов REST API для получения списка постов в блоге. Вот как это должно выглядеть:

getAllPost(){ return this.http.post('/api/post/getAllPost',{})
}

Вот как теперь будет выглядеть файл show-post.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Post } from '../models/post.model'; @Injectable()
export class ShowPostService { constructor(private http: HttpClient){ } getAllPost(){ return this.http.post('/api/post/getAllPost',{}) } }

Затем вам нужно прописать API REST для запроса коллекции MongoDB, чтобы получить список постов блога. Давайте начнем с создания на стороне сервера модели для постов. В папке models создайте файл post.js. Подключите модуль Mongoose и создать схему для постов блога и экспортируйте ее. Вот как будет выглядеть файл /server/models/post.js:

const mongoose = require('mongoose');
const Schema = mongoose.Schema; // создание схемы
const postSchema = new Schema({ title: { type: String, required: true }, description: { type: String, required: true }
}, { collection : 'post' }); const Post = mongoose.model('Post', postSchema);
module.exports = Post;

Экспортируйте указанный выше файл post.js в app.js.

const Post = require('./model/post');

Создайте конечную точку API /api/post/getAllPost для получения списка постов блога. Для подключения к базе данных MongoDB используйте клиент mongoose.

app.post('/api/post/getAllPost', (req, res) => { mongoose.connect(url, { useMongoClient: true } , function(err){ if(err) throw err; console.log('connection established successfully'); });
})

После того, как вы установил соединение, вы можете использовать модель Post, чтобы найти список постов блога.

Post.find({},[],{},(err, doc) => { if(err) throw err; console.log('result is ',doc);
})

Обратный вызов .find возвращает список документов. Возвращенные документы будут отображаться в порядке возрастания, поэтому добавьте условие для сортировки постов блога в порядке убывания.

Post.find({},[],{ sort: { _id: -1 } },(err, doc) => { if(err) throw err;
})

После того, как мы получим список документов, запрошенных из базы данных, мы возвращаем данные вместе со статусом. Вот как выглядит API REST:

app.post('/api/post/getAllPost', (req, res) => { mongoose.connect(url, { useMongoClient: true } , function(err){ if(err) throw err; Post.find({},[],{ sort: { _id: -1 } },(err, doc) => { if(err) throw err; return res.status(200).json({ status: 'success', data: doc }) }) });
})

Выполнение вызова API

В файле show-post.component.ts определите список массивов для хранения результатов вызова API.

public posts : any [];

Импортируйте ShowPostService в ShowPostComponent.

import { ShowPostService } from './show-post.service';

Добавьте ShowPostService в качестве провайдера ShowPostComponent.

[/JS]
@Component({
selector: ‘app-show-post’,
templateUrl: ‘./show-post.component.html’,
styleUrls: [‘./show-post.component.css’],
providers: [ ShowPostService ]
})

 <p>Определите метод getAllPost для вызова метода службы. Вот как это должно выглядеть:</p> [JS]
getAllPost(){ this.showPostService.getAllPost().subscribe(result => { this.posts = result['data']; });
}

Как видно из приведенного выше кода, в результирующих данных задается переменная posts. Вызовите описанный выше метод из метода ngOnInit, чтобы информация о постах блога извлекалась после инициализации компонента.

ngOnInit(){ this.getAllPost();
}

Вот как будет выглядеть файл show-post.component.ts:

import { Component, OnInit } from '@angular/core';
import { ShowPostService } from './show-post.service'; @Component({ selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], providers: [ ShowPostService ]
})
export class ShowPostComponent implements OnInit { public posts : any []; constructor(private showPostService: ShowPostService) { } ngOnInit(){ this.getAllPost(); } getAllPost(){ this.showPostService.getAllPost().subscribe(result => { this.posts = result['data']; }); } }

Отображение постов блога

В коллекции MongoDB записи могут отсутствовать. Поэтому давайте добавим несколько записей в MongoDB из оболочки mongo.
Введите оболочку MongoDB, используя следующую команду:

mongo

После того, как вы ввели оболочку mongo, проверьте базу данных, доступную в MongoDB.

show collections;

Выберите из перечисленных записей базу данных blogDb.

use blogDb

Создайте коллекцию post.

db.createCollection('post')

Вставьте пару записей в коллекцию post.

db.post.insert( { title : 'TutsPlus Python Entry', description : 'Welcome to official entry of TutsPlus Python programming session' }
)

Теперь давайте свяжем нашу переменную posts в ShowPostComponent с кодом HTML. Мы будем использовать директиву ngFor для перебора переменной posts и отображения постов блога. Измените файл show-post.component.html, как показано ниже:

<div class="list-group"> <a *ngFor="let post of posts" href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">{{post.title}}</h5> <small>3 days ago</small> </div> <p class="mb-1">{{post.description}}</p> <small>read more...</small> </a>
</div>

Сохраните указанные выше изменения и перезапустите сервер клиента REST API. Войдите в приложение, и у вас на главной странице должны отображаться посты, вставленные из MongoDB.

Создание приложения для блоггинга с использованием Angular и MongoDB: Отображение списка анонсов постов

Заключение

В этом руководстве мы создали ShowPostComponent для отображения информации о постах блога из базы данных MongoDB. Мы создали API REST для выполнения запроса к базе данных MongoDB с использованием клиента Mongoose с сервера Node. В следующей части серии вы узнаете, как создать AddPostComponent для добавления новых постов через пользовательский интерфейс приложения. Исходный код этого руководства доступен на GitHub.

Автор: Roy Agasthyan

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.