持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情
渲染EJS页面
现在，我们进入一个令人兴奋的部分：让服务器渲染EJS页面和部分，以便您可以在前端看到它们。
server.js示例
// Load Node modules
var express = require('express');
const ejs = require('ejs');
// Initialise Express
var app = express();
// Render static files
app.use(express.static('public'));
// Set the view engine to ejs
app.set('view engine', 'ejs');
// Port website will run on
app.listen(8080);
// *** GET Routes - display pages ***
// Root Route
app.get('/', function (req, res) {
res.render('pages/index');
});
首先，我们需要将EJS节点模块添加到我们的服务器中。因此，在server.js文件中（见上面的示例），添加const ejs = require('ejs');。
其次，我们需要告诉我们的Express服务器使用EJS，所以添加app.set('view engine', 'ejs');
现在，我们需要配置路线。路由告诉服务器，当用户访问您网站中的某个URL（如http://testapp.com/login时该怎么做。
有两种类型的路线，GET和POST。GET路由显示页面和POST路由将数据从前端上传到服务器（通常通过表单），通常在页面呈现之前，并以某种方式使用上传的数据。
由于我们只想显示我们的EJS页面，我们将只使用GET路由。server.js中的app.listen(8080)行之后添加它们。对于索引页面，路线将是：
// *** GET Routes - display pages ***
// Root Route
app.get('/', function (req, res) {
res.render('pages/index');
});
'/'指定代码将激活的网站的URL，req代表请求，res代表响应。因此，访问http://testapp.com时返回的响应正在渲染（显示到浏览器）页面/index.ejs页面。为您的其他EJS页面添加类似的路由。
将服务器端数据传递给前端
除了重用代码外，模板的主要吸引力在于您可以将服务器端变量传递给前端。要么是单个变量，如当前用户的用户名，要么是数组，如每个注册用户的详细信息。
然而，在使用API或数据库时，传递服务器端变量的真正强度变得显而易见。
对于一个基本示例，以下代码将在索引页面的h2标签中显示“Louise”：
server.js
// Route Route
app.get('/', function (req, res) {
var name = "Louise";
// Render index page
res.render('pages/index', {
// EJS variable and server-side variable
name: name
});
});
第一个name是EJS变量的名称（在前端显示它的名称），第二个名称是包含您要发送的数据的变量。（它们不必相同。）
index.ejs
<h2>My name is <%= name %></h2>
对于一个简单的数组，您可以使用此示例，它将为列表名变量中的每个名称创建一个p标签：
server.js
// Route Route
app.get('/', function (req, res) {
var listnames = ["Louise", "Sadie", "Erik", "Raph", "Gina"];
// Render index page
res.render('pages/index', {
// EJS variable and server-side variable
listnames: listnames
});
});
index.ejs
<% listnames.forEach(function(name) { %>
<p><%= name %></p>
<% }); %>
恭喜你。您已经完成了第一个Node.js网页应用程序的开发。
结论
希望可以帮助到你。
