Nodejs+express+handlebars如何实现子模板单独刷新，而母模板不刷新。

Nodejs+express+handlebars如何实现子模板单独刷新，而母模板不刷新。

nodejs+express+handlebars如何实现局部模板刷新，比如当你评论一篇博客的时候，只刷新评论那一部分，而这个博客页面不刷新。

11 回复

要实现Node.js + Express + Handlebars中子模板的单独刷新，可以利用AJAX技术来异步加载和更新特定的部分。以下是一个简单的示例，展示如何通过AJAX请求来单独刷新子模板（如评论区），同时保持母模板（博客页面）不变。

示例代码

1. 创建一个Express应用

首先，我们需要设置一个基本的Express应用，并配置Handlebars作为视图引擎。

const express = require('express');
const path = require('path');
const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.get('/', (req, res) => {
    res.render('index', { title: 'Blog Post' });
});

app.listen(3000, () => console.log('App is running on http://localhost:3000'));

2. 设置Handlebars模板

接下来，我们创建两个Handlebars模板文件：index.hbs 和 comments.hbs。

views/index.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <div id="content">
        <!-- 主体内容 -->
        <h1>Blog Post Title</h1>
        <p>Blog post content here...</p>
        
        <!-- 评论区域 -->
        <div id="comments">
            {{> comments}}
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function loadComments() {
            $.ajax({
                url: '/load-comments',
                method: 'GET',
                success: function(data) {
                    $('#comments').html(data);
                }
            });
        }

        // 页面加载时加载评论
        $(document).ready(function() {
            loadComments();
        });

        // 假设有一个按钮触发评论刷新
        $('#refresh-comments').click(loadComments);
    </script>
</body>
</html>

views/comments.hbs

<div class="comments-list">
    <ul>
        {{#each comments}}
        <li>{{this}}</li>
        {{/each}}
    </ul>
</div>

3. 创建处理评论的路由

为了实现动态加载评论，我们需要创建一个路由来返回最新的评论列表。

app.get('/load-comments', (req, res) => {
    const comments = ['Comment 1', 'Comment 2', 'Comment 3']; // 模拟数据
    res.render('comments', { comments });
});

解释

  • index.hbs: 这个模板包含博客文章的主体内容和评论区域。评论区域使用了Handlebars的部分引用（{{> comments}}）来包含子模板comments.hbs。

  • comments.hbs: 这个模板只包含评论列表，它将被异步加载。

  • AJAX请求: 使用jQuery发起AJAX GET请求到/load-comments，该请求返回最新的评论列表并更新DOM中的评论区域。

通过这种方式，当用户点击评论区的刷新按钮或进行其他操作时，只有评论部分会被重新加载，而整个博客页面不会刷新。


用ajax吧

实在,不懂这问题想问什么…局部刷新不就是 ajax…

哈哈 不完整的蛋

比如当你评论一篇博客的时候，只刷新评论那一部分，而这个博客页面不刷新。

iframe 重新render一下 不知道行不行

iframe 或者ajax

恩，异步 ajax吧

jquery里有load方法，其实layout才是在模板里更新局部最好的办法。jade的extend会比较好。handlebar还不太清楚

app.use(function(req, res, next)){
	if(!res.locals.partials) res.locals.partials = {};
	res.locals.partials.data = getData();
	next();
});

要实现子模板单独刷新（例如评论区域）而母模板不刷新，在Node.js + Express + Handlebars环境中，可以通过以下步骤实现：

  1. 使用Ajax请求：当用户提交评论时，通过JavaScript发送一个Ajax请求到服务器端处理该评论。
  2. 服务器端处理：服务器端接收到请求后处理评论数据，并返回新的评论HTML片段。
  3. 更新DOM：客户端接收到新的评论数据后，使用JavaScript将新的评论插入到当前页面的评论区域中。

示例代码

服务器端代码 (Node.js + Express)

const express = require('express');
const hbs = require('hbs');

const app = express();
app.set('view engine', 'hbs');

app.use(express.urlencoded({ extended: true }));

// 模拟博客数据
let blogComments = [
    { id: 1, user: 'Alice', comment: 'Great post!' },
    { id: 2, user: 'Bob', comment: 'Thanks for sharing.' }
];

app.get('/blog/:id', (req, res) => {
    res.render('blog', { comments: blogComments });
});

app.post('/blog/:id/comment', (req, res) => {
    const newComment = req.body;
    blogComments.push(newComment);
    res.send(`
        <div class="comment">
            <strong>${newComment.user}:</strong> ${newComment.comment}
        </div>
    `);
});

app.listen(3000, () => console.log('Server started on port 3000'));

客户端代码 (Handlebars模板)

<!-- views/blog.hbs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog Post</title>
</head>
<body>
    <article>
        <h1>Blog Title</h1>
        <!-- 博客内容 -->
    </article>
    <section id="comments">
        {{#each comments}}
            <div class="comment">
                <strong>{{user}}:</strong> {{comment}}
            </div>
        {{/each}}
    </section>
    <form id="comment-form" action="/blog/{{@root.id}}/comment" method="POST">
        <input type="text" name="user" placeholder="Your Name" required>
        <textarea name="comment" placeholder="Your Comment" required></textarea>
        <button type="submit">Submit Comment</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#comment-form').on('submit', function(event) {
                event.preventDefault();

                $.ajax({
                    url: $(this).attr('action'),
                    method: $(this).attr('method'),
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#comments').append(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

解释

  1. 服务器端：/blog/:id 处理GET请求渲染博客页面，/blog/:id/comment 处理POST请求处理新评论并返回新的评论HTML片段。
  2. 客户端：使用jQuery监听表单提交事件，阻止默认行为，通过Ajax请求将表单数据发送到服务器。服务器返回新的评论HTML，客户端将其追加到现有评论区域中。

这种方式可以实现子模板（评论区）单独刷新，而母模板（博客页面）保持不变。

回到顶部