отображать данные из mongodb на веб-странице

Question

Я новичок в nodejs и хочу подключить базу данных mongo, используя express и nodejs. Я хочу, чтобы мои данные отображались из базы данных на веб-страницу.

///// Схема модели ///////

import mongoose from 'mongoose';

const Schema=mongoose.Schema;

let Data=new Schema({     
    learningEvents:{
        type:String
    },
    learningActivities:{
        type:Array
    },
    indicators:{
        type:Array
    }
});

export default mongoose.model('Data', Data);

//////////// полный код узла js /////////////////

import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';

import Data from './models/data';

import mongoose from 'mongoose';
import data from './models/data';

const app=express();
const router=express.Router();

app.use(cors());
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/data');
const connection=mongoose.connection;

connection.once('open',()=>{
    console.log("Mongodb connected successfully");
});

router.route('/').get((req,res)=>{

        res.send('Hello');

    });

router.route('/data').get((req,res)=>{
    Data.find((err,Data)=>{
        if(err)
        console.log(err);
        else
        res.json(Data);

    });
});

app.use('/',router);

app.listen(4000,()=>console.log('Express server is running on port 4000'));

Answer 1

Для отображения динамических данных на веб-странице вам необходимо использовать шаблонизатор, такой как рули ejs и т. Д. Вы не можете сделать то же самое с html, например:

    blog.find({}, function(err, blogs){
        if(err){
            console.log("An Error Occured");
            console.log(err);
        }
        else{
            res.render("index",{blogs: blogs});
        }
    });

где index - это файл ejs, и мы передаем в него все данные блогов. Это может быть отображено в шаблоне ejs как

<% blogs.forEach(function(blog){ %>
    <div class = "ui top attached segment">
    <div class = "ui huge header"><%= blog.title %></div>
    <div>
        <div class = "item">
            <img class = "ui centered image"src = "<%= blog.image %>"></img>
        </div>
        <div class = "description">
            <p><%- blog.body.substring(0, 400) %></p>
        </div>
        <a href = "/blogs/<%= blog._id %>">Read More</a>
        <br>
        <div class = "item">
            <span><%= blog.created.toDateString() %></span>
        </div>
        </div>
        <hr>
        </div>
<% }); %>

Ссылка на ejs Документы