时间戳

首页 > 解决方案 > 将数据从 mongodb 显示到网页

node.js - 将数据从 mongodb 显示到网页

问题描述

https://i.stack.imgur.com/mRaTJ.png

我是 nodejs 的新手，想使用 express 和 nodejs 连接 mongo 数据库。我希望我的数据从数据库显示到网页。

///// 模型架构///////

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'));

标签： node.jsmongodbexpress

解决方案

要将动态数据显示到网页，您需要使用 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文档

推荐阅读