Creación de una aplicación de blogs usando Angular y MongoDB Mostrar publicación

En la última parte de la serie de tutoriales, vio cómo escribir el punto final de la API REST para el inicio de sesión del usuario. Usaste Mongoose para interactuar con MongoDB desde Node. Después de la validación exitosa, viste cómo usar Angular Enrutador para navegar a la InicioComponente.

En esta parte de la serie de tutoriales, creará un componente para enumerar los detalles de la publicación del blog en la página de inicio.

Empezando

Comencemos clonando el código fuente de la última parte de la serie de tutoriales..

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

Vaya al directorio del proyecto e instale las dependencias necesarias.

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

Una vez que tenga instaladas las dependencias, reinicie la aplicación cliente y servidor.

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

Dirija su navegador a http: // localhost: 4200 y debería tener la aplicación en ejecución.

Creación del componente Mostrar post

Una vez que el usuario inicie sesión en la aplicación, mostrará el InicioComponente. InicioComponente actúa como un componente contenedor para todos los componentes que se muestran en su interior. Verás la lista de publicaciones de blog agregadas por el usuario en el InicioComponente.

Para mostrar las publicaciones del blog, vamos a crear un nuevo componente llamado ShowPostComponent. Crea una carpeta llamada show-post dentro de src / app carpeta. Dentro de show-post carpeta, crea un archivo llamado show-post.component.html y añada el siguiente código HTML:

  
 
Lista del encabezado del elemento del grupo
 Hace 3 días 
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.   
 
Lista del encabezado del elemento del grupo
 Hace 3 días 
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.   
 
Lista del encabezado del elemento del grupo
 Hace 3 días 
 
Donec id elit non mi porta gravida en eget metus. Maecenas sed diam eget risus varius blandit.
 Donec id elit non mi porta.  

Crear un archivo llamado show-post.component.ts que contendrá el ShowPostComponent clase. Aquí está cómo se ve:

importe Componente, OnInit desde '@ angular / core'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html') clase de exportación ShowPostComponent implementa OnInit constructor ()  ngOnInit ()  

Importar el ShowPostComponent en el app.module.ts expediente.

importe ShowPostComponent desde './show-post/show-post.component';

Añadir ShowPostComponent en el NgModule en el app.module.ts expediente. 

importe BrowserModule desde '@ angular / platform-browser'; importe NgModule desde '@ angular / core'; importar ROUTING desde './app.routing'; importe FormsModule desde '@ angular / forms'; importe HttpClientModule desde '@ angular / common / http'; importe RootComponent desde './root/root.component'; importe LoginComponent desde './login/login.component'; importe HomeComponent desde './home/home.component'; importe ShowPostComponent desde './show-post/show-post.component'; @NgModule (declaraciones: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent], importaciones: [BrowserModule, ROUTING, FormsModule, HttpClientModule], proveedores: [], bootstrap: [RootComponent])) clase de exportación AppModule  

Modificar el home.component.html archivo para incluir el ShowPostComponent selector.

Así es como se modifica. home.component.html aspecto del archivo:

  
Aplicación de Blog Angular
  
  
 

Guarde los cambios anteriores y actualice la aplicación cliente. Al iniciar sesión en la aplicación, podrá ver las publicaciones del blog enumeradas.

Creación del servicio Show Post Component

Los datos mostrados en el ShowPostComponent El servicio muestra datos codificados. Necesitará un servicio para consultar la lista de publicaciones del blog desde la base de datos de MongoDB. Vamos a crear un servicio para su ShowPostComponent.

Crear un archivo llamado show-post.service.ts en src / app / show-post y añada el siguiente código:

importar Inyectable desde '@ angular / core'; importe HttpClient desde '@ angular / common / http'; @Injectable () exportar clase ShowPostService constructor (http privado: HttpClient) 

Dentro de ShowPostService, crear un método llamado getAllPost, lo que hará que la API REST llame para obtener la lista de publicaciones del blog. Aquí está cómo se ve:

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

Aquí es cómo el show-post.service.ts aspecto del archivo:

importar Inyectable desde '@ angular / core'; importe HttpClient desde '@ angular / common / http'; importar Post desde '… /models/post.model'; @Injectable () exportar clase ShowPostService constructor (http privado: HttpClient)  getAllPost () return this.http.post ('/ api / post / getAllPost', )

A continuación, debe escribir la API REST para consultar la colección de MongoDB para obtener la lista de publicaciones del blog..

