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

Создание приложения для блоггинга с использованием 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, и вас должно запуститься приложение.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Создание приложения для блоггинга с использованием 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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Курс по Angular 4 NgRx

Прямо сейчас посмотрите курс по Angular 4 NgRx

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree