使用Node.Js，Express和EJS在索引頁面的不同部分顯示博客文章

Question

我對node.js和一般編程並不陌生，因此對於專家來說，這個問題聽起來很愚蠢，但是我正在嘗試構建一個簡單的博客應用程序。 我苦苦掙扎的部分是如何將數據渲染到視圖中。 我希望能夠在索引頁面的不同部分上顯示基於類別（體育，時尚，新聞等）的帖子，類似於像www.newyorker.com這樣的新聞網站的主頁上的帖子。 我使用express，mongoose和ejs作為我的視圖引擎。

謝謝！

--------

This is my app.js file:

var bodyParser          = require("body-parser"),
    methodOverride      = require("method-override"),
    expressSanitizer    = require("express-sanitizer"),
    mongoose            = require("mongoose"),
    express             = require("express"),
    app                 = express();


// APP CONFIG
mongoose.connect("mongodb://localhost/tnm_blog_app");
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));
app.use(expressSanitizer());
app.use(methodOverride("_method"));




// MONGOOSE/MODEL CONFIG

var blogSchema = new mongoose.Schema({
    title: String,
    image: String,
    body: String,
    category: String, 
    author: String, 
    created: {type: Date, default: Date.now}
});

var Blog = mongoose.model("Blog", blogSchema); 

// ROUTES

app.get("/", function(req, res){
    res.redirect("/index"); 
});

// INDEX ROUTE

app.get("/index", function(req, res){
    Blog.find({}, function(err, blogs){
        if(err){
            console.log("ERROR!");
        } else {
            res.render("index", {blogs: blogs});
        }
    });
});

// NEW ROUTE
app.get("/index/new", function(req, res){
    res.render("new");
});

// CREATE ROUTE

app.post("/index", function(req, res){
Blog.create(req.body.blog, function(err, newBlog){
    if(err){
        res.render("new");
    } else {
        res.redirect("/index");
    }
});
});


// SHOW ROUTE

app.get("/index/:id", function(req, res){

   Blog.findById(req.params.id, function(err, foundBlog){
       if(err){
           res.redirect("/index");
       } else {
           res.render("show", {blog: foundBlog});
       }
   });
});

// EDIT ROUTE

app.get("/index/:id/edit", function(req, res){
    Blog.findById(req.params.id, function(err, foundBlog){
        if(err){
            res.redirect("/index");
        } else {
            res.render("edit", {blog: foundBlog});
        }
    });
});

// UPDATE ROUTE

app.put("/index/:id", function(req, res){
    req.body.blog.body = req.sanitize(req.body.blog.body);
    Blog.findByIdAndUpdate(req.params.id, req.body.blog, function(err, updatedBlog){
      if(err){
          res.redirect("/index");
      }  else {
          res.redirect("/index/" + req.params.id);
      }
    });
});

// DELETE ROUTE
app.delete("/index/:id", function(req, res){
    Blog.findByIdAndRemove(req.params.id, function(err){
        if(err){
            res.redirect("/index");
        } else {
            res.redirect("/index");
        }
    });
});


app.listen(3000, function(){
    console.log("SERVER IS RUNNING!");
});

This is my index.ejs file
------------------------
<% include ./partials/header %>

<div class="ui main text container">
    <div class="ui huge header">The TNM Blog</div>
    <div class="ui top  attached segment">
        <div class="ui divided items">
            <% blogs.forEach(function(blog){ %>
                <div class="item">
                    <div class="image">
                        <img src="<%= blog.image %>" >
                    </div>
                    <div class="content">
                         <a class="header" href="/blogs/<%= blog._id %>"><%=blog.title%></a>
                         <div class="meta">
                             <span><%= blog.created.toDateString() %></span>
                         </div>
                         <div class="description">
                             <p><%- blog.body.substring(0, 100) %>...</p>
                         </div>
                         <div class="extra">
                             <a class="ui floated basic violet button" href="/index/<%= blog._id %>">
                                 Read More
                                 <i class="right chevron icon"></i>
                             </a>
                         </div>
                    </div>
                </div>
            <% }) %>
        </div>
    </div>
</div>

<% include ./partials/footer %>

This is my show template

<% include ./partials/header %>
<div class="ui main text container segment">
    <div class="ui huge header"><%= blog.title %></div>
    <div class="ui top attached ">
        <div class="item">
            <img class="ui centered rounded image" src="<%= blog.image %>" >
            <div class="content">
                <span><%= blog.created.toDateString() %></span>
            </div>
            <div class="description">
                <p><%- blog.body %></p>
            </div>
            <a class="ui orange basic button" href="/index/<%= blog._id %>/edit">Edit</a>
            <form id="delete" action="/index/<%= blog._id %>?_method=DELETE" method="POST">
                <button class="ui red basic button">Delete</button>
            </form>
        </div>
    </div>

</div>
<% include ./partials/footer %>

Answer 1

您需要告訴渲染引擎帖子需要過濾到哪些類別，然后根據每個類別將不同的forEach循環放入ejs模板。 我敢肯定，您可以采用更聰明的方式提取類別，但是我只是在這里硬編碼一個字符串數組：

// INDEX ROUTE

app.get("/index", function(req, res){
    Blog.find({}, function(err, blogs){
        if(err){
            console.log("ERROR!");
        } else {
            var categories = ['news', 'shopping']
            res.render("index", {blogs: blogs, categories: categories});
        }
    });
});

然后在您的ejs模板中，您可以創建一個forEach類別，然后顯示符合該類別的博客

<% categories.forEach(function(category){ %>
    <% blogs.forEach(function(blog){ %>
        <% if(blog.category == category) { %>
        <div class="item">
            <div class="image">
                <img src="<%= blog.image %>" >
            </div>
            <div class="content">
                <a class="header" href="/blogs/<%= blog._id %>"><%=blog.title%></a>
                <div class="meta">
                    <span><%= blog.created.toDateString() %></span>
                </div>
                <div class="description">
                    <p><%- blog.body.substring(0, 100) %>...</p>
                </div>
                <div class="extra">
                    <a class="ui floated basic violet button" href="/index/<%= blog._id %>">
                        Read More
                        <i class="right chevron icon"></i>
                    </a>
                </div>
            </div>
        </div>
        <% } %>
    <% }) %>
<% }) %>

上面的方法肯定可以工作，但是效率低下，所以我也鼓勵您嘗試看看ejs是否支持JS過濾器功能

<% blogs.filter(b => b.category==category).forEach(function(blog){ %>