En el lado del servidor, comencemos creando el modelo para la publicación. Dentro de modelos carpeta, crea un archivo llamado post.js. Requerir el Mangosta Módulo y crear un esquema para la publicación del blog y exportarlo. Aquí es cómo el /server/models/post.js miradas

const mongoose = require ('mongoose'); Const Schema = mongoose.Schema; // crea un esquema const postSchema = new Schema (title: type: String, required: true, description: type: String, required: true, collection: 'post'); const Post = mongoose.model ('Post', postSchema); module.exports = Publicar;

Exportar lo definido anteriormente. post.js presentar en app.js.

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

Crear un punto final de API / api / post / getAllPost para obtener la lista de publicaciones del blog. Utilizar el mangosta cliente para conectarse a la base de datos MongoDB.

app.post ('/ api / post / getAllPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; console.log (' conexión establecida con éxito '););)

Una vez que haya establecido la conexión, puede utilizar el Enviar modelo para encontrar la lista de publicaciones del blog.

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

los .encontrar devolución de llamada devuelve la lista de documentos.

Los documentos devueltos estarán en orden ascendente, así que agregue una condición para ordenar las publicaciones del blog en orden descendente.

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

Una vez que tenga la lista de documentos consultados en la base de datos, devuelva los datos junto con el estado. Aquí es cómo se ve la 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 ) ) ); )

Hacer la llamada a la API

En el show-post.component.ts archivo, definir una lista de matriz para mantener los resultados de la llamada a la API.

puestos públicos: cualquier [];

Importar el ShowPostService en el ShowPostComponent.

importe ShowPostService desde './show-post.service';

Añade el ShowPostService como proveedor de la ShowPostComponent.

@Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], proveedores: [ShowPostService] )

Definir un método llamado getAllPost para realizar una llamada al método de servicio. Aquí está cómo se ve:

getAllPost () this.showPostService.getAllPost (). subscribe (result => this.posts = result ['data'];); 

Como se ve en el código anterior, los datos de resultados se establecen en puestos variable.

Haga una llamada al método definido anteriormente desde el ngOnInit Método, para que los detalles de la publicación del blog se recuperen tan pronto como se inicializa el componente.

ngOnInit () this.getAllPost (); 

Aquí es cómo el show-post.component.ts aspecto del archivo:

importe Componente, OnInit desde '@ angular / core'; importe ShowPostService desde './show-post.service'; @Component (selector: 'app-show-post', templateUrl: './show-post.component.html', styleUrls: ['./show-post.component.css'], proveedores: [ShowPostService] ) la clase de exportación ShowPostComponent implementa OnInit public posts: any []; constructor (showPostService privado: ShowPostService)  ngOnInit () this.getAllPost ();  getAllPost () this.showPostService.getAllPost (). subscribe (resultado => this.posts = resultado ['data'];);  

Renderizando las publicaciones del blog

Es posible que la colección MongoDB no tenga entradas para consultar. Así que vamos a agregar algunas entradas en el MongoDB desde el mongo cáscara.

Ingrese al shell MongoDB escribiendo el siguiente comando:

mongo

Una vez que entras en el mongo shell, verifique la base de datos disponible en la base de datos MongoDB.

mostrar colecciones;

Selecciona el blogdb base de datos de las entradas enumeradas.

usar blogdb

Crea una colección llamada enviar.

db.createCollection ('post')

Inserte un par de entradas en el enviar colección.

db.post.insert (title: 'TutsPlus Python Entry', descripción: 'Bienvenido a la entrada oficial de la sesión de programación de TutsPlus Python')

Ahora atemos nuestra puestos variable en el ShowPostComponent al código HTML.

Estarás haciendo uso de la ngPara directiva para iterar sobre el puestos Variable y muestra las publicaciones del blog. Modificar el show-post.component.html archivo como se muestra:

  
 
título de la entrada
 Hace 3 días 
 
post.description
 Lee mas…   

Guarde los cambios anteriores y reinicie el cliente y el servidor de API REST. Inicie sesión en la aplicación y tendrá los registros insertados de MongoDB en la página de inicio.

Envolviendolo

En este tutorial, creaste el ShowPostComponent para mostrar los detalles de la entrada del blog de la MongoDB base de datos. Usted creó la API REST para consultar la base de datos MongoDB usando la Mangosta cliente desde el servidor Node.

En la siguiente parte de la serie de tutoriales, aprenderá cómo crear el AddPostComponent para agregar nuevos mensajes desde la interfaz de usuario de la aplicación.

El código fuente de este tutorial está disponible en GitHub.

¿Cómo fue tu experiencia hasta ahora? Hazme saber tus valiosas sugerencias en los comentarios a continuación..