首页 > 解决方案 > 使用 Handlebars 模板从数据库中渲染数据

问题描述

你好呀!

这个 Node.js 应用程序使用 Mongoose、MongoDB 和 Handlebars。

目标是用基本的 CRUD 构建一个简单的博客站点。我的问题是渲染。我可以创建一个新帖子,它有一个标题、内容和日期。每个帖子都有一个“更多”按钮。该按钮呈现一个新页面,我要做的就是在该页面上显示这些数据。出于某种原因,主站点显示该帖子,但在单击“更多”按钮后,我所拥有的只有日期。除此之外,它都是空白的。

我试图以几种不同的方式解决这个问题。我在这里阅读了以前的线程和文档,但似乎没有任何效果。

我所拥有的只是尝试:

  1. .lean()
  2. @handlebars/allow-prototype-access": "^1.0.5"

这是 Handlebars 的 app.js 代码:

const {allowInsecurePrototypeAccess} = require('@handlebars/allow-prototype-access');
const Handlebars = require('handlebars');
const expressHandlebars = require('express-handlebars');
app.engine('handlebars', expressHandlebars({
  defaultLayout: 'home',
  helpers: {
    generateDate: generateDate,
    pagination: pagination},
    handlebars: allowInsecurePrototypeAccess(Handlebars)
}));

app.set('view engine', 'handlebars'); 

这是路线的代码(它应该使用它的 slug 调用该帖子):

router.get('/post/:slug',(req, res) => {
    Post.findOneAndUpdate({slug : req.params.slug}, {$inc : {viewCount : 1}}, {new: true})
        .lean()
        .populate({path: 'comments', match: {allowComments: true}, populate: {path: 'user', model: 'users'}})
        .populate('user')
        .then(post => {
            Category.find({})
                .then(categories => {
                    res.render('home/post', {post: post, categories: categories});
                });
        });
});

当然还有把手:

<div class="row">
    <div class="col-8">
        <h1>{{post.title}}</h1>
        <p>Author: {{post.user.lastName}} {{post.user.firstName}} - Date: {{generateDate date "YYYY-MM-DD"}}</p>
        <img src="/uploads/{{post.file}}" alt="">
        <p>{{post.body}}</p>
    </div>
    {{>home/sidebar}}
    <hr>
    <div class="row">
        <div class="col-12">
            {{#if user}}
                {{#if post.allowComments}}
                    <div class="card">
                        <div class="card-header">Write a comment</div>
                        <div class="card-body">
                            <form action="/admin/comments" method="post">
                                    <textarea name="body"
                                              class="form-control"
                                              required
                                              rows="3">
                                    </textarea>
                                <input type="hidden" name="id" value="{{post.id}}">
                                <button type="submit" class="btn btn-primary">OK</button>
                            </form>
                        </div>
                    </div>

                {{else}}
                    <h2>Comments are not allowed here</h2>
                {{/if}}
            {{else}}
                <h3>Log in the write a comment</h3>
            {{/if}}
            <hr>
            {{#each post.comments}}
                <div class="card">
                    <div class="card-header">{{user.lastName}} - {{user.firstName}}</div>
                    <div class="card-body">{{body}}</div>
                </div>
            {{/each}}
        </div>
    </div>
</div>

这可能是非常简单的事情,但每一个输入都非常感谢提前!

谢谢!

标签: node.jsposthandlebars.jsrenderingblogs

解决方案


推荐阅读