Nodejs模板引擎应该用在前台还是后台？

Nodejs模板引擎应该用在前台还是后台？

最近纠结很久，最后觉得完全没有必要在后台使用模板引擎。服务器只需要向前台发送模板，然后进行json数据交互就可以了，模板的渲染完全在前台做就可以了，大家觉得呢？求给意见！

7 回复

Nodejs 模板引擎应该用在前台还是后台？

最近在开发一个项目时，我遇到了关于是否在后台使用模板引擎的困惑。经过一番思考，我认为完全没有必要在后台使用模板引擎。服务器只需向前台发送模板，然后进行 JSON 数据交互即可，模板的渲染完全可以放在前台完成。以下是我的一些看法和示例代码。

后台渲染 vs 前台渲染

后台渲染 在传统的后端渲染中，Node.js 服务器会使用模板引擎（如 EJS、Pug 或 Handlebars）来生成 HTML 页面，并将其发送到客户端浏览器。这种方式的优点是可以在服务器端处理复杂的逻辑，生成最终的 HTML 内容。但是，它也有缺点，比如增加了服务器的计算负担，且不利于前端工程师的开发。

前台渲染 相反，在现代 Web 开发中，越来越多的应用倾向于将模板渲染移到客户端。服务器只提供 API 来返回数据，而客户端通过 JavaScript 来处理这些数据并渲染模板。这种方式的优点是减轻了服务器的负担，前端工程师可以更灵活地控制页面的展示效果。

示例代码

后台渲染示例（使用 EJS）

假设我们有一个简单的 Express 应用，使用 EJS 作为模板引擎：

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

app.get('/', (req, res) => {
    const data = {
        title: 'Hello World',
        message: 'Welcome to my website!'
    };
    res.render('index', data);
});

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

对应的 views/index.ejs 文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>
前台渲染示例（使用 Fetch API 和 Handlebars.js）

首先，我们需要安装 Handlebars.js：

npm install handlebars

然后，我们可以编写一个简单的 HTML 文件，使用 JavaScript 和 Fetch API 来获取数据并渲染模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Frontend Template Engine</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
</head>
<body>
    <div id="content"></div>

    <script id="template" type="text/x-handlebars-template">
        <h1>{{message}}</h1>
    </script>

    <script>
        fetch('/api/data')
            .then(response => response.json())
            .then(data => {
                const source = document.getElementById('template').innerHTML;
                const template = Handlebars.compile(source);
                const renderedHTML = template(data);
                document.getElementById('content').innerHTML = renderedHTML;
            });
    </script>
</body>
</html>

服务器端的 API 可以这样实现：

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

app.get('/api/data', (req, res) => {
    const data = {
        message: 'Welcome to my website!'
    };
    res.json(data);
});

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

结论

综上所述，根据项目的具体需求和团队的技术栈选择，前台渲染可能是更好的选择。它不仅能够减轻服务器的负担，还能让前端工程师更加灵活地控制页面的展示效果。希望这些示例代码和分析能帮助你做出决策。


前端mvc 使用angularjs中。。。。

http://briantford.com/blog/angular-express.html angularjs+express的教程 有种子和demo下载

现在backbone用的人已经不多了？

要是不考虑搜索引擎收录可以在前端渲染模版，我做过个测试，用underscore的模版引擎，把with语句修改掉，不复杂的模板放在前端或后端对性能影响不大。

不用node也可以跑anglarjs么？

在Node.js应用中，模板引擎通常用于后台服务端的渲染工作，而不是直接在前端使用。这是因为模板引擎的主要作用是在服务器端根据动态数据生成HTML页面，再将生成好的HTML页面发送到客户端（浏览器）。这种方式不仅可以减少前端的负担，还能提高用户体验，因为用户可以更快地看到完整的内容。

示例代码

假设我们使用的是EJS模板引擎，下面是一个简单的例子来说明如何在后台使用EJS模板引擎：

  1. 安装EJS

    在项目目录下运行：

    npm install ejs

  2. 创建一个简单的Express应用

    const express = require('express');
const app = express();
const port = 3000;

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

// 创建一个简单的路由
app.get('/', (req, res) => {
    // 定义一个对象来传递数据
    const data = {
        title: "Hello EJS",
        content: "This is a simple EJS template."
    };
    // 渲染一个名为index的EJS模板，并将data对象的数据传递给模板
    res.render('index', data);
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

  3. 创建EJS模板文件

    在项目中创建一个views文件夹，并在其中添加一个index.ejs文件：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p><%= content %></p>
</body>
</html>

在这个例子中，当我们访问服务器时，服务器会渲染EJS模板，并将数据传递给模板，最终生成完整的HTML页面发送给客户端。

总结

因此，模板引擎更适合在后台使用，以实现动态内容的渲染和生成。而前端主要负责与用户的交互、响应式设计以及处理动态数据展示，例如通过AJAX请求从服务器获取JSON数据并更新页面内容。

回到顶部