使用Node.js和Express创建服务器端渲染

后端思维 2019-10-17 ⋅ 14 阅读

Node.js和Express是目前非常流行的服务器端开发框架,它们能够帮助我们快速构建高性能的Web应用程序。在本教程中,我们将使用Node.js和Express来创建一个简单的服务器端渲染的Web应用。

准备工作

首先,确保您已经安装了Node.js和npm。您可以从官方网站(https://nodejs.org)下载安装程序,并按照提示进行安装。

接下来,我们需要创建一个新的项目目录,并在该目录中初始化一个新的npm项目。打开终端或命令提示符,导航到您希望创建项目的位置,并执行以下命令:

mkdir server-rendering-tutorial
cd server-rendering-tutorial
npm init

按照提示一步一步进行初始化,并在完成后创建一个新的index.js文件用于创建我们的服务器端应用。

创建Express应用

首先,我们需要安装Express作为我们的服务器端框架。运行以下命令来安装:

npm install express --save

完成后,在index.js文件中添加以下代码:

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

app.get('/', (req, res) => {
   res.send('Hello, World!');
});

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

这段代码将创建一个新的Express应用程序,并监听本地3000端口。当我们在浏览器中访问http://localhost:3000/时,服务器将会返回'Hello, World!'的文本响应。

添加视图模板引擎

接下来,我们需要选择一个合适的视图模板引擎来帮助我们在服务器端生成动态的HTML。在本教程中,我们将使用EJS作为我们的视图模板引擎。

首先,安装EJS模板引擎。运行以下命令进行安装:

npm install ejs --save

完成后,我们需要在index.js文件中配置Express来使用EJS作为视图模板引擎:

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

接着,我们需要创建一个新的ejs模板文件来渲染我们的视图。在项目根目录下创建一个名为views的目录,并在其中创建一个名为index.ejs的ejs文件。

index.ejs文件中,您可以编写您希望服务器渲染的HTML代码,例如:

<!DOCTYPE html>
<html>
<head>
   <title>Server Rendering Tutorial</title>
</head>
<body>
   <h1>Welcome to Server Rendering Tutorial</h1>
   <p>This is a server-rendered HTML page.</p>
</body>
</html>

接下来,我们需要修改index.js文件以使用我们的ejs模板文件作为视图:

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

这样,当我们访问http://localhost:3000/时,服务器将会使用ejs模板文件中的HTML代码渲染视图并返回给客户端。

添加静态文件

在许多情况下,我们还需要在服务器上提供静态资源文件,如CSS、JavaScript或图像文件。为了实现这一点,我们可以使用Express的static中间件。

首先,我们需要在项目根目录下创建一个名为public的目录。在public目录中,您可以存放所有您希望在服务器上提供的静态文件。

接下来,我们需要告诉Express服务器我们希望将public目录下的文件视为静态文件。在index.js文件中添加以下代码:

app.use(express.static('public'));

这样,当我们在代码中链接到某个静态文件时,例如/css/style.css,Express服务器将在public目录中查找该文件并将其返回给客户端。

部署项目

最后,我们需要告诉Node.js运行我们的服务器应用。在index.js文件的末尾,添加以下代码:

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}`);
});

这样,我们的服务器应用就启动了。现在,当我们在终端中执行node index.js命令时,我们的服务器应用将在本地端口3000上运行。

结论

使用Node.js和Express创建一个服务器端渲染的Web应用并不难。通过安装Express和选择合适的视图模板引擎,我们能够快速构建出可在服务器上渲染的动态HTML页面。同时,使用Express的静态文件中间件,我们还能够轻松地提供静态资源文件。希望本教程能对您有所帮助,祝您在使用Node.js和Express开发服务器端渲染应用时取得成功!


全部评论: 0

    我有话说